استخدام الأسماء المحسوبة في TypeScript

في TypeScript، يمكنك بناء واجهات تتيح لك تعريف الخصائص بشكل ديناميكي باستخدام تقنية تُسمى “Computed Property Names” أو “أسماء الخصائص المحسوبة”. وهذه التقنية تتيح لك استخدام قيم متغيرة كأسماء خصائص في الواجهة.

عندما تحاول تعريف واجهة في TypeScript مع خصائص محسوبة، يجب عليك استخدام توزيع النوع “Index Signature” بدلاً من تعريف الخاصية مباشرة. هذا يعني أنك تستخدم نوع مفتاح الخصائص مع قيمة الخصائص المتوقعة.

لنقم بتوضيح كيفية القيام بذلك في الكود:

typescriptCopy code
const name = 'some/property';

interface MyInterface {
  [key: string]: string; // توزيع النوع: جميع المفاتيح هي سلاسل وقيمها سلاسل
}

const myObject: MyInterface = {
  [name]: 'Bob'
};

console.log(myObject[name]); // ستطبع 'Bob'

في هذا المثال، قمنا بتعريف واجهة MyInterface باستخدام توزيع النوع للسماح بتعريف الخصائص باستخدام أسماء محسوبة. ثم، قمنا بإنشاء كائن myObject باستخدام الأسماء المحسوبة وتعيين قيمة ‘Bob’ للخاصية المحسوبة.

يمكنك استخدام هذه الطريقة لتحقيق الديناميكية في تعريف خصائص الواجهات في TypeScript، مما يسمح لك بتكييف الواجهات بشكل أفضل مع تغيرات البيانات أو المتغيرات في تطبيقك.

بالطبع، دعنا نواصل التعمق في هذا الموضوع.

تقدم TypeScript ميزات قوية لإنشاء تصورات قوية لبنيات البيانات وتوسيع قدرات اللغة الجافا سكريبت الأصلية. واحدة من هذه الميزات هي القدرة على استخدام الأسماء المحسوبة في تعريف الخصائص في الواجهات. هذا النهج يتيح للمطورين بناء تصورات ديناميكية وقوية للبيانات دون الحاجة إلى تكرار الكود أو تعريف الكثير من الخصائص بشكل يدوي.

في الكود السابق، استخدمنا [key: string]: string; لتعريف توزيع النوع، مما يسمح بتحديد أي مفتاح من النوع string وقيمته من النوع string أيضًا. وهذا يعني أنه بإمكاننا استخدام أي سلسلة كمفتاح وأي سلسلة كقيمة.

ومن المهم أن نفهم أن استخدام الأسماء المحسوبة ليس مقتصرًا على تعريف الخصائص في الواجهات فحسب، بل يمكن أيضًا استخدامه في تعريف الأسماء في الكائنات وحتى في الأسماء الفارغة. هذا يجعل TypeScript أكثر قوة ومرونة في التعامل مع البيانات المتغيرة والديناميكية.

على سبيل المثال، يمكننا استخدام الأسماء المحسوبة في تعريف الأسماء الفارغة كالتالي:

typescriptCopy code
const prefixes = ['first', 'second', 'third'];

let object = {};

prefixes.forEach((prefix, index) => {
  object[`${prefix}Name`] = `Name ${index}`;
});

console.log(object); 
// سيطبع: { firstName: 'Name 0', secondName: 'Name 1', thirdName: 'Name 2' }

في هذا المثال، قمنا باستخدام الأسماء المحسوبة لتوليد أسماء مفتاح الخاصية بناءً على القيم الموجودة في مصفوفة prefixes. هذا يسمح لنا بإنشاء كائن مع خصائص متغيرة تلقائيًا استنادًا إلى المصفوفة المعطاة.

بهذه الطريقة، يتيح TypeScript للمطورين إمكانية بناء تطبيقات أكثر مرونة وديناميكية، وذلك عبر استخدام الأسماء المحسوبة في تعريف الخصائص في الواجهات والأسماء الفارغة والكائنات بشكل عام.