在 TypeScript 中，类继承是一种重要的面向对象编程技术，它可以让我们更好地组织和管理代码，提高代码的可复用性和可维护性。本文将介绍如何在 TypeScript 中使用类继承，包括继承的语法、继承的原理、继承的应用场景以及一些示例代码。
继承的语法
在 TypeScript 中，我们可以使用 extends 关键字来实现类的继承。例如：
// www.javascriptcn.com code example
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number) {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
bark() {
console.log(`${this.name} barked.`);
}
}在上面的代码中，我们定义了一个 Animal 类和一个 Dog 类，Dog 类继承自 Animal 类。通过 extends 关键字，Dog 类可以访问 Animal 类中的属性和方法，同时也可以添加自己的属性和方法。
继承的原理
在面向对象编程中，继承是一种类与类之间的关系，它描述了一种类和子类的关系。在 TypeScript 中，继承是通过原型链来实现的。
每个类都有一个原型对象，它包含了该类的所有属性和方法。当我们创建一个类的实例时，这个实例会继承这个类的原型对象。当我们调用这个实例的属性和方法时，如果这个实例没有这个属性或方法，它会沿着原型链向上查找，直到找到为止。
在类继承中，子类会继承父类的原型对象，并在自己的原型对象中添加自己的属性和方法。这样，子类就可以访问父类的属性和方法，同时也可以添加自己的属性和方法。
继承的应用场景
在实际开发中，类继承有很多应用场景。下面是一些常见的应用场景：
1. 代码复用
当我们需要在多个类中使用相同的属性和方法时，可以将这些属性和方法抽象成一个父类，然后让子类继承这个父类。这样，我们就可以避免重复编写相同的代码，提高代码的复用性。
2. 多态
当我们需要在不同的类中使用相同的方法名时，可以将这些方法抽象成一个父类，然后让子类重写这个方法。这样，我们就可以实现多态，让不同的类表现出相同的行为。
3. 接口实现
当我们需要实现某个接口时，可以将这个接口抽象成一个父类，然后让子类继承这个父类。这样，我们就可以避免直接实现接口时产生的冗余代码，提高代码的可读性和可维护性。
示例代码
下面是一些示例代码，演示了如何在 TypeScript 中使用类继承：
1. 代码复用
// www.javascriptcn.com code example
class Shape {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
draw() {
console.log(`Drawing shape at (${this.x}, ${this.y}).`);
}
}
class Circle extends Shape {
radius: number;
constructor(x: number, y: number, radius: number) {
super(x, y);
this.radius = radius;
}
draw() {
console.log(`Drawing circle at (${this.x}, ${this.y}) with radius ${this.radius}.`);
}
}
class Rectangle extends Shape {
width: number;
height: number;
constructor(x: number, y: number, width: number, height: number) {
super(x, y);
this.width = width;
this.height = height;
}
draw() {
console.log(`Drawing rectangle at (${this.x}, ${this.y}) with width ${this.width} and height ${this.height}.`);
}
}
let circle = new Circle(10, 10, 5);
let rectangle = new Rectangle(20, 20, 10, 5);
circle.draw(); // Drawing circle at (10, 10) with radius 5.
rectangle.draw(); // Drawing rectangle at (20, 20) with width 10 and height 5.在上面的代码中，我们定义了一个 Shape 类和两个子类 Circle 类和 Rectangle 类。Circle 类和 Rectangle 类继承自 Shape 类，它们都有自己的属性和方法，并且都可以调用 Shape 类中的属性和方法。
2. 多态
// www.javascriptcn.com code example
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
makeSound() {
console.log(`${this.name} barks.`);
}
}
class Cat extends Animal {
constructor(name: string) {
super(name);
}
makeSound() {
console.log(`${this.name} meows.`);
}
}
let dog = new Dog("Buddy");
let cat = new Cat("Fluffy");
dog.makeSound(); // Buddy barks.
cat.makeSound(); // Fluffy meows.在上面的代码中，我们定义了一个 Animal 类和两个子类 Dog 类和 Cat 类。Dog 类和 Cat 类都重写了 makeSound 方法，这样它们就表现出了不同的行为。当我们调用这些方法时，根据对象的实际类型，会调用相应的子类方法。
3. 接口实现
// www.javascriptcn.com code example
interface IShape {
draw(): void;
}
class Circle implements IShape {
x: number;
y: number;
radius: number;
constructor(x: number, y: number, radius: number) {
this.x = x;
this.y = y;
this.radius = radius;
}
draw() {
console.log(`Drawing circle at (${this.x}, ${this.y}) with radius ${this.radius}.`);
}
}
class Rectangle implements IShape {
x: number;
y: number;
width: number;
height: number;
constructor(x: number, y: number, width: number, height: number) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
draw() {
console.log(`Drawing rectangle at (${this.x}, ${this.y}) with width ${this.width} and height ${this.height}.`);
}
}
let circle: IShape = new Circle(10, 10, 5);
let rectangle: IShape = new Rectangle(20, 20, 10, 5);
circle.draw(); // Drawing circle at (10, 10) with radius 5.
rectangle.draw(); // Drawing rectangle at (20, 20) with width 10 and height 5.在上面的代码中，我们定义了一个 IShape 接口和两个实现类 Circle 类和 Rectangle 类。Circle 类和 Rectangle 类都实现了 IShape 接口，这样它们就可以被当作 IShape 类型来使用。当我们调用 draw 方法时，会调用相应的实现类方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4dbaea941bf713491398f