TypeScript 继承：extends、super 与 override

TypeScript 的类用 extends 继承另一个类。子类获得父类的全部字段和方法，用 super(...) 调用父类构造函数，还可以重写方法，而 TypeScript 会检查每个重写都与父类的类型保持兼容。

class Animal {
    constructor(public name: string) {}

    speak(): string {
        return `${this.name} makes a sound`;
    }
}

class Dog extends Animal {
    constructor(name: string, public breed: string) {
        super(name); // call the parent constructor first
    }

    override speak(): string {
        return `${super.speak()}: woof`; // call the parent method
    }
}

const rex = new Dog("Rex", "beagle");
console.log(rex.speak());          // Rex makes a sound: woof
console.log(rex);                  // Dog { name: 'Rex', breed: 'beagle' }
console.log(rex instanceof Animal); // true

这就是 JavaScript 的类继承（背后的原型链见 JavaScript 中的继承）。TypeScript 在此之上加了类型检查：凡是需要 Animal 的地方都可以传入 Dog，编译器还会验证重写的方法和 super 调用。

重写方法

子类中同名的方法会替换父类的方法。它的类型必须能赋值给父类的方法类型：参数相同或兼容，返回类型相同或更窄。否则，任何持有 Animal 的代码都可能用子类处理不了的参数去调用这个方法。

class Formatter {
    format(value: number): string {
        return value.toString();
    }
}

class CurrencyFormatter extends Formatter {
    // Compatible: accepts more (number | bigint) and returns the same type.
    override format(value: number | bigint): string {
        return `$${value.toLocaleString("en-US")}`;
    }
}

const formatters: Formatter[] = [new Formatter(), new CurrencyFormatter()];
for (const f of formatters) console.log(f.format(1234567));
// 1234567
// $1,234,567

如果把参数改成 value: string，就会得到错误 TS2416：Property 'format' in type 'CurrencyFormatter' is not assignable to the same property in base type 'Formatter'。上面的循环说明了原因：它对每个元素都用数字调用 format，并不知道拿到的是哪个子类。

这里有一个漏洞。方法参数是双向协变比较的，所以接收更窄类型的重写，比如 format(value: 1 | 2)，也能通过编译，尽管循环仍然可能传给它 1234567。返回类型则是严格检查的：返回 number 而不是 string 会报 TS2416。

override 关键字与 noImplicitOverride

override 表示“这个成员替换了基类中的某个成员”，编译器会让你说话算数。如果基类没有这样的成员（拼写错误，或者有人在父类里改了方法名），就会报错：

// This does not compile: the parent has no method called 'speek'.
class Animal {
    speak(): string {
        return "...";
    }
}

class Cat extends Animal {
    override speek(): string {
        return "meow";
    }
}

console.log(new Cat().speak());

index.ts(9,14): error TS4117: This member cannot have an 'override' modifier because it is not declared in the base class 'Animal'. Did you mean 'speak'?

不写 override 的话，这个拼写错误能通过编译，speak() 会悄无声息地返回 "..."。这个关键字只在写了它的地方起作用，所以要在 tsconfig.json 中开启 noImplicitOverride。之后每个重写基类成员的方法都必须声明出来，子类里一个普通的 speak() 就会报错 TS4114（This member must have an 'override' modifier because it overrides a member in the base class 'Animal'）。

{
    "compilerOptions": {
        "strict": true,
        "noImplicitOverride": true
    }
}

noImplicitOverride 不包含在 strict 里，需要你自己加上。override 在编译出的 JavaScript 中会被擦除。

子类中的 protected 成员

父类的 private 成员在子类中不可见。protected 成员是可见的，这正是 protected 存在的意义：它是父类提供给子类的 API。

class Counter {
    protected count = 0;
    private log: string[] = [];

    increment(): void {
        this.count++;
        this.log.push(`now ${this.count}`);
    }
}

class StepCounter extends Counter {
    constructor(private step: number) {
        super();
    }

    override increment(): void {
        this.count += this.step - 1; // protected: allowed
        super.increment();
        // this.log is private to Counter: a compile error here
    }

    get value(): number {
        return this.count;
    }
}

const c = new StepCounter(5);
c.increment();
c.increment();
console.log(c.value); // 10

完整规则见 访问修饰符，其中也解释了为什么 private 和 protected 在运行时都不会强制生效。

用更窄的类型重新声明字段

子类常常知道某个字段存放的东西比父类声明的更具体。在现代的类字段语义下，把它重新声明为 pet: Dog 会产生运行时效果：super() 返回后，子类字段会被初始化为 undefined，把父类构造函数存进去的值抹掉。除非子类构造函数再次赋值，否则 TypeScript 会报 TS2612（Property 'pet' will overwrite the base property in 'Home'）。用 declare 可以只改类型：

class Animal {
    name = "pet";
}
class Dog extends Animal {
    bark(): string {
        return "woof";
    }
}

class Home {
    pet: Animal;
    constructor(pet: Animal) {
        this.pet = pet;
    }
}

class Kennel extends Home {
    declare pet: Dog; // type only: no field is emitted

    constructor(dog: Dog) {
        super(dog);
    }
}

console.log(new Kennel(new Dog()).pet.bark()); // woof

declare 不生成任何代码，所以 Home 构造函数设置的值得以保留。让这个更窄的类型成立的，是那个只接受 Dog 的构造函数。

implements 与 extends

这两个关键字回答的是不同的问题，一个类可以同时使用两者。

interface Serializable {
    serialize(): string;
}

class Entity {
    constructor(readonly id: number) {}
}

class User extends Entity implements Serializable {
    constructor(id: number, readonly email: string) {
        super(id);
    }

    serialize(): string {
        return JSON.stringify({ id: this.id, email: this.email });
    }
}

const u = new User(1, "ada@example.com");
console.log(u.serialize()); // {"id":1,"email":"ada@example.com"}

一个类只能继承一个类（TS1174: Classes can only extend a single class）。要组合多个来源的行为，可以实现多个接口，并通过组合（用一个字段持有辅助对象）或 mixin 来共享代码。

Mixin

mixin 是一个接收类并返回其子类的函数。它提供了一种能通过类型检查的多继承形式：

type Constructor<T = {}> = new (...args: any[]) => T;

function Timestamped<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        createdAt = new Date("2024-03-15T10:30:00Z");
    };
}

function Tagged<TBase extends Constructor>(Base: TBase) {
    return class extends Base {
        tags: string[] = [];
        tag(t: string): this {
            this.tags.push(t);
            return this;
        }
    };
}

class Note {
    constructor(public text: string) {}
}

const TaggedNote = Tagged(Timestamped(Note));
const n = new TaggedNote("buy milk").tag("home");
console.log(n.text, n.tags, n.createdAt.toISOString());
// buy milk [ 'home' ] 2024-03-15T10:30:00.000Z

Constructor 中的 any[] 是必需的：TypeScript 只接受构造函数只有一个 any[] 类型剩余参数的 mixin 基类。mixin 能用，但会让类型和调用栈更难读，所以优先考虑组合。

常见错误

• 在基类构造函数中调用可被重写的方法。 基类构造函数在子类字段初始化之前运行，所以读取 this.items 的重写方法会拿到 undefined，而 this.items.push(x) 这样的调用会在运行时抛出 TypeError。TypeScript 发现不了这个问题。
• 忘记调用 super(...) 或调用得太晚。 会报错 TS2377 和 TS17009；父类必须先构建好对象，子类才能使用 this。
• 重新声明父类字段时没有用 declare。 子类字段会把它重置为 undefined。
• 继承层次过深。 每多一层，子类就和父类的内部实现多耦合一层。通常两层就足够了；超过两层时，优先使用组合或接口。