TypeScript 中的 Extends 怎么那么优秀啊？(TypeScript 中的 Extends 为何如此出色？)

原创

ithorizon 4周前 (10-19) 阅读数 18 #后端开发

TypeScript 中的 Extends 为何如此出色？

在 TypeScript 中，extends 关键字是一个非常强盛的特性，它允许类型系统更加灵活和强盛。本文将详细介绍 TypeScript 中的 extends 关键字，解释它为何如此出色，以及怎样在实际开发中运用它。

一、领会 Extends 关键字

extends 关键字在 TypeScript 中首要用于类的继承和泛型约束。下面我们分别来看这两个方面的应用。

1. 类的继承

在 TypeScript 中，类可以使用 extends 关键字继承另一个类的属性和方法。这允许子类复用父类的功能，并在此基础上扩展新的功能。


class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}
class Dog extends Animal {
    bark() {
        console.log(`${this.name} says: Woof!`);
    }
}
const dog = new Dog('Rex');
dog.move(10);
dog.bark();

在上面的例子中，Dog 类通过 extends 关键字继承了 Animal 类。这样，Dog 类不仅拥有了 Animal 类的属性和方法，还可以扩展新的方法 bark。

2. 泛型约束

extends 关键字在泛型中的应用也非常广泛。它允许我们为泛型参数设置约束，确保泛型类型在使用时满足特定的条件。


interface ILengthwise {
    length: number;
}
function loggingIdentity(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}
loggingIdentity({ length: 10, value: 3 });

在上面的例子中，我们定义了一个泛型函数 loggingIdentity，它接收一个类型为 T 的参数。通过使用 extends 关键字，我们为 T 设置了约束，要求它必须符合 ILengthwise 接口。这样，当我们传递一个不满足 ILengthwise 接口的对象时，TypeScript 编译器将会报错。

二、Extends 的优势

extends 关键字之从而优秀，首要体现在以下几个方面：

1. 节约代码复用性

通过类的继承，我们可以复用父类的属性和方法，避免重复编写相同的代码。这在大型项目中尤其重要，可以大大缩减代码量，节约开发效能。

2. 扩大类型平安性

泛型约束确保了泛型类型在使用时满足特定的条件，这扩大了类型平安性，避免了运行时谬误。在 TypeScript 强类型的环境中，这可以极大地节约代码的健壮性。

3. 提升开发体验

extends 关键字允许类型系统更加灵活和强盛，它允许开发者以更直观、更符合直觉的对策编写代码。这种语法糖简化了代码结构，允许代码更易于领会和维护。

三、实际应用场景

下面我们来看一些 extends 关键字在实际开发中的应用场景。

1. 实现多态

通过类的继承，我们可以实现多态。多态是一种编程范式，它允许我们使用相同的接口来处理不同的数据类型。


class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}
class Dog extends Animal {
    bark() {
        console.log(`${this.name} says: Woof!`);
    }
}
class Cat extends Animal {
    purr() {
        console.log(`${this.name} says: Purr!`);
    }
}
const animals: Animal[] = [new Dog('Rex'), new Cat('Whiskers')];
animals.forEach(animal => {
    animal.move(5);
    if (animal instanceof Dog) {
        animal.bark();
    } else if (animal instanceof Cat) {
        animal.purr();
    }
});

在上面的例子中，我们定义了两个动物类 Dog 和 Cat，它们都继承自 Animal 类。我们可以将它们的实例存储在一个 Animal 类型的数组中，并使用相同的接口来处理它们。

2. 泛型工具类型

TypeScript 提供了一些内置的泛型工具类型，如 Partial、Readonly、Pick 等，这些工具类型都使用了 extends 关键字。


interface Person {
    name: string;
    age: number;
}
type ReadonlyPerson = Readonly;
const person: ReadonlyPerson = { name: 'Alice', age: 25 };
person.name = 'Bob'; // Error: Cannot assign to 'name' because it is a read-only property.

在上面的例子中，我们使用 Readonly 工具类型创建了一个只读的 Person 类型。这意味着任何尝试修改 person 对象的属性都会造成编译谬误。