TypeScript进阶

一、面向对象

• 一个事物到了程序中就变成一个对象
• 我们想干什么就先找到它的对象，再用对象去完成对应的工作
• 所有对象都被分成了两个部分，数据（属性）和功能（方法）

二、类

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

const per = new Person();
per.name

• 使用static开头的属性是静态属性（类属性），可以直接通过类去访问

Person.age

• readonly开头的属性表示一个只读的属性（无法修改）

static readonly age: number = 19

常用的声明方式：name = "wan";利用类型推论去判断类型

• 定义方法，和属性一样也有实例方法和类方法

getName(){
    
    console.log("wow~");
}

三、构造函数和this

class Pubg{
    
    name: string;
    age: number;
    // 构造函数会在对象创建时调用 每次调用new都会执行
    constructor(name: string, age: number) {
    
        // 在实例方法中，this就表示当前的实例
        // 在构造函数中当前对象就是当前新建那个对象
        // 可以通过this向新建的对象中添加属性
        this.name = name;
        this.age = age;
    }
    shoot(){
    
        // 在方法中可以通过this来表示当前调用方法的对象
        console.log(this.name);
    }
}

const pubg = new Pubg('wan', 14);
console.log(pubg);
pubg.shoot();

四、继承

(function () {
    
    // 定义动物类
    class Animal {
    
        name: string;
        age: number;
        constructor(name: string, age: number) {
    
            this.name = name;
            this.age = age;
        }
        shout() {
    
            alert('wow~');
        }
    }

    // 此时Animal为父类，子类为Dog
    // 使用继承后，子类将拥有父类所有的方法和属性
    // 可以在不修改原来类的基础上对类进行扩展
    class Dog extends Animal {
    
        constructor(name: string, age: number) {
    
            // 在子类中写了构造函数，必须对父类的构造函数进行调用
            super(name, age); // 调用父类的构造函数
        }

        // 方法重写：子类覆盖掉父类方法的形式
        shout() {
    
            alert('ww~');
            // 在类的方法中super就表示当前类的父类
            super.shout();
        }
        run() {
    
            console.log(`${
      this.name}在跑~~`);
        }
    }

    class Cat extends Animal {
    
        shout() {
    
            alert('mm~');
        }
    }

    const dog = new Dog('wan', 15);
    const cat = new Cat('dbq', 14);
    console.log(dog);
    console.log(cat);
    dog.shout();
    dog.run();
    cat.shout();
})();

五、抽象（abstract）

(function () {
    
    /* * 以abstract开头的类是抽象类 * 抽象类和其他类区别不大，只是不能用来创建对象 * 抽象类就是专门用来被继承的类 * 抽象类中可以添加抽象方法 * */
    abstract class Animal {
    
        name: string;
        constructor(name: string) {
    
            this.name = name;
        }

        // 定义一个抽象方法
        // 用abstract开头，没有方法体
        // 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写
        abstract shout(): void;
    }
    class Dog extends Animal {
    
        shout() {
    
            console.log('www');
        }
    }

    const dog = new Dog('wan');
    dog.shout();
})();

六、接口

• 描述一个对象的类型

type myType = {
    
    name: string,
    age: number
};

const obj1: myType = {
    
    name: 'wan',
    age: 11
}

• 接口用来定义一个类结构，定义一个类中应该包含哪些属性和方法。同时接口也可以当成类型声明去使用。接口实际上就是一个标准，用来限制类的使用（TS独有，JS没有）

interface myInterface{
    
    name: string;
    age: number;
}
interface myInterface{
    
    gender: string
}
// 会合并在一起
const obj2: myInterface = {
    
    name: 'dbq',
    age: 12,
    gender: 'male'
}

• type和interface的区别
  • 接口可以在定义类的时候去限制类的结构
  • 接口中所有的属性都不能有实际的值
  • 接口只定义对象的结构，而不考虑实际值
  • 在接口中所有的方法都是抽象方法
• 定义类时，可以使类去实现一个接口（使类满足接口的要求）

interface myInter{
    
    name: string;
    shout(): void;
}
class myClass implements myInter{
    
    name: string;
    constructor(name: string) {
    
        this.name = name;
    }
    shout() {
    
        console.log('www')
    }
}

七、属性的封装

TS可以在属性前添加属性的修饰符（TS独有，JS无）

• public 修饰的属性可以在任意位置访问（默认值）
• private 私有属性，只能在类内部进行访问（通过在类中添加方法使得私有属性可以被外部访问）
• protected 受保护的属性，只能在当前类和当前类的子类中访问

private _name: string;
private _age: number;
constructor(name: string, age: number) {
    
	this._name = name;
	this._age = age;
}
// 简化版
constructor(private _name: string,private _age: number) {
    }

属性的存取器

• getter方法用来读取属性
• setter方法用来设置属性
• 定义一个获取name属性的方法（可选）

getName(){
    
	return this.name;
}

• 定义一个设置name属性的方法（可选）

setName(value: string){
    
	this.name = value;
}

• ES6的方式在TS中设置getter，setter方法

get name(){
    
    return this._name;
}
set name(value){
    
    this._name = value;
}

get age(){
    
    return this._age;
}
set age(value){
    
    if (value >= 0){
    
        this._age = value
    }
}

注意：如果没有使用属性的存取器，属性就是在对象中设置的，可以任意被修改，会导致对象中的数据变得非常不安全

八、泛型

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

function fn1<T>(a: T): T {
    
    return  a;
}
// 可以直接调用具有泛型的函数
let result1 = fn1(19); // 不指定泛型 TS可以自动对类型进行推断
let result2 = fn1<string>('dbq'); // 指定泛型

指定多个泛型

function fn2<T, K>(a: T, b: K): T {
    
    console.log(b);
    return a;
}
fn2<number, string>(123, 'gg');

在接口中的使用

interface Inter {
    
    length: number;
}
// T extends Inter 表示泛型T必须是Inter实现类（子类）
function fn3<T extends Inter>(a: T): number {
    
    return a.length;
}
fn3({
    length: 10});

在类中的使用

class myClass<T> {
    
    name: T;
    constructor(name: T) {
    
        this.name = name;
    }
}
const mc = new myClass<string>('gg');