TypeScript Class: Alanlar, Metotlar, Getter'lar ve Implements

Bir TypeScript sınıfı, tipleri olan bir JavaScript sınıfıdır: her alan sınıf gövdesinde tipiyle bildirilir, metotlar ve constructor da tipli parametreler ve dönüş değerleri alır.

class Account {
    owner: string;
    balance = 0; // type inferred as number

    constructor(owner: string) {
        this.owner = owner;
    }

    deposit(amount: number): number {
        this.balance += amount;
        return this.balance;
    }
}

const acc = new Account("Ada");
acc.deposit(50);
console.log(acc.deposit(25)); // 75
console.log(acc); // Account { owner: 'Ada', balance: 75 }

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
acc.deposit("10");

Derlenmiş çıktı, tipleri kaldırılmış sıradan bir JavaScript sınıfıdır; bu yüzden JavaScript sınıfları sayfasındaki her şey hâlâ geçerlidir. TypeScript'in eklediği şeyler derleme zamanında olur: son çağrı program çalışmadan reddedilir.

Alan Bildirmek

Constructor'ın bir alana atama yapabilmesi için o alanın sınıf gövdesinde bildirilmesi gerekir. owner bildirilmeden this.owner ataması yapmak TS2339 hatasıdır (özellik yok). Başlangıç değeri olan bir alanın tipi, bir değişkende olduğu gibi değerden çıkarılır.

strict açıkken strictPropertyInitialization, opsiyonel olmayan her alanın bir değer aldığını kontrol eder. Bu sınıf ikisini unutuyor:

// This does not compile: two fields are never assigned.
class Profile {
    name: string;
    age: number;
    city = "Paris";
}

console.log(new Profile());

Derleyici ikisini de bildirir:

index.ts(3,5): error TS2564: Property 'name' has no initializer and is not definitely assigned in the constructor.
index.ts(4,5): error TS2564: Property 'age' has no initializer and is not definitely assigned in the constructor.

Kontrol vardır, çünkü o olmasaydı new Profile().name.toUpperCase() tip kontrolünden geçer ve sonra undefined ile çökerdi. Her alanı dört yoldan biriyle düzeltin: bir başlangıç değeri verin, constructor içinde atayın, ? ile opsiyonel yapın ya da bir framework veya bir init() metodu onu sonradan ayarlıyorsa name!: string yazın. Sonuncusu o alan için kontrolü kapatır, bu yüzden idareli kullanın.

Metotlar ve this

Metotlar fonksiyonlar gibi tiplenir. Bir metodun içinde this, örneğin tipine sahiptir. Bir metot zincirlemeye izin vermek için this döndürebilir ve dönüş tipi alt sınıfları otomatik olarak izler.

class QueryBuilder {
    private parts: string[] = [];

    where(condition: string): this {
        this.parts.push(condition);
        return this;
    }

    build(): string {
        return this.parts.join(" AND ");
    }
}

const sql = new QueryBuilder().where("age > 18").where("active = 1").build();
console.log(sql); // age > 18 AND active = 1

Bir metodu nesneden ayırdığınızda this değerini kaybeder; klasik bir JavaScript hatasıdır. TypeScript bunu varsayılan olarak yakalamaz, ama metot bir this parametresi bildiriyorsa yakalar. Bu parametre çıktıdan silinir ve yalnızca çağrı yerini korur:

class Timer {
    seconds = 3;

    describe(this: Timer): string {
        return `${this.seconds}s`;
    }

    // An arrow function field keeps `this` bound to the instance.
    describeBound = (): string => `${this.seconds}s`;
}

const t = new Timer();
const bound = t.describeBound;
console.log(bound()); // 3s

const loose = t.describe;
try {
    // @ts-expect-error: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Timer'.
    loose();
} catch (e) {
    // Without the check, this is what happens at runtime:
    if (e instanceof Error) console.log(e.message); // Cannot read properties of undefined (reading 'seconds')
}

Arrow alanı çalışır, çünkü her örnek this değerini kapsayan kendi fonksiyonunu alır. Bedeli, prototipte paylaşılan tek bir metot yerine örnek başına bir fonksiyondur.

Getter'lar ve Setter'lar

get ve set erişimcileri dışarıdan özellik gibi görünür. Setter'ı olmayan bir getter salt okunurdur: ona atama yapmak bir derleme hatasıdır (TS2540).

class Temperature {
    private celsius = 0;

    get fahrenheit(): number {
        return this.celsius * 9 / 5 + 32;
    }

    set fahrenheit(value: number) {
        if (value < -459.67) throw new RangeError("below absolute zero");
        this.celsius = (value - 32) * 5 / 9;
    }

    get kelvin(): number {
        return this.celsius + 273.15;
    }
}

const temp = new Temperature();
temp.fahrenheit = 212;
console.log(temp.fahrenheit, temp.kelvin); // 212 373.15

try {
    // @ts-expect-error: Cannot assign to 'kelvin' because it is a read-only property.
    temp.kelvin = 0;
} catch (e) {
    if (e instanceof Error) console.log(e.message); // Cannot set property kelvin of #<Temperature> which has only a getter
}

Derleyici atamayı reddeder ve kontrol atlatılsa bile çalışma zamanı da bir TypeError fırlatır, çünkü derlenmiş dosya strict modda çalışır (derleyici en üste "use strict" yazar). Setter'daki RangeError sizin kendiniz yazdığınız bir çalışma zamanı kontrolüdür. number tipi yalnızca değerin bir sayı olduğunu söyler; aralıklar hakkında hiçbir şey bilmez.

Statik Üyeler

static alanlar ve metotlar sınıfın kendisine aittir. Onlara bir örnek üzerinden değil, sınıf adı üzerinden erişirsiniz. Bir static { } bloğu sınıf tanımlandığında bir kez çalışır.

class IdGenerator {
    static prefix = "user";
    private static next = 1;

    static create(): string {
        return `${IdGenerator.prefix}-${IdGenerator.next++}`;
    }

    static {
        IdGenerator.prefix = "u";
    }
}

console.log(IdGenerator.create()); // u-1
console.log(IdGenerator.create()); // u-2

Statik üyeler sınıfın tip parametrelerini kullanamaz: class Box<T> içinde bir static empty: T TS2302 hatasıdır, çünkü her Box<string>, Box<number> ve diğerleri tarafından paylaşılan tek bir statik alan vardır.

Bir Interface Implement Etmek

implements, derleyiciden sınıfın bir interface'in gerektirdiği her şeye sahip olduğunu kontrol etmesini ister. Eksik bir üye TS2420 hatasıdır: Class 'X' incorrectly implements interface 'Y'.

interface Shape {
    name: string;
    area(): number;
}

class Circle implements Shape {
    name = "circle";
    constructor(private radius: number) {}

    area(): number {
        return Math.PI * this.radius ** 2;
    }
}

class Square implements Shape {
    name = "square";
    constructor(private side: number) {}

    area(): number {
        return this.side ** 2;
    }
}

const shapes: Shape[] = [new Circle(1), new Square(3)];
for (const s of shapes) console.log(s.name, s.area().toFixed(2));

Bir sınıf birkaç interface implement edebilir: class Doc implements Printable, Serializable. implements iki şeyi yapmaz. Sınıfın metot parametrelerini sizin için tiplemez: check(s: string): boolean implement eden bir sınıfın içindeki check(s) { ... } yine TS7006 hatasıdır (Parameter 's' implicitly has an 'any' type), bu yüzden onlara notasyon yazın. Ve çalışma zamanında hiçbir iz bırakmaz, bu yüzden obj instanceof Shape mümkün değildir.

Constructor'daki private radius bir parametre özelliğidir (parameter property): alanı tek adımda bildirir ve atar. Bkz. constructor'lar.

Bir Sınıf Aynı Zamanda Bir Tiptir

Bir sınıf bildirimi tek bir adla iki şey oluşturur: bir değer (new ile çağırdığınız constructor fonksiyonu) ve bir tip (bir örneğin biçimi). TypeScript tipleri yapıya göre karşılaştırdığı için, aynı public üyelere sahip her nesne, sınıf tarafından oluşturulmamış olsa bile tipe uyar.

class Point {
    constructor(public x: number, public y: number) {}
}

function distance(p: Point): number {
    return Math.hypot(p.x, p.y);
}

console.log(distance(new Point(3, 4))); // 5
console.log(distance({ x: 6, y: 8 }));  // 10: a plain object with the same shape

// typeof Point is the type of the constructor itself
function make(ctor: typeof Point): Point {
    return new ctor(1, 1);
}
console.log(make(Point)); // Point { x: 1, y: 1 }

Düz nesne tip kontrolünden geçer ama çalışma zamanında bir Point değildir: ({ x: 6, y: 8 }) instanceof Point sonucu false olur. private veya #private bir üyeye sahip bir sınıf bunu engeller: ona yalnızca o sınıfın (ya da alt sınıflarının) örnekleri atanabilir.

Sık Yapılan Hatalar

• Bir alanı bildirip hiç atamamak. TS2564 size alanın undefined olacağını söylüyor. Onu ! ile susturmak yerine başlatın.
• Bir metodu callback olarak vermek. button.onclick = obj.handle, this değerini kaybeder. Bir arrow function alanı ya da obj.handle.bind(obj) kullanın.
• implements ifadesinin kod ya da tip eklemesini beklemek. Yalnızca kontrol eder. Parametre tipleri yine notasyon ister.
• instanceof ifadesini bir interface ile kullanmak. Interface'ler çalışma zamanında yoktur; bir sınıfı kontrol edin ya da bir type guard kullanın.
• Tiplerin veriyi doğruladığını varsaymak. Bir number alanı derleme zamanında her sayıyı, çalışma zamanında da tipsiz veriden gelen her şeyi kabul eder.