TypeScript Kalıtım (Inheritance): extends, super ve override

Bir TypeScript sınıfı başka bir sınıftan extends ile kalıtım alır. Alt sınıf ebeveynin her alanını ve metodunu alır, ebeveyn constructor'ını super(...) ile çağırır ve metotları override edebilir; TypeScript de her override'ın ebeveynin tipleriyle uyumlu kaldığını kontrol eder.

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

Bu, JavaScript sınıf kalıtımıdır (arkasındaki prototip zinciri için JavaScript'te kalıtım sayfasına bakın). TypeScript tip kontrollerini ekler: bir Dog, bir Animal beklenen her yere atanabilir ve derleyici override'ı ve super çağrısını doğrular.

Metotları Override Etmek

Aynı ada sahip bir alt sınıf metodu ebeveyninkinin yerini alır. Tipi ebeveyninkine atanabilir olmalıdır: aynı ya da uyumlu parametreler, aynı ya da daha dar bir dönüş tipi. Aksi halde bir Animal tutan herhangi bir kod, metodu alt sınıfın işleyemeyeceği argümanlarla çağırabilirdi.

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

Parametreyi value: string yapmak TS2416 hatası olurdu: Property 'format' in type 'CurrencyFormatter' is not assignable to the same property in base type 'Formatter'. Döngü nedenini gösteriyor: hangi alt sınıfa sahip olduğunu bilmeden her elemanda format metodunu bir sayıyla çağırıyor.

Bir açık var. Metot parametreleri bivariant olarak karşılaştırılır, bu yüzden format(value: 1 | 2) gibi daha dar bir tip kabul eden bir override, döngü ona hâlâ 1234567 geçirebilecek olsa da derlenir. Dönüş tipleri ise sıkı biçimde kontrol edilir: string yerine number döndürmek TS2416 hatasıdır.

override Anahtar Kelimesi ve noImplicitOverride

override "bu üye temel sınıftaki bir üyenin yerini alıyor" der ve derleyici sizi bu söze bağlı tutar. Temel sınıfta böyle bir üye yoksa (bir yazım hatası ya da birinin ebeveynde adını değiştirdiği bir metot) bu bir hatadır:

// 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 olmadan bu yazım hatası derlenir ve speak() sessizce "..." döndürür. Anahtar kelime yalnızca yazıldığı yerde işe yarar, bu yüzden tsconfig.json içinde noImplicitOverride seçeneğini açın. O zaman bir temel sınıf üyesini override eden her metot bunu belirtmek zorundadır ve bir alt sınıftaki düz bir speak(), TS4114 hatası olur (This member must have an 'override' modifier because it overrides a member in the base class 'Animal').

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

noImplicitOverride, strict kapsamında değildir; onu kendiniz eklemeniz gerekir. override derlenmiş JavaScript'ten silinir.

Alt Sınıflarda protected Üyeler

Ebeveynin private üyeleri alt sınıfta görünmez. protected üyeler ise görünür ve protected belirleyicisinin var olma nedeni de budur: bir ebeveyn sınıfın çocuklarına sunduğu API'dir.

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

Ne private ne de protected belirleyicisinin çalışma zamanında neden korunmadığı dahil tüm kurallar için erişim belirleyiciler sayfasına bakın.

Bir Alanı Daha Dar Bir Tiple Yeniden Bildirmek

Bir alt sınıf çoğu zaman bir alanın ebeveynin söylediğinden daha belirli bir şey tuttuğunu bilir. Onu pet: Dog olarak yeniden bildirmenin modern sınıf alanlarında çalışma zamanı etkisi vardır: alt sınıf alanı super() döndükten sonra undefined ile başlatılır ve ebeveyn constructor'ının kaydettiği değeri siler. Alt sınıf constructor'ı onu yeniden atamadıkça TypeScript bunu TS2612 olarak bildirir (Property 'pet' will overwrite the base property in 'Home'). Yalnızca tipi değiştirmek için declare kullanın:

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 hiçbir şey üretmez, bu yüzden Home constructor'ının ayarladığı değer korunur. Daha dar tipi doğru kılan şey, yalnızca bir Dog kabul eden constructor'dır.

implements ve extends

İki anahtar kelime farklı sorulara cevap verir ve bir sınıf ikisini birden kullanabilir.

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

Bir sınıf yalnızca bir sınıfı genişletebilir (TS1174: Classes can only extend a single class). Birkaç yerden gelen davranışı birleştirmek için birkaç interface implement edin ve kodu kompozisyonla (bir yardımcı nesne tutan bir alan) ya da mixin'lerle paylaşın.

Mixin'ler

Mixin, bir sınıf alıp onun bir alt sınıfını döndüren bir fonksiyondur. Tip kontrolünden geçen bir tür çoklu kalıtım sağlar:

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 içindeki any[] zorunludur: TypeScript yalnızca constructor'ı any[] tipinde tek bir rest parametre alan bir mixin tabanını kabul eder. Mixin'ler çalışır ama tipleri ve stack trace'leri okumayı zorlaştırır, bu yüzden önce kompozisyonu deneyin.

Sık Yapılan Hatalar

• Temel constructor'dan override edilebilir bir metot çağırmak. Temel constructor, alt sınıfın alanları başlatılmadan önce çalışır; bu yüzden this.items okuyan bir override undefined görür ve this.items.push(x) gibi bir çağrı çalışma zamanında bir TypeError fırlatır. TypeScript bunu yakalamaz.
• super(...) çağrısını unutmak ya da geç yapmak. TS2377 ve TS17009 hataları; alt sınıf this'e dokunmadan önce nesneyi ebeveyn oluşturmalıdır.
• Bir ebeveyn alanını declare olmadan yeniden bildirmek. Alt sınıf alanı onu undefined olarak sıfırlar.
• Derin hiyerarşiler. Her seviye çocuğu ebeveynin iç yapısına bağlar. Genellikle iki seviye yeterlidir; ötesinde kompozisyonu ya da interface'leri tercih edin.