Inheritance di TypeScript: extends, super, dan override

Class TypeScript mewarisi class lain dengan extends. Subclass mendapatkan setiap field dan method milik parent, memanggil constructor parent dengan super(...), dan bisa meng-override method, sementara TypeScript memeriksa bahwa setiap override tetap kompatibel dengan tipe milik parent.

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

Ini adalah pewarisan class JavaScript (lihat inheritance di JavaScript untuk prototype chain di baliknya). TypeScript menambahkan pemeriksaan tipe: Dog bisa di-assign di mana pun Animal diharapkan, dan compiler memverifikasi override serta pemanggilan super.

Meng-override Method

Method subclass dengan nama yang sama menggantikan method milik parent. Tipenya harus bisa di-assign ke tipe method parent: parameter yang sama atau kompatibel, dan tipe kembalian yang sama atau lebih sempit. Kalau tidak, kode apa pun yang memegang Animal bisa memanggil method itu dengan argumen yang tidak bisa ditangani subclass.

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

Mengubah parameternya menjadi value: string akan memunculkan error TS2416: Property 'format' in type 'CurrencyFormatter' is not assignable to the same property in base type 'Formatter'. Perulangan di atas menunjukkan alasannya: ia memanggil format dengan angka pada setiap elemen, tanpa tahu subclass mana yang sedang dipegangnya.

Ada satu celah. Parameter method dibandingkan secara bivarian, jadi override yang menerima tipe lebih sempit, misalnya format(value: 1 | 2), tetap lolos kompilasi walaupun perulangan tadi masih bisa mengirim 1234567. Tipe kembalian diperiksa dengan ketat: mengembalikan number alih-alih string adalah TS2416.

Kata Kunci override dan noImplicitOverride

override menyatakan "member ini menggantikan member di base class", dan compiler memegangmu pada janji itu. Kalau base class tidak punya member tersebut (salah ketik, atau method yang namanya diubah seseorang di parent), hasilnya error:

// 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'?

Tanpa override, salah ketik itu lolos kompilasi dan speak() diam-diam mengembalikan "...". Kata kunci ini hanya membantu di tempat ia ditulis, jadi aktifkan noImplicitOverride di tsconfig.json. Setelah itu, setiap method yang meng-override member base class wajib menyatakannya, dan speak() biasa di subclass menjadi error TS4114 (This member must have an 'override' modifier because it overrides a member in the base class 'Animal').

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

noImplicitOverride bukan bagian dari strict; kamu harus menambahkannya sendiri. override dihapus dari JavaScript hasil kompilasi.

Member protected di Subclass

Member private milik parent tidak terlihat di subclass. Member protected terlihat, dan itulah alasan protected ada: ia adalah API yang ditawarkan class parent kepada turunannya.

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

Lihat access modifier untuk aturan lengkapnya, termasuk kenapa baik private maupun protected tidak ditegakkan saat runtime.

Mendeklarasikan Ulang Field dengan Tipe yang Lebih Sempit

Subclass sering tahu bahwa sebuah field berisi sesuatu yang lebih spesifik daripada yang dinyatakan parent. Mendeklarasikannya ulang sebagai pet: Dog punya efek saat runtime dengan class field modern: field subclass diinisialisasi menjadi undefined setelah super() selesai, sehingga menghapus nilai yang disimpan constructor parent. Kecuali constructor subclass meng-assign-nya lagi, TypeScript melaporkan ini sebagai TS2612 (Property 'pet' will overwrite the base property in 'Home'). Pakai declare untuk mengubah tipenya saja:

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 tidak menghasilkan kode apa pun, jadi nilai yang diatur constructor Home tetap ada. Constructor yang hanya menerima Dog itulah yang membuat tipe yang lebih sempit tadi benar.

implements vs extends

Kedua kata kunci ini menjawab pertanyaan yang berbeda, dan sebuah class bisa memakai keduanya.

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

Sebuah class hanya bisa meng-extend satu class (TS1174: Classes can only extend a single class). Untuk menggabungkan perilaku dari beberapa tempat, implement beberapa interface dan bagikan kode lewat komposisi (field yang berisi object helper) atau mixin.

Mixin

Mixin adalah fungsi yang menerima sebuah class dan mengembalikan subclass-nya. Mixin memberi bentuk multiple inheritance yang lolos pemeriksaan tipe:

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

any[] di Constructor wajib ada: TypeScript hanya menerima base mixin yang constructor-nya menerima satu rest parameter bertipe any[]. Mixin bisa dipakai, tetapi membuat tipe dan stack trace lebih sulit dibaca, jadi coba komposisi lebih dulu.

Kesalahan yang Umum

• Memanggil method yang bisa di-override dari constructor base class. Constructor base class berjalan sebelum field subclass diinisialisasi, jadi override yang membaca this.items akan melihat undefined, dan pemanggilan seperti this.items.push(x) melempar TypeError saat runtime. TypeScript tidak menangkap kesalahan ini.
• Lupa memanggil super(...) atau memanggilnya terlambat. Error TS2377 dan TS17009; parent harus membangun object sebelum subclass menyentuh this.
• Mendeklarasikan ulang field parent tanpa declare. Field subclass akan mengembalikannya ke undefined.
• Hierarki yang terlalu dalam. Setiap level mengikat turunan pada detail internal parent. Dua level biasanya sudah cukup; lebih dari itu, pilih komposisi atau interface.