【TypeScript】类

说明

对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从 ECMAScript 2015，也就是 ES6 开始，JavaScript 程序员将能够使用 基于类的面向对象的方式。 使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本。

类 的 结构

类的主要元素：属性、构造器、方法

class Cat {
    // 属性
    name: string
    age: number
    // 构造函数
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    // 普通方法
    eat(): void {
        console.log(`${this.name} 吃玉米`)
    }
}
let cat: Cat = new Cat('O_O', 12);
cat.eat()

继承 & 多态

关键字 extends

class Animal {
    // 属性
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    run(distance: number): void {
        console.log(`Animal run ${distance}m`)
    }
}

class Cat extends Animal { // 继承
    type: string
    // 构造函数
    constructor(name: string, age: number) {
        super(name, age) // 调用父类构造函数
    }
    // 普通方法
    eat(): void {
        console.log(`${this.name} 吃玉米`)
    }
    // 重写父类方法
    run(distance: number): void {
        console.log(`${this.name} run ${distance}m`)
    }
}
let cat: Cat = new Cat('O_O', 12);
cat.run(15)

权限修饰符

默认 公共 public ，实例对象，类内部，子类 都可以访问

私有 private，只有类内部可以访问

保护 protected，类内部 、子类之类可以访问

class Animal {
    // 属性
    protected name: string // 当前类内部 子类
    public age: number // 公共
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    run(distance: number): void {
        console.log(`Animal run ${distance}m`)
    }
}

class Cat extends Animal { // 继承
    private type: string // 当前类内部
    // 构造函数
    constructor(name: string, age: number) {
        super(name, age) // 调用父类构造函数
    }
    // 普通方法
    eat(): void {
        console.log(`${this.name} 吃玉米`)
    }
    // 重写父类方法
    run(distance: number): void {
        console.log(`${this.name} run ${distance}m`)
    }
}
let cat: Cat = new Cat('O_O', 12);
cat.run(15)
console.log(cat.age) // 12

readonly 修饰符

readonly 修饰属性为 可读，只能在定义时或者构造函数初始化

class Person {
  readonly name: string = 'abc'
  constructor(name: string) {
    this.name = name
  }
}

let john = new Person('John')

参数属性

TypeScript 不一样的地方，作用简化代码

不止能写 readonly，其他权限 public，private，protected

// 与上一个代码效果一样
class Person {
  constructor(readonly name: string) {
  }
}

let john = new Person('John')

静态属性

不用实例化就能获取的属性

class Dog {
    static name_: string = 'O_O'
}

console.log(Dog.name_) // 'O_O'

抽象类

抽象类 和 抽象方法 用 abstract 关键字

• 抽象类作为其它类 继承使用。
• 抽象类 不能被实例化。
• 不同于接口，抽象类的普通方法可以有方法体，但 抽象方法 不能有方法体
• 抽象方法 必须 在抽象类里

abstract class Animal {
    abstract eat(): void; // 抽象方法 没有实现细节

    run(x: number){ // 继承后 普通方法 可以不用实现
        console.log(`xx run ${x}m`)
    }
}

class Dog extends Animal{

    eat(){ // 必须实现 全部 抽象方法的方法体
        console.log(`dog eat xx`)
    }
}

let dog: Dog = new Dog()
dog.run(15) // xx run 15m