浅学TypeScript（4）——面向对象：类、虚类、接口、多态、继承、封装等
类的概念
虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。
- 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法
- 对象（Object）：类的实例，通过 new 生成
面向对象（OOP）的三大特性：封装、继承、多态 - 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
- 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
- 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
- 存取器（getter & setter）：用以改变属性的读取和赋值行为
- 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
- 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
- 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口
类的概念
访问修饰
TypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 public、private 和 protected。
- public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
- private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
- protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的
简单的一个类示例
不允许多继承，只能单继承
class Person {
private name: string;
private sex: boolean;
private age: number = 0;
// 只允许被子类继承，无法实例化
protected constructor(name: string, age: number, sex: boolean) {
this.name = name;
this.age = age;
this.sex = sex;
}
toString() {
console.log(`my name is ${
this.name}, ${
this.age} years old. I am a ${
this.sex ? 'men':'women'}.`);
}
}
// 继承
class Men extends Person {
constructor(name: string, age: number) {
super(name, age, true);
}
}
// protected不允许被实例化
// let p = new Person("laowan", 20, true);
let men = new Men("laowan", 20);
men.toString();
输出
多态
class Person {
private name: string;
private sex: boolean;
private age: number = 0;
// 只允许被子类继承，无法实例化
constructor(name: string, age: number, sex: boolean) {
this.name = name;
this.age = age;
this.sex = sex;
}
toString() {
console.log(`my name is ${
this.name}, ${
this.age} years old. I am a ${
this.sex ? 'men':'women'}.`);
}
}
// 继承
class Men extends Person {
constructor(name: string, age: number) {
super(name, age, true);
}
}
class Women extends Person {
constructor(name: string, age: number) {
super(name, age, false);
}
}
// 多态
let p: Person = new Person("laowan", 23, true);
p.toString();
p = new Men("xiaowan", 23);
p.toString();
p = new Women("xiaoli", 18);
p.toString();
输出
存取器
class Person {
get name(): string {
return this._name;
}
set name(value: string) {
this._name = value;
}
private _name: string;
constructor(name: string) {
this._name = name;
}
}
静态类型
class Person {
static type: string = "person"
static getType() {
return this.type
}
}
console.log(Person.type);
console.log(Person.getType());
readonly只读修饰
class Person {
readonly name:string;
}
let p = new Person();
// Error:(6, 3) TS2540: Cannot assign to 'name' because it is a read-only property.
p.name = "123";
readonly只能用在类的属性
虚类和虚方法
abstract class Person {
protected name: string;
constructor(name: string) {
this.name = name;
}
// 子类必须实现该方法
abstract toString(): string;
}
class Men extends Person {
toString(): string {
return `I am a men, my name is ${
this.name}`;
}
}
class Women extends Person {
toString(): string {
return `I am a women, my name is ${
this.name}`;
}
}
接口
ts支持实现多接口
// 动物
class Animal {
protected type: string;
public eat(): void {
console.log(`${
this.type}在吃东西.`);
}
}
// 游
interface Swim {
swim(): void;
}
// 飞
interface Fly {
fly(): void;
}
// 鱼是会游泳的动物
class Fish extends Animal implements Swim {
swim(): void {
console.log("鱼在水中游泳，通过鱼鳍控制方向");
}
}
// 鸭子是会游泳且会飞的动物
class Duck extends Animal implements Swim, Fly{
fly(): void {
console.log("鸭子可以飞，但是飞的不高");
}
swim(): void {
console.log("鸭子在水面上游泳，通过鸭掌控制方向");
}
}
let fish = new Fish();
fish.eat();
fish.swim();
let duck = new Duck();
duck.eat();
duck.swim();
duck.fly();
输出
接口继承
interface Alarm {
alert();
}
// 接口继承接口
interface LightableAlarm extends Alarm {
lightOn();
lightOff();
}
class Point {
x: number;
y: number;
}
// 接口继承类
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {
x: 1, y: 2, z: 3};
参数型接口
interface Point {
x: number;
y: number;
}
let p: Point = {
x: 1, y: 1};
class Point3d implements Point {
// 必须要有 x、y
x: number;
y: number;
z: number;
}
let p3d: Point3d = {
x: 0, y: 0, z: 0};
函数接口
interface SumFunc {
(numList:number[]): number;
}
let sum: SumFunc = function (numList: number[]) {
return numList.reduce((p, c) => p + c, 0)
};
let sumFloor: SumFunc = function (numList: number[]) {
return Math.floor(numList.reduce((p, c) => p + c, 0))
};
let arr = [1,2,3,4,5,6.6];
console.log(sum(arr));
console.log(sumFloor(arr));
输出
可选属性
使用问号标识一个属性，表示这个属性是可选的
// 可选属性
interface Interface {
name: string;
age?: number;
}
class Class1 implements Interface {
age: number;
name: string;
}
class Class2 implements Interface {
name: string;
}
// 同样可用于函数上
function f2(name: string, age?: number) {
console.log(name);
if (age) {
console.log(age);
}
}
ts的面向对象的一些特点
- 不允许构造函数重载、方法重载，这应该是js不支持函数重载引起的
- 不加访问修饰符时默认是public，这和Java的包内可用是不同的
- 只允许单继承，但允许实现多个接口
- 接口除了可以继承接口之外，还可以继承自类
- 接口中除了方法声明，还可以实现属性声明，和函数声明