Typescript学习03:TypeScript核心学习:抽象类/接口/泛型

TypeScript核心学习

  • 类的简介
      • `属性:`
      • `方法:`
    • 继承简介
    • super关键字
    • 抽象类
  • 接口
    • 接口可以在定义类的时候限制类的结构
  • 属性的封装
  • 泛型
    • 类中使用泛型

类的简介

对象中主要包含两个部分:

属性:

直接定义的属性是实例属性,需要通过对象的实例去访问

class Person {
    //定义实例属性
    name: string = '孙悟空';
    age: number = 18;
}
const per = new Person();
console.log(per.name);

属性前面用readonly修饰,属性变为只读属性无法进行更改

class Person {
    readonly name:string='zzq';
}
export default Person;

通过static定义的属性是类属性,需要通过类进行访问

class Person {
    static age:number=17;
}
export default Person;

方法:

class Person {
     name:string='zzq';

     sayHello(){
         console.log('hello')
     }
}
export default Person;

继承简介

使用继承后,子类将会拥有父类所有的属性和方法(相当于将父类代码完全拷贝到了子类)
如果希望在子类中添加一些父类没有的属性和方法直接添加就可以了
如果在子类方法中添加和父类方法相同的方法,则子类方法会覆盖父类方法,这种形式叫做重写

const Demo=function () {
    class Animal {
        name:string;
        age:number;

        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }

        sayHello(){
            console.log('动物在叫');
        }
    }

    class Dog extends Animal{
        sayHello() {
            console.log('汪汪汪');
        }
    }

    class Cat extends Animal{
        sayHello() {
            console.log('喵喵喵');
        }
    }

    let dog = new Dog('旺财',5);
    let cat = new Cat('小蜜',6);

    dog.sayHello();
    cat.sayHello();

}

super关键字

在类的方法中super就代表父类
如果在类中写了构造函数,此时在子类的构造函数中必须调用父类的构造函数

 class Animal {
        name:string;

        constructor(name: string) {
            this.name = name;
        }

        sayHello(){
            console.log('动物在叫');
        }
    }

    class Dog extends Animal{
        age:number;

        constructor(name: string, age: number) {
            super(name);//调用父类的构造函数
            this.age = age;
        }
    }

    let dog = new Dog('旺财',5);
    dog.sayHello();

抽象类

以abstract开头的类是抽象类,抽象类和其他类区别不大,只是不能用于创建对象(不能被实例化)
抽象类的作用就是专门被用作继承的类

抽象类中可以添加抽象方法,抽象方法必须被继承的子类重写,
抽象方法由abstract修饰,抽象方法只能定义在抽象类中
abstract sayHello():void;

   abstract class Animal {
        name: string;

        constructor(name: string) {
            this.name = name;
        }

        abstract sayHello():void;
    }

    class Dog extends Animal {
        age: number;

        constructor(name: string, age: number) {
            super(name);//调用父类的构造函数
            this.age = age;
        }

        sayHello() {
            console.log('汪汪汪');
        }

    }
    let dog = new Dog('旺财', 5);
    dog.sayHello();

接口

接口用来定义一个类的结构,用来定义一个类中应该包含哪些属性和方法,同时接口也可以当成类型声明去用(类似java中的实体类vo)

interface myInterface {
    name:string;
    age:number;
}

interface myInterface {
    gender:string;
}

const obj:myInterface={
    name: 'zzq',
    age:25,
    gender: '男'
}

接口可以在定义类的时候限制类的结构

j接口中所有的属性都不能有实际的值,接口只定义对象的结构,而不能考虑实际值,在接口中所有的方法都是抽象方法

interface myInter{
    name:string;
    sayHello():void;
}

定义类时可以使一个类去实现一个接口

class Demo implements myInter{
    name: string;
    constructor(name: string) {
        this.name = name;
    }

    sayHello(): void {
        console.log('大家好')
    }
}

属性的封装

属性可以任意被修改将会导致对象中的数据变得非常不安全,如下代码所示:

const Demo=function () {
    class Person {
        name:string;
        age:number;

        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
    }
    let person = new Person('zzq',25);
    person.age=-52;
    console.log(person)
}

Ts可以再属性前添加属性的修饰符
public:修饰的属性可以在任意位置进行访问,属性的默认值
private:私有属性,只能在类的内部进行访问

const Demo=function () {
    class Person {
       private name:string;
       private age:number;

        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
    }
    let person = new Person('zzq',25);
    person.age=22;
    console.log(person)
}

私有属性可以通过在类内部添加对外方法使得外部可以访问

const Demo=function () {
    class Person {
       private _name:string;
       private _age:number;

        get name(): string {
            return this._name;
        }

        set name(value: string) {
            console.log('set方法被执行了')
            this._name = value;
        }

        get age(): number {
            return this._age;
        }

        set age(value: number) {
            this._age = value;
        }

        constructor(name: string, age: number) {
            this._name = name;
            this._age = age;
        }
    }
    let person = new Person('zzq',25);
    person.name='3666' //调的set方法
    console.log(person)
}

泛型

在定义函数或者类时,如果遇到类型不明确就可以使用泛型

  function fn<T>(a:T):T {
        return a;
    }

    console.log(fn(10));

T extends Inter 表示泛型必须是Inter的实现类(子类)

interface Inter{
    length:number;
}

const Demo=function () {
    function fn<T extends Inter>(a:T):number {
        return a.length;
    }

    console.log(fn('555'));
}

类中使用泛型

const Demo=function () {
    class MyClass<T> {
        name:T;

        constructor(name: T) {
            this.name = name;
        }
    }

    let myClass = new MyClass(25);
    console.log(myClass.name);
}

你可能感兴趣的:(TypeScript,typescript,学习,javascript)