Class TypeScript: Field, Method, Getter, dan Implements

Class TypeScript adalah class JavaScript dengan tipe: setiap field dideklarasikan beserta tipenya di badan class, dan method serta constructor mendapat parameter dan nilai kembalian yang bertipe.

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");

Output hasil kompilasinya adalah class JavaScript biasa tanpa tipe, jadi semua yang ada di class JavaScript tetap berlaku. Tambahan dari TypeScript terjadi saat kompilasi: panggilan terakhir ditolak sebelum program dijalankan.

Mendeklarasikan Field

Sebuah field perlu dideklarasikan di badan class sebelum constructor bisa mengisinya. Mengisi this.owner tanpa mendeklarasikan owner menghasilkan error TS2339 (property tidak ada). Field dengan nilai awal mendapat tipe hasil inferensi dari nilainya, sama seperti variabel.

Dengan strict menyala, strictPropertyInitialization memeriksa bahwa setiap field yang tidak opsional mendapat nilai. Class ini lupa mengisi dua field:

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

console.log(new Profile());

Compiler melaporkan keduanya:

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.

Pemeriksaan ini ada karena tanpanya new Profile().name.toUpperCase() akan lolos pemeriksaan tipe lalu crash karena undefined. Perbaiki setiap field dengan salah satu dari empat cara: beri nilai awal, isi di constructor, tandai sebagai opsional dengan ?, atau tulis name!: string kalau sebuah framework atau method init() mengisinya belakangan. Cara terakhir mematikan pemeriksaan untuk field itu, jadi pakai seperlunya.

Method dan this

Method diberi tipe seperti fungsi. Di dalam method, this bertipe instance. Method bisa mengembalikan this supaya bisa dirangkai (chaining), dan tipe kembaliannya otomatis mengikuti subclass.

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

Method kehilangan this-nya saat kamu mengambilnya dari objek, bug JavaScript yang klasik. TypeScript tidak menangkapnya secara default, tetapi akan menangkapnya kalau method itu mendeklarasikan parameter this. Parameter itu dihapus dari output dan hanya menjaga tempat pemanggilan:

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')
}

Field arrow function berhasil karena setiap instance mendapat fungsinya sendiri yang menangkap this. Konsekuensinya, ada satu fungsi per instance, bukan satu method bersama di prototype.

Getter dan Setter

Accessor get dan set terlihat seperti property dari luar. Getter tanpa setter bersifat read only: mengisinya adalah error kompilasi (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
}

Compiler menolak penugasan itu, dan kalau pemeriksaannya dilewati, runtime juga melempar TypeError, karena file hasil kompilasi berjalan dalam strict mode (compiler menulis "use strict" di bagian atas). RangeError di setter adalah pemeriksaan runtime yang kamu tulis sendiri. Tipe number hanya menyatakan bahwa nilainya angka; tipe itu tidak tahu apa-apa soal rentang.

Member Static

Field dan method static adalah milik class itu sendiri. Kamu mengaksesnya lewat nama class, bukan lewat instance. Blok static { } dijalankan sekali saat class didefinisikan.

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

Member static tidak bisa memakai type parameter milik class: di class Box<T>, static empty: T menghasilkan error TS2302, karena hanya ada satu field static yang dipakai bersama oleh setiap Box<string>, Box<number>, dan seterusnya.

Mengimplementasikan Interface

implements meminta compiler memeriksa bahwa class itu punya semua yang diwajibkan sebuah interface. Member yang tidak ada menghasilkan error TS2420: 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));

Sebuah class bisa mengimplementasikan beberapa interface: class Doc implements Printable, Serializable. Ada dua hal yang tidak dilakukan implements. Ia tidak memberi tipe pada parameter method class untukmu: check(s) { ... } di dalam class yang mengimplementasikan check(s: string): boolean tetap menghasilkan error TS7006 (Parameter 's' implicitly has an 'any' type), jadi beri anotasi. Dan ia tidak meninggalkan jejak saat runtime, jadi obj instanceof Shape tidak mungkin dilakukan.

private radius di constructor adalah parameter property: field dideklarasikan dan diisi dalam satu langkah. Lihat constructor.

Class Juga Sebuah Tipe

Deklarasi class menciptakan dua hal dengan satu nama: sebuah nilai (fungsi constructor yang kamu panggil dengan new) dan sebuah tipe (bentuk instance-nya). Karena TypeScript membandingkan tipe berdasarkan strukturnya, objek apa pun dengan member public yang sama cocok dengan tipe itu, bahkan yang tidak dibuat oleh class tersebut.

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 }

Objek biasa itu lolos pemeriksaan tipe, tetapi bukan Point saat runtime: ({ x: 6, y: 8 }) instanceof Point bernilai false. Class dengan member private atau #private mencegah hal ini: hanya instance dari class itu (atau subclass-nya) yang bisa diberikan kepadanya.

Kesalahan Umum

• Mendeklarasikan field tetapi tidak pernah mengisinya. TS2564 memberitahumu bahwa field itu akan bernilai undefined. Beri nilai awal, jangan dibungkam dengan !.
• Mengirim method sebagai callback. button.onclick = obj.handle kehilangan this. Pakai field arrow function atau obj.handle.bind(obj).
• Mengira implements menambahkan kode atau tipe. Ia hanya memeriksa. Tipe parameter tetap perlu anotasi.
• Memakai instanceof dengan interface. Interface tidak ada saat runtime; periksa class atau pakai type guard.
• Mengira tipe memvalidasi data. Field number menerima angka apa pun saat kompilasi, dan apa saja dari data tanpa tipe saat runtime.