MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

TypeScript 抽象类与接口：abstract class 和 interface 的对比与实践

2023-03-303.3k 阅读

一、TypeScript 中的抽象类

1.1 抽象类的定义

在 TypeScript 中，抽象类是使用 abstract 关键字定义的类。抽象类不能被实例化，它主要作为其他类的基类，为子类提供通用的属性和方法的定义。例如：

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('Moving along!');
    }
}

在上述代码中，Animal 是一个抽象类，其中 makeSound 方法是抽象方法，因为它只有声明而没有实现。而 move 方法有具体的实现。

1.2 抽象类的特性

  • 不能实例化：尝试实例化抽象类会导致编译错误。例如：
// 以下代码会报错
let animal = new Animal();
  • 抽象方法必须被子类实现：如果一个子类继承自抽象类，那么它必须实现抽象类中的所有抽象方法。例如：
class Dog extends Animal {
    makeSound(): void {
        console.log('Woof!');
    }
}

这里 Dog 类继承自 Animal 抽象类，并实现了 makeSound 抽象方法。如果 Dog 类没有实现 makeSound 方法，同样会导致编译错误。

1.3 抽象类的用途

  • 代码复用：抽象类可以定义一些通用的属性和方法，子类继承后可以复用这些代码，减少重复代码的编写。比如上述的 Animal 抽象类的 move 方法，所有继承自 Animal 的子类都可以使用这个方法。
  • 强制子类遵循特定的接口：通过定义抽象方法，抽象类强制子类实现这些方法，从而保证子类具有某些特定的行为。例如，所有继承自 Animal 的子类都必须有 makeSound 方法，这样在使用这些子类时，我们可以统一调用 makeSound 方法，而不用担心不同子类之间方法名不一致的问题。

二、TypeScript 中的接口

2.1 接口的定义

接口在 TypeScript 中用于定义对象的形状（shape），它只定义对象的属性和方法的签名，而不包含实现。接口使用 interface 关键字定义，例如：

interface AnimalInterface {
    name: string;
    makeSound(): void;
}

上述 AnimalInterface 接口定义了一个具有 name 属性和 makeSound 方法的对象形状。

2.2 接口的实现

一个类可以实现一个或多个接口，通过 implements 关键字来表示。例如：

class Cat implements AnimalInterface {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    makeSound(): void {
        console.log('Meow!');
    }
}

在这个例子中，Cat 类实现了 AnimalInterface 接口，因此必须包含接口中定义的 name 属性和 makeSound 方法。

2.3 接口的特性

  • 可扩展：接口可以通过继承其他接口来扩展自身的定义。例如：
interface FlyingAnimalInterface extends AnimalInterface {
    fly(): void;
}

这里 FlyingAnimalInterface 继承自 AnimalInterface，并添加了 fly 方法。任何实现 FlyingAnimalInterface 的类都需要实现 AnimalInterface 中的所有成员以及 fly 方法。

  • 可实现多个接口：一个类可以实现多个接口，从而具备多个接口定义的特性。例如：
interface PetInterface {
    isFriendly: boolean;
}
class Parrot implements FlyingAnimalInterface, PetInterface {
    name: string;
    isFriendly: boolean;
    constructor(name: string, isFriendly: boolean) {
        this.name = name;
        this.isFriendly = isFriendly;
    }
    makeSound(): void {
        console.log('Squawk!');
    }
    fly(): void {
        console.log('Flying!');
    }
}

Parrot 类同时实现了 FlyingAnimalInterface 和 PetInterface，因此它必须包含这两个接口定义的所有属性和方法。

三、抽象类与接口的对比

3.1 定义与实现方式

  • 抽象类：抽象类使用 abstract 关键字定义，子类通过 extends 关键字继承抽象类，并实现抽象类中的抽象方法。抽象类可以包含具体的属性和方法实现，也可以有抽象方法。例如：
abstract class Shape {
    abstract area(): number;
    color: string;
    constructor(color: string) {
        this.color = color;
    }
    displayColor(): void {
        console.log(`The color of the shape is ${this.color}`);
    }
}
class Circle extends Shape {
    radius: number;
    constructor(radius: number, color: string) {
        super(color);
        this.radius = radius;
    }
    area(): number {
        return Math.PI * this.radius * this.radius;
    }
}
  • 接口：接口使用 interface 关键字定义，类通过 implements 关键字实现接口。接口只定义属性和方法的签名，不包含实现。例如：
interface ShapeInterface {
    area(): number;
    color: string;
    displayColor(): void;
}
class Square implements ShapeInterface {
    sideLength: number;
    color: string;
    constructor(sideLength: number, color: string) {
        this.sideLength = sideLength;
        this.color = color;
    }
    area(): number {
        return this.sideLength * this.sideLength;
    }
    displayColor(): void {
        console.log(`The color of the square is ${this.color}`);
    }
}

可以看到，抽象类在定义时就可以有具体的实现逻辑，而接口只是一个纯粹的契约，定义了对象应该具备的结构。

3.2 实例化能力

  • 抽象类：不能直接实例化，必须通过子类来实例化。例如：
// 以下代码会报错
let shape = new Shape('red');
  • 接口：接口不能实例化，它只是一种类型定义，用于约束类的结构。接口本身不代表任何具体的对象实例。

3.3 继承与实现关系

  • 抽象类：子类只能继承一个抽象类，因为 TypeScript 不支持类的多继承。例如：
// 以下代码会报错，因为一个类不能继承多个类
class Rectangle extends Shape, AnotherShape { 
    //...
}
  • 接口：一个类可以实现多个接口，这使得类可以具备多种不同的行为和结构特性。例如：
interface Printable {
    print(): void;
}
class Triangle implements ShapeInterface, Printable {
    side1: number;
    side2: number;
    side3: number;
    color: string;
    constructor(side1: number, side2: number, side3: number, color: string) {
        this.side1 = side1;
        this.side2 = side2;
        this.side3 = side3;
        this.color = color;
    }
    area(): number {
        let s = (this.side1 + this.side2 + this.side3) / 2;
        return Math.sqrt(s * (s - this.side1) * (s - this.side2) * (s - this.side3));
    }
    displayColor(): void {
        console.log(`The color of the triangle is ${this.color}`);
    }
    print(): void {
        console.log('Printing triangle details...');
    }
}

这种多实现的特性使得接口在代码的灵活性和可扩展性方面具有很大优势。

3.4 属性和方法的特性

  • 抽象类：抽象类中的属性可以有初始值，并且可以包含构造函数来初始化属性。例如：
abstract class Vehicle {
    wheels: number;
    constructor(wheels: number) {
        this.wheels = wheels;
    }
    abstract drive(): void;
}
class Car extends Vehicle {
    constructor() {
        super(4);
    }
    drive(): void {
        console.log('Driving the car');
    }
}

抽象类中的方法可以是抽象的，也可以是具体的。具体方法可以被子类直接使用，而抽象方法必须被子类实现。

  • 接口：接口中的属性不能有初始值，因为接口只是定义结构，不涉及对象的初始化逻辑。例如：
interface VehicleInterface {
    wheels: number;
    drive(): void;
}
// 以下代码会报错，接口属性不能有初始值
interface VehicleInterface {
    wheels: number = 4; 
    drive(): void;
}

接口中的方法也只有签名，没有具体实现。

3.5 类型检查

  • 抽象类：基于类的继承关系进行类型检查。当一个变量被声明为抽象类类型时，它可以接受该抽象类的子类实例。例如：
let vehicle: Vehicle;
vehicle = new Car();

这里 vehicle 声明为 Vehicle 类型，由于 Car 是 Vehicle 的子类，所以可以将 Car 的实例赋值给 vehicle。

  • 接口：基于结构进行类型检查，只要对象的结构符合接口定义，就可以赋值给该接口类型的变量。例如：
let vehicle: VehicleInterface;
let bike = {
    wheels: 2,
    drive() {
        console.log('Riding the bike');
    }
};
vehicle = bike;

这里 bike 对象的结构符合 VehicleInterface 的定义，所以可以将 bike 赋值给 vehicle。这种结构类型检查使得接口在使用上更加灵活，不依赖于类的继承关系。

四、实践中的选择

4.1 代码复用与共享逻辑

如果需要在多个类之间共享一些通用的实现逻辑，并且这些逻辑可以通过属性和方法的形式进行封装，那么抽象类是一个更好的选择。例如，在一个图形绘制库中，如果所有图形都有一些共同的属性（如颜色）和方法（如显示颜色），可以将这些定义在一个抽象类中，子类继承该抽象类并复用这些代码。

abstract class Graphic {
    color: string;
    constructor(color: string) {
        this.color = color;
    }
    displayColor(): void {
        console.log(`The color of the graphic is ${this.color}`);
    }
    abstract draw(): void;
}
class Line extends Graphic {
    startX: number;
    startY: number;
    endX: number;
    endY: number;
    constructor(startX: number, startY: number, endX: number, endY: number, color: string) {
        super(color);
        this.startX = startX;
        this.startY = startY;
        this.endX = endX;
        this.endY = endY;
    }
    draw(): void {
        console.log(`Drawing a line from (${this.startX}, ${this.startY}) to (${this.endX}, ${this.endY})`);
    }
}

在这个例子中，Graphic 抽象类封装了颜色相关的逻辑，Line 类继承自 Graphic 并复用了这些逻辑。

4.2 定义行为契约

当需要定义一组行为的契约，而不关心具体的实现细节，并且希望一个类可以实现多个这样的契约时，接口是更好的选择。例如，在一个电商系统中，可能有 Product 类，同时希望它具备 Searchable 和 Sortable 等不同的行为特性，可以通过接口来定义这些行为契约。

interface Searchable {
    search(query: string): boolean;
}
interface Sortable {
    compare(other: Sortable): number;
}
class Product implements Searchable, Sortable {
    name: string;
    price: number;
    constructor(name: string, price: number) {
        this.name = name;
        this.price = price;
    }
    search(query: string): boolean {
        return this.name.includes(query);
    }
    compare(other: Sortable): number {
        return this.price - (other as Product).price;
    }
}

这里 Product 类实现了 Searchable 和 Sortable 接口，从而具备了搜索和排序的行为。

4.3 灵活性与扩展性

如果希望代码具有更高的灵活性和扩展性，接口通常是更好的选择。由于接口可以多实现，并且基于结构类型检查，在代码演进过程中更容易添加新的行为和特性。例如，在一个游戏开发中，一个角色类可能需要不断添加新的能力，通过实现不同的接口可以方便地实现这一点。

interface Jumpable {
    jump(): void;
}
interface Attackable {
    attack(target: any): void;
}
class Player implements Jumpable, Attackable {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    jump(): void {
        console.log(`${this.name} is jumping`);
    }
    attack(target: any): void {
        console.log(`${this.name} is attacking ${target}`);
    }
}

如果后续需要给 Player 添加新的能力，比如 Flyable，只需要让 Player 类实现 Flyable 接口即可，而不需要修改类的继承结构。

4.4 性能与内存考虑

从性能和内存角度来看，抽象类和接口在现代 JavaScript 运行环境中通常不会有显著差异。但是，由于抽象类可以包含具体的实现和属性，可能会在实例化子类时占用更多的内存，因为子类会继承抽象类的所有属性和方法。而接口只是类型定义，不占用额外的运行时内存。因此，在内存敏感的应用场景中，如果不需要共享具体的实现逻辑，接口可能是更优的选择。

五、结合使用抽象类和接口

在实际项目中，抽象类和接口通常会结合使用，以充分发挥它们各自的优势。例如，我们可以定义一个抽象类作为基础，包含一些通用的属性和方法实现，然后通过接口来定义额外的行为契约。

abstract class Character {
    name: string;
    health: number;
    constructor(name: string, health: number) {
        this.name = name;
        this.health = health;
    }
    takeDamage(amount: number): void {
        this.health -= amount;
        if (this.health <= 0) {
            console.log(`${this.name} has died`);
        }
    }
    abstract performAction(): void;
}
interface MagicUser {
    castSpell(spell: string): void;
}
class Wizard extends Character implements MagicUser {
    constructor(name: string, health: number) {
        super(name, health);
    }
    performAction(): void {
        console.log(`${this.name} is waving the wand`);
    }
    castSpell(spell: string): void {
        console.log(`${this.name} casts ${spell}`);
    }
}

在这个例子中，Character 抽象类提供了通用的角色属性（如 name 和 health）和方法（如 takeDamage），而 MagicUser 接口定义了魔法使用者特有的行为 castSpell。Wizard 类继承自 Character 抽象类并实现了 MagicUser 接口，这样既复用了 Character 的通用逻辑，又具备了魔法使用者的特定行为。

再比如，在一个基于 React 的前端应用中，可能有一个抽象类 ComponentBase 来封装一些通用的 React 组件逻辑，如状态管理、生命周期方法等。然后通过接口来定义不同类型组件的特定行为，如 Clickable 接口定义点击行为，Draggable 接口定义可拖动行为。具体的组件类可以继承 ComponentBase 并实现相应的接口。

import React, { Component } from'react';
abstract class ComponentBase extends Component {
    state = {
        // 通用的状态定义
    };
    componentDidMount() {
        // 通用的生命周期方法实现
    }
    abstract renderContent(): JSX.Element;
    render() {
        return (
            <div>
                {this.renderContent()}
            </div>
        );
    }
}
interface Clickable {
    handleClick(): void;
}
class ButtonComponent extends ComponentBase implements Clickable {
    handleClick(): void {
        console.log('Button clicked');
    }
    renderContent(): JSX.Element {
        return (
            <button onClick={this.handleClick.bind(this)}>Click me</button>
        );
    }
}

通过这种方式，我们可以在保证代码复用的同时，实现组件的高度灵活性和扩展性。

六、常见问题与解决方法

6.1 混淆抽象类和接口的使用场景

在实际开发中，很容易混淆抽象类和接口的使用场景，导致代码结构不合理。例如，将一些应该用接口定义的行为放在抽象类中，或者将一些需要共享实现的逻辑放在接口中。解决这个问题的关键是明确两者的特性和用途。如果需要共享具体的实现逻辑，优先考虑抽象类；如果只是定义行为契约，不涉及具体实现，优先使用接口。在进行设计时，可以先分析需求，确定是需要复用代码还是定义行为规范，从而选择合适的抽象方式。

6.2 接口实现的一致性问题

当一个类实现多个接口时，可能会出现接口之间属性或方法命名冲突的问题，导致代码难以维护。例如，两个接口都定义了名为 getName 的方法，但返回值类型或功能略有不同。为了解决这个问题，在设计接口时应该尽量避免命名冲突。如果无法避免，可以在实现类中通过类型断言等方式进行区分和处理。另外，使用工具或代码审查来确保接口实现的一致性也是很有必要的。例如，可以编写测试用例来验证实现类是否正确实现了接口的所有方法，并且方法的行为符合接口的预期。

6.3 抽象类继承层次过深

在使用抽象类时，如果继承层次过深，会导致代码的可读性和维护性下降。因为子类需要层层追溯父类的属性和方法，理解整个继承体系变得困难。为了避免这种情况，在设计抽象类层次时应该尽量保持简洁，避免不必要的继承层级。可以通过提取公共部分到更高层次的抽象类，或者使用组合的方式来替代过深的继承。例如，如果一个类继承自多个抽象类，并且这些抽象类之间存在复杂的继承关系，可以考虑将这些抽象类的功能进行拆分和重组，使用组合的方式将不同的功能模块组合到一个类中，这样可以降低继承的复杂度，提高代码的可维护性。

七、与其他语言的对比

7.1 与 Java 的对比

  • 抽象类：在 Java 中，抽象类的定义和使用方式与 TypeScript 类似。Java 中的抽象类使用 abstract 关键字定义，不能被实例化，并且可以包含抽象方法和具体方法。子类通过 extends 关键字继承抽象类并实现抽象方法。例如：
abstract class Animal {
    abstract void makeSound();
    void move() {
        System.out.println("Moving along!");
    }
}
class Dog extends Animal {
    @Override
    void makeSound() {
        System.out.println("Woof!");
    }
}

不过，Java 是一种强类型语言，在类型检查等方面比 TypeScript 更加严格。例如，Java 中方法的重写必须严格遵循方法签名，包括返回值类型、参数列表等。

  • 接口：Java 中的接口同样使用 interface 关键字定义，类通过 implements 关键字实现接口。Java 接口只能包含抽象方法（从 Java 8 开始，接口可以包含默认方法和静态方法），不能有属性的实现。例如：
interface AnimalInterface {
    void makeSound();
}
class Cat implements AnimalInterface {
    @Override
    public void makeSound() {
        System.out.println("Meow!");
    }
}

与 TypeScript 不同的是，Java 接口不能像 TypeScript 接口那样基于结构进行类型检查，而是基于类的显式实现。

7.2 与 C# 的对比

  • 抽象类：C# 中抽象类的定义和使用与 TypeScript 和 Java 有相似之处。C# 使用 abstract 关键字定义抽象类，抽象类不能被实例化，子类通过 : 符号继承抽象类并实现抽象方法。例如：
abstract class Animal
{
    public abstract void MakeSound();
    public void Move()
    {
        Console.WriteLine("Moving along!");
    }
}
class Dog : Animal
{
    public override void MakeSound()
    {
        Console.WriteLine("Woof!");
    }
}

C# 在类型安全方面也有严格的要求，方法的重写需要使用 override 关键字明确标识。

  • 接口：C# 中的接口使用 interface 关键字定义，类通过 : 符号实现接口。C# 接口只能包含方法、属性、索引器和事件的声明，不能有实现。例如：
interface AnimalInterface
{
    void MakeSound();
}
class Cat : AnimalInterface
{
    public void MakeSound()
    {
        Console.WriteLine("Meow!");
    }
}

与 TypeScript 相比，C# 的接口实现也是基于类的显式声明，而不是像 TypeScript 那样基于结构类型检查。

通过与其他语言的对比，可以发现虽然不同语言在抽象类和接口的概念上有相似之处，但在具体的语法和使用方式上还是存在一些差异。理解这些差异有助于我们更好地在不同的编程环境中运用抽象类和接口进行代码设计。

在前端开发中，合理运用 TypeScript 的抽象类和接口可以提高代码的可维护性、可扩展性和可读性。通过深入理解它们的特性和对比，结合实际项目需求进行选择和使用，能够编写出更加健壮和高效的代码。无论是构建大型的前端应用，还是开发可复用的前端组件库，掌握抽象类和接口的使用都是非常重要的技能。在实际开发过程中，不断实践和总结经验，能够更好地发挥它们的优势，提升前端开发的质量和效率。