在早期的 JavaScript（ES5）开发中，需要使用函数和原型链实现类和继承。从 ES6 开始，引入了 class 关键字，我们可以更加方便地定义和使用类。作为 JavaScript 的超集，TypeScript 同样支持使用 class 关键字，并且可以对类的属性和方法等进行静态类型检测。本文将详细介绍 TypeScript 中类的定义、继承、多态、成员修饰符、抽象类等内容。

一、类的定义

1，基本语法

// 定义一个 Person 类
class Person {
  // 定义属性，需初始化，否则编译报错
  name: string = 'coder';
  age: number = 18;
  
  // 定义方法
  eating() {
    console.log(this.name + " eating");
  }
}

// 新建一个类
const p = new Person();

// 访问对象的属性
console.log(p.name, p.age);  // 输出: coder 18

// 调用对象的方法
p.eating();  // 输出: coder eating

2，构造函数

class Person {
  name: string;    // 定义属性
  age: number;
  
  // 添加构造函数，对属性进行初始化
  constructor(name: string, age: number) {
    this.name = name;  // 属性初始化
    this.age = age;
  }
  
  eating() {
    console.log(this.name + " eating");
  }
}

// 传递 name 和 age
const p = new Person("hangge", 18);
console.log(p.name, p.age);  // 输出: hangge 18
p.eating();  // 输出: hangge eating

二、类的继承

1，基本继承

class Person {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
       this.age = age;
  }
  
  eating(): void {
    console.log("eating");
  }
}

// Student 继承 Person
class Student extends Person {
  sno: number;
  
  constructor(name: string, age: number, sno: number) {
    super(name, age);  // super 调用父类的构造函数
    this.sno = sno;
  }
  
  studying(): void {
    console.log("studying");
  }
}

const stu = new Student('hangge', 18, 10100);
console.log(stu.name, stu.age);  // 访问继承父类的属性
stu.eating();   // 调用继承父类的方法
stu.studying(); // 调用自己的方法

2，方法重写

class Student extends Person {
  sno: number;
  
  constructor(name: string, age: number, sno: number) {
    super(name, age);
    this.sno = sno;
  }
  
  // 重写父类的方法
  eating() {
    console.log("student eating");
    super.eating();  // super 调用父类的 eating 方法
  }
}

const stu = new Student('hangge', 18, 10100);
stu.eating();  // 调用子类的 eating 方法

三、类的多态

1，多态的概念

class Animal {
  action() {
    console.log("animal action");
  }
}

class Dog extends Animal {
  action() {  // 子类重写父类的 action 方法
    console.log("dog running!!!");
  }
}

class Fish extends Animal {
  action() {
    console.log("fish swimming");
  }
}

// 多态是为了写出更具通用性的代码
function makeActions(animals: Animal[]) {
  animals.forEach(animal => {
    // animals 是父类的引用，指向子类对象
    animal.action();  // 调用子类的 action 方法
  });
}

makeActions([new Dog(), new Fish()]);
// 输出:
// dog running!!!
// fish swimming

四、成员修饰符

1，三种修饰符

2，private 修饰符

class Person {
  // 私有属性不能被外部访问，需要封装方法来操作
  private name: string = "coder";
  
  // 默认是 public 方法
  getName() {
    return this.name;  // 获取 name
  }
  
  setName(newName: string) {
    this.name = newName;  // 设置 name
  }
}

const p = new Person();
// console.log(p.name);  // 错误：直接访问私有的 name 属性会报错
console.log(p.getName());  // ok
p.setName("hangge");  // ok

3，protected 修饰符

class Person {
  // protected 的属性，在类内部和子类中可以访问
  protected name: string = "123";
}

class Student extends Person {
  getName() {
    // 子类可以访问父类的 protected 属性
    return this.name;
  }
}

const stu = new Student();
// console.log(stu.name);  // 错误：直接访问受保护的 name 属性会报错
console.log(stu.getName());  // ok

五、只读属性

1，readonly 修饰符

type FriendType = { name: string };

class Person {
  // 只读属性可以在构造函数中赋值，赋值之后就不可以修改
  readonly name: string;
  
  // 属性本身不能进行修改，但如果它是对象类型的，则对象中的属性可以修改
  readonly friend?: FriendType;
  
  constructor(name: string, friend?: FriendType) {
    this.name = name;
    this.friend = friend;
  }
}

const p = new Person("hangge", { name: 'kobe' });

// 直接修改只读的 name 会报错
// p.name = 'liujun';  // Cannot assign to 'name' because it is a read-only

console.log(p.name, p.friend);  // ok

// p.friend = {name: 'evan'};  // 直接修改只读的 friend 会报错
if (p.friend) {
  p.friend.name = 'evan';  // friend 对象中的 name 属性是可以修改的
}

六、getter 和 setter

1，访问器

class Person {
  // 私有属性一般习惯以下划线开头命名
  private _name: string;
  
  constructor(name: string) {
    this._name = name;
  }
  
  // setter 访问器
  set name(newName: string) {
    this._name = newName;
  }
  
  // getter 访问器
  get name(): string {
    return this._name;
  }
}

const p = new Person("hangge");
p.name = "coderhangge";  // 调用 setter 访问器为 name 设置值
console.log(p.name);  // 调用 getter 访问器获取 name 的值，输出: coderhangge

七、静态成员

1，static 关键字

class Student {
  // 定义静态属性
  static time: string = "24:00:00";
  
  // 定义静态方法
  static attendClass() {
    console.log("去学习~");
  }
}

// 访问静态属性
console.log(Student.time);  // 输出: 24:00:00

// 调用静态方法
Student.attendClass();  // 输出: 去学习~

八、抽象类

1，abstract 关键字

// 抽象类 Shape
abstract class Shape {
  // 抽象方法，没有具体实现
  abstract getArea(): number;
}

// 继承抽象类
class Rectangle extends Shape {
  private width: number;
  private height: number;
  
  constructor(width: number, height: number) {
    super();  // 在类的继承中，构造函数必须调用 super 函数
    this.width = width;
    this.height = height;
  }
  
  // 实现抽象类中的 getArea 抽象方法
  getArea() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  private r: number;
  
  constructor(r: number) {
    super();
    this.r = r;
  }
  
  // 实现抽象类中的 getArea 抽象方法
  getArea() {
    return this.r * this.r * 3.14;
  }
}

// 多态的应用
function makeArea(shape: Shape) {
  return shape.getArea();
}

const rectangle = new Rectangle(20, 30);
const circle = new Circle(10);

console.log(makeArea(rectangle));  // 输出: 600
console.log(makeArea(circle));     // 输出: 314

九、类作为数据类型

1，类类型的用法

class Person {
  name: string = "coder";
  
  eating() {
    console.log("eating");
  }
}

// 用类创建对象
const p = new Person();

// 类作为一种数据类型使用
const p1: Person = {
  name: "hangge",
  eating: function() {}
};

// 类作为数据类型使用
function printPerson(p: Person) {
  console.log(p.name);
}

printPerson(new Person());
printPerson({ name: "kobe", eating: function() {} });