TS 面向对象详解
此文章作为 TS 对 JS 知识点的补充，详细的面向对象学习可参考：js 面向对象详解
类（class）
- 定义类
class 类名 { 属性名: 类型; constructor(参数: 类型) { this.属性名 = 参数; } 方法名 () { .... } }
构造函数和 this
- this 指的是当前调用方法的对象。
继承
- 使用继承后，子类将会拥有父类所有的方法和属性。
- 通过继承可以将多个类中共有的代码写在一个父类里。
- 如果在子类中添加了父类相同的方法，则子类方法会覆盖父类的方法。
class Animal { name: string; age: number; language: string; constructor(name: string, age: number, language: string) { this.name = name; this.age = age; this.language = language; this.printInfo(); } printInfo () { console.log(this.name) console.log(this.age) console.log(this.language) } } class Cat extends Animal { } const cat = new Cat('旺财', 3, '喵喵喵');
super 关键字
- 可以理解为当前类的父类。
- 必须在子类的构造函数中调用一下 super 。
class Animal { name: string; age: number; language: string; constructor(name: string, age: number, language: string) { this.name = name; this.age = age; this.language = language; this.printInfo(); } printInfo () { console.log(this.name) console.log(this.age) console.log(this.language) } } class Cat extends Animal { super.printInfo(); } const cat = new Cat('旺财', 3, '喵喵喵');
抽象类
- 以 abstract 开头的类就是抽象类。
- 抽象类和其他类区别不大，只是不能用来创建对象。
- 抽象类就是专门用来被继承的。
- 定义一个抽象方法：
- 抽象方法使用 abstract 开头，没有方法体。
- 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写。
接口
- 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用。
class Animal { interface myInterface { name: string; age: number; } interface myInterface { gender: string; } const obj: myInterface = { name: 'aaa', age: 11, gender: '男' } }
接口可以在定义类的时候去限制类的结构。
- 接口中的所有的属性都不能有实际的值，接口只定义对象的结构，而不考虑实际值。
- 在接口中所有的方法都是抽象方法。
- 定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求。
class Animal { interface myInterface { name: string; sayHello(): void; } class Myclass implements myInterface { name: string; constructor(name: string) { this.name = name; } sayHello () { console.log('大家好！') } } }
属性的封装
- 在对象中设置的属性可以任意地被修改，会导致对象中的数据会变得非常不安全。
- TS 可以在属性前添加属性的修饰符。
- public：修饰的属性可以在任意位置访问（修改），默认值。
- private：私有属性，只有在类的内部进行访问（修改）。
- protect：受保护的属性，只能在当前类或者当前类的子类中使用。
- 通过添加方法使得私有属性被外部访问，称为存取器。
- getter 方法用来读取属性。
- setter 属性用来设置属性。
class Person { private _name: string; private _age: number; constructor(name: string, age: number) { this._name = name; this._age = age; } // TS 中设置 getter 方法的方式。 get name () { return this._name; } set name (value: string) { this._name = value; } get age () { return this._age; } set age (value: number) { if (value >= 0) { this._age = value; } } } const per = new Person('孙悟空', 18); console.log(per.name); console.log(per.age); per.name = '猪八戒'; per.age = 33; console.log(per.name); console.log(per.age);
简写：
class C { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } }
以上可以简写为：
class C { constructor(public name: string, public age: number) { } }
泛型
- 在定义函数或是类时，如果遇到类型不明确就可以使用泛型。
- 泛型可以指定多个。
function fn<T>(a: T): T{ return a; } fn(10) // 不指定泛型，TS 可以自动对类型进行判断。 fn<string>('hello') // 指定泛型。
和接口一起使用。
- T extends Inter 表示泛型 T 必须是 Inter 实现类（子类）。
interface Inter { length: number; } function fn<T extends Inter>(a: T): number { return a.length; }
