Class ב-TypeScript: שדות, מתודות, getters ו-implements

מחלקה ב-TypeScript היא מחלקת JavaScript עם טיפוסים: כל שדה מוצהר עם הטיפוס שלו בגוף המחלקה, ולמתודות ולבנאי יש פרמטרים וערכי החזרה עם טיפוסים.

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

הפלט המקומפל הוא מחלקת JavaScript רגילה בלי הטיפוסים, כך שכל מה שנכון למחלקות ב-JavaScript עדיין חל. מה ש-TypeScript מוסיפה קורה בזמן קומפילציה: הקריאה האחרונה נדחית לפני שהתוכנית רצה.

הצהרה על שדות

שדה צריך הצהרה בגוף המחלקה לפני שהבנאי יכול להשים לו ערך. השמה ל-this.owner בלי להצהיר על owner היא השגיאה TS2339 (המאפיין לא קיים). שדה עם ערך התחלתי מקבל טיפוס שמוסק מהערך, בדיוק כמו משתנה.

כש-strict פעיל, strictPropertyInitialization בודק שכל שדה שאינו אופציונלי מקבל ערך. המחלקה הזו שוכחת שניים:

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

console.log(new Profile());

הקומפיילר מדווח על שניהם:

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.

הבדיקה קיימת כי בלעדיה new Profile().name.toUpperCase() היה עובר בדיקת טיפוסים ואז קורס עם undefined. תקנו כל שדה באחת מארבע דרכים: תנו לו ערך התחלתי, השימו לו ערך בבנאי, סמנו אותו כאופציונלי עם ?, או כתבו name!: string כש-framework או מתודת init() מציבים את הערך מאוחר יותר. הדרך האחרונה מכבה את הבדיקה לשדה הזה, אז השתמשו בה במשורה.

מתודות ו-this

מתודות מקבלות טיפוסים כמו פונקציות. בתוך מתודה, ל-this יש את הטיפוס של המופע. מתודה יכולה להחזיר this כדי לאפשר שרשור, וטיפוס ההחזרה מתעדכן אוטומטית בתתי-מחלקות.

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

מתודה מאבדת את ה-this שלה כששולפים אותה מהאובייקט, באג קלאסי של JavaScript. TypeScript לא תופסת את זה כברירת מחדל, אבל כן תופסת אם המתודה מצהירה על פרמטר this. הפרמטר הזה נמחק מהפלט ורק שומר על מקום הקריאה:

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

שדה עם פונקציית חץ עובד כי כל מופע מקבל פונקציה משלו שסוגרת על this. המחיר הוא פונקציה אחת לכל מופע במקום מתודה משותפת אחת על ה-prototype.

Getters ו-Setters

accessors של get ו-set נראים מבחוץ כמו מאפיינים. getter בלי setter הוא לקריאה בלבד: השמה אליו היא שגיאת קומפילציה (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
}

הקומפיילר דוחה את ההשמה, ואם עוקפים את הבדיקה, גם זמן הריצה זורק TypeError, כי הקובץ המקומפל רץ ב-strict mode (הקומפיילר כותב "use strict" בראש הקובץ). ה-RangeError ב-setter הוא בדיקת זמן ריצה שכתבתם בעצמכם. הטיפוס number רק אומר שהערך הוא מספר; הוא לא יודע כלום על טווחים.

איברים סטטיים

שדות ומתודות static שייכים למחלקה עצמה. ניגשים אליהם דרך שם המחלקה, לא דרך מופע. בלוק static { } רץ פעם אחת כשהמחלקה מוגדרת.

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

איברים סטטיים לא יכולים להשתמש בפרמטרי הטיפוס של המחלקה: ב-class Box<T>, static empty: T הוא השגיאה TS2302, כי יש רק שדה סטטי אחד, שמשותף לכל Box<string>, Box<number> וכן הלאה.

מימוש interface

implements מבקש מהקומפיילר לבדוק שלמחלקה יש כל מה ש-interface דורש. איבר חסר הוא השגיאה 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));

מחלקה יכולה לממש כמה interfaces: class Doc implements Printable, Serializable. יש שני דברים ש-implements לא עושה. הוא לא נותן טיפוסים לפרמטרים של המתודות במחלקה בשבילכם: check(s) { ... } בתוך מחלקה שמממשת check(s: string): boolean הוא עדיין השגיאה TS7006 (Parameter 's' implicitly has an 'any' type), אז תנו להם הערות טיפוס. והוא לא משאיר שום זכר בזמן ריצה, ולכן obj instanceof Shape לא אפשרי.

ה-private radius בבנאי הוא parameter property: הוא מצהיר על השדה ומשים לו ערך בצעד אחד. ראו בנאים.

מחלקה היא גם טיפוס

הצהרה על מחלקה יוצרת שני דברים עם שם אחד: ערך (פונקציית הבנאי שקוראים לה עם new) וטיפוס (המבנה של מופע). מכיוון ש-TypeScript משווה טיפוסים לפי מבנה, כל אובייקט עם אותם איברים ציבוריים מתאים לטיפוס, גם אם הוא לא נוצר על ידי המחלקה.

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 }

האובייקט הרגיל עובר את בדיקת הטיפוסים אבל הוא לא Point בזמן ריצה: ({ x: 6, y: 8 }) instanceof Point הוא false. מחלקה עם איבר private או #private מונעת את זה: רק מופעים של המחלקה הזו (או של תתי-המחלקות שלה) ניתנים להשמה אליה.

טעויות נפוצות

• הצהרה על שדה בלי לתת לו ערך אף פעם. TS2564 אומרת לכם שהשדה יהיה undefined. אתחלו אותו במקום להשתיק את השגיאה עם !.
• העברת מתודה כ-callback. button.onclick = obj.handle מאבד את this. השתמשו בשדה עם פונקציית חץ או ב-obj.handle.bind(obj).
• ציפייה ש-implements יוסיף קוד או טיפוסים. הוא רק בודק. טיפוסי הפרמטרים עדיין צריכים הערות טיפוס.
• שימוש ב-instanceof עם interface. interfaces לא קיימים בזמן ריצה; בדקו מול מחלקה או השתמשו ב-type guard.
• הנחה שטיפוסים מבצעים ולידציה למידע. שדה number מקבל כל מספר בזמן קומפילציה, וכל דבר בכלל ממידע בלי טיפוסים בזמן ריצה.