الأصناف (Class) في TypeScript: الحقول والتوابع و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 حين يضبطه إطار عمل أو تابع 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

تبدو الموصِّلات 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 أيضًا، لأن الملف المترجم يعمل في الوضع الصارم (يضع المترجم "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 يقبل أي رقم وقت الترجمة، وأي شيء على الإطلاق من البيانات غير محددة النوع وقت التشغيل.