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が加えるのは型チェックです。Dog は Animal が期待される場所ならどこにでも代入でき、コンパイラーはオーバーライドと 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 を呼んでいるからです。

穴が1つあります。メソッドの引数は双変で比較されるので、format(value: 1 | 2) のようにより狭い型を受け取るオーバーライドもコンパイルできてしまいます。ループからは 1234567 が渡されうるのにです。戻り値の型は厳密にチェックされ、string の代わりに number を返すと 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

2つのキーワードは別の疑問に答えるもので、クラスは両方を使えます。

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"}

クラスが継承できるクラスは1つだけです（TS1174: Classes can only extend a single class）。複数のところから振る舞いを組み合わせるには、複数のインターフェースを実装し、コンポジション（ヘルパーオブジェクトを持つフィールド）かミックスインでコードを共有します。

ミックスイン

ミックスインは、クラスを受け取ってそのサブクラスを返す関数です。型チェックの効く、多重継承のようなものが実現できます:

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[] 型の残余引数を1つだけ取るコンストラクターだけです。ミックスインは動きますが、型とスタックトレースが読みにくくなるので、まずはコンポジションを検討しましょう。

よくある間違い

• 基底クラスのコンストラクターからオーバーライド可能なメソッドを呼ぶ。 基底クラスのコンストラクターはサブクラスのフィールドが初期化される前に実行されるので、this.items を読むオーバーライドは undefined を見て、this.items.push(x) のような呼び出しは実行時に TypeError を投げます。TypeScriptはこれを捕まえません。
• super(...) を忘れる、または遅く呼ぶ。 エラー TS2377 と TS17009 です。サブクラスが this に触れる前に、親がオブジェクトを作らなければなりません。
• declare なしで親のフィールドを再宣言する。 サブクラスのフィールドが値を undefined にリセットしてしまいます。
• 深い階層。 階層が1段増えるたびに、子は親の内部に依存します。たいていは2段で十分で、それ以上ならコンポジションかインターフェースを選びましょう。