تعريف واجهة لكائن في TypeScript

لإنشاء واجهة (interface) في TypeScript تتناسب مع كائن (object) مماثل للذي وصفته، يمكنك استخدام الـindex signature. هذا النوع يسمح لك بتعريف كائن يمكن أن يحتوي على مفاتيح (keys) من نوع string وقيم (values) من نوع string أو boolean أو number. إليك كيف يمكن تعريف الواجهة:

typescriptCopy code
interface MyObject {
    [key: string]: string | boolean | number;
}

في هذا السياق، [key: string]: string | boolean | number; هو الجزء المهم. هذا يعني أن لديك خاصية (property) تستخدم index signature [key: string]، وهذا يعني أن الواجهة يمكن أن تحتوي على أي عدد من المفاتيح من نوع string، ويمكن أن تحتوي قيم هذه المفاتيح على string أو boolean أو number.

لنفترض أنك تريد تعريف متغير باستخدام هذه الواجهة، يمكنك القيام بذلك كالتالي:

typescriptCopy code
let obj: MyObject = {
    key1: "apple",
    key2: true,
    key3: 123,
    // يمكنك إضافة المزيد من المفاتيح هنا
};

هذا يمكن أن يكون بديلاً جيدًا للاستخدام المباشر للعامل الأندكس في كائن obj والذي يتطلب تعيين نوع any للقيم.

بالطبع! في TypeScript، يمكنك أيضًا استخدام تعريف نمط الـ Union لتحديد أن القيم يجب أن تكون من بين قائمة معينة. على سبيل المثال، إذا كنت ترغب في تحديد أن قيم المفاتيح يمكن أن تكون إما string أو boolean أو number فقط، يمكنك استخدام النمط Union كالتالي:

typescriptCopy code
interface MyObject {
    [key: string]: string | boolean | number;
}

let obj: MyObject = {
    key1: "apple",
    key2: true,
    key3: 123,
    // يمكنك إضافة المزيد من المفاتيح هنا
};

هذا التعريف يحدد أن الواجهة MyObject تتكون من مفتاح string وقيمة تكون إما string أو boolean أو number.

كما يمكنك استخدام التعبيرات النمطية (regular expressions) لتحديد القيم، مثلاً إذا كنت تريد قيم string تبدأ بـ “key” وتتبعها رقم:

typescriptCopy code
interface MyObject {
    [key: string]: string | boolean | number;
}

let obj: MyObject = {
    key1: "apple",
    key2: true,
    key3: 123,
    // يمكنك إضافة المزيد من المفاتيح هنا
};

باستخدام هذا التعريف، ستتمكن من إنشاء كائن يحتوي على أي عدد من المفاتيح التي تبدأ بـ “key” ويتبعها رقم، وقيمتها string أو boolean أو number.

إذا كنت تحتاج إلى مزيد من التفاصيل أو لديك استفسارات أخرى، فلا تتردد في طرحها!