TypeScript

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

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

لتحويل تعريفك من مصفوفة إلى خريطة، يمكنك القيام بالخطوات التالية:

أولاً، استبدل تعريف الخاصية applicationsByState من مصفوفة إلى خريطة. يمكنك فعل ذلك باستخدام النوع Map المدمج في TypeScript.

typescriptCopy code
private applicationsByState: Map<string, any> = new Map<string, any>();

ثم، عندما تحتاج إلى إضافة عناصر جديدة إلى الخريطة، استخدم الطريقة set(key, value).

typescriptCopy code
this.applicationsByState.set(state, yourValue);

وعندما تحتاج إلى الوصول إلى قيمة معينة، استخدم الطريقة get(key).

typescriptCopy code
const value = this.applicationsByState.get(state);

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

بالطبع، سأكمل المقال لمساعدتك في فهم المفاهيم بشكل أكبر وتحقيق الهدف المطلوب.

بمجرد تحويلك لاستخدام الخرائط بدلاً من المصفوفات، ستستفيد من فوائد عدة، بما في ذلك:

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

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

3. التأكد من صحة البيانات: باستخدام الخرائط، يمكنك تحديد نوع المفتاح والقيمة التي تخزنها، مما يعني أنك تستطيع ضمان أن البيانات التي تستخدمها في التطبيق متوافقة مع الأنواع المحددة وتلبي متطلبات التطبيق.

4. الكشف عن الأخطاء في وقت التصميم: TypeScript يمكنه الآن تحديد الأخطاء المحتملة في وقت التصميم بناءً على الأنواع المحددة في الخريطة. هذا يساعدك على اكتشاف الأخطاء وتصحيحها قبل تنفيذ التطبيق، مما يوفر لك الوقت والجهد في عملية التطوير.

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

بما أنك ترغب في تكوين ملف tsconfig.json لمشروع يحتوي على هيكل معين يتضمن مجلدات src و tests، فإنه من المهم فهم كيف يمكنك تحقيق ذلك باستخدام إعدادات المترجم TypeScript.

لديك بالفعل فكرة جيدة عن كيفية استخدام tsconfig.json لتحديد إعدادات المترجم، ولكن هناك بعض التغييرات التي يجب إجراؤها لتلبية متطلباتك.

أولاً وقبل كل شيء، يجب عليك تقديم تفصيل أكبر للمترجم TypeScript بحيث يتم تضمين ملفات الاختبارات في المشروع ولكن لا تتم معالجتها أو إدراجها في الإخراج المُنتج في مجلد dist.

لتحقيق ذلك، يمكنك استخدام الخاصية exclude في tsconfig.json لتحديد الملفات التي لا تريد تضمينها في الإخراج. هذا يتيح لك استبعاد مجلد الاختبارات من عملية الإخراج.

وبالتالي، يمكن تعديل tsconfig.json الخاص بك كالتالي:

jsonCopy code
{
    "compilerOptions": {
        "outDir": "dist"
    },
    "include": [
        "src/**/*.ts",
        "tests/**/*.ts"
    ],
    "exclude": [
        "tests/**/*.ts"
    ]
}

مع هذا التعديل، سيتم تضمين ملفات الاختبارات في المشروع لدعم عمليات مثل إعادة التسمية والبحث وما إلى ذلك، ولكنها لن تُضمَّن في مجلد الإخراج dist.

وبالتالي، يتم تجاهل مجلد الاختبارات تمامًا أثناء عملية البناء، مما يضمن أن الملفات الناتجة ستكون فقط من مجلد src.

هذا التعديل يلبي الاحتياجات التي طرحتها ويتيح لك إدارة الاختبارات بسهولة دون التأثير على هيكل مجلدات مشروعك.

بما أنك ترغب في تكوين ملف tsconfig.json لمشروع يحتوي على هيكل معين يتضمن مجلدات src و tests، فإنه من المهم فهم كيف يمكنك تحقيق ذلك باستخدام إعدادات المترجم TypeScript.

لديك بالفعل فكرة جيدة عن كيفية استخدام tsconfig.json لتحديد إعدادات المترجم، ولكن هناك بعض التغييرات التي يجب إجراؤها لتلبية متطلباتك.

أولاً وقبل كل شيء، يجب عليك تقديم تفصيل أكبر للمترجم TypeScript بحيث يتم تضمين ملفات الاختبارات في المشروع ولكن لا تتم معالجتها أو إدراجها في الإخراج المُنتج في مجلد dist.

لتحقيق ذلك، يمكنك استخدام الخاصية exclude في tsconfig.json لتحديد الملفات التي لا تريد تضمينها في الإخراج. هذا يتيح لك استبعاد مجلد الاختبارات من عملية الإخراج.

وبالتالي، يمكن تعديل tsconfig.json الخاص بك كالتالي:

jsonCopy code
{
    "compilerOptions": {
        "outDir": "dist"
    },
    "include": [
        "src/**/*.ts",
        "tests/**/*.ts"
    ],
    "exclude": [
        "tests/**/*.ts"
    ]
}

مع هذا التعديل، سيتم تضمين ملفات الاختبارات في المشروع لدعم عمليات مثل إعادة التسمية والبحث وما إلى ذلك، ولكنها لن تُضمَّن في مجلد الإخراج dist.

وبالتالي، يتم تجاهل مجلد الاختبارات تمامًا أثناء عملية البناء، مما يضمن أن الملفات الناتجة ستكون فقط من مجلد src.

هذا التعديل يلبي الاحتياجات التي طرحتها ويتيح لك إدارة الاختبارات بسهولة دون التأثير على هيكل مجلدات مشروعك.

بمجرد إطلاق TypeScript لأنواع الاتحاد (union types)، بدأ الكثيرون يتساءلون عما إذا كان هناك سبب لتعريف أنواع enum. اعتبر الإعلان التالي لنوع enum:

typescriptCopy code
enum X { A, B, C }
var x:X = X.A;

والإعلان الشبيه لنوع الاتحاد:

typescriptCopy code
type X = "A" | "B" | "C"
var x:X = "A";

إذا كانت تؤدي في الأساس نفس الغرض، وأن أنواع الاتحاد أكثر قوة وتعبيرية، فلماذا هي ضرورية الأنواع enum؟ هذا سؤال محتمل، ولكن هناك عدة نقاط يجب مراعاتها عند اتخاذ قرار حول ما إذا كان يجب استخدام enum أو union types.

أولاً وقبل كل شيء، يجب ملاحظة أن ال enum يوفر ميزات إضافية تفتقر إليها أنواع الاتحاد. على سبيل المثال، enum يتيح لك تعيين قيم رقمية تلقائيًا لأعضائه، حيث يكون لكل عضو قيمة رقمية تبدأ من صفر وتزيد تلقائيًا بمقدار واحد لكل عضو. هذا يعني أنه إذا كان لديك enum بأعضاء A و B و C، فسيكون لهم القيم الرقمية التالية بالترتيب: 0 و 1 و 2. وهذا يمكن أن يكون مفيدًا في بعض الحالات عند التعامل مع القيم الرقمية.

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

ثالثًا، enum يتيح لك توسيعه باستخدام الاستراحات (enums with string values)، وهو شيء لا يمكن القيام به بسهولة باستخدام أنواع الاتحاد. يعني هذا أنه يمكنك تعريف enum يستخدم قيمًا من النصوص بدلاً من القيم الرقمية، مما يوفر لك المزيد من المرونة في تمثيل البيانات.

وأخيرًا، على الرغم من أن أنواع الاتحاد تعتبر أكثر قوة ومرونة، إلا أن enum تظل ذات قيمة في بعض السياقات مثل تمثيل البيانات الثابتة والمحددة مثل أيام الأسبوع أو أشهر السنة.

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

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

علاوة على ذلك، يمكن استخدام أنواع الاتحاد بشكل فعال في الحالات التي تتطلب التعامل مع مجموعة متنوعة من القيم، مثل استجابة الخادم، حيث يمكن تمثيل مختلف أنواع الاستجابات باستخدام أنواع الاتحاد.

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

ومع ذلك، يجب على المطورين أيضًا أن يأخذوا في الاعتبار أن استخدام أنواع الاتحاد بشكل مفرط قد يؤدي إلى فقدان بعض الميزات التي يوفرها enum، مثل التحكم في القيم الرقمية أو إمكانية التوسيع باستخدام الاستراحات.

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

السبب الرئيسي وراء التصرف المختلف في تحديد أنواع الدوال هو في كيفية تفسير المترجم لمحتوى الدوال وتنفيذها.

عندما تعرف الدالة باستخدام السنتكس الأول (أي باستخدام السهم) مثل الدالة f في الكود الخاص بك، فإنك بشكل صريح تقول للمترجم أن هذه الدالة ستقوم برمي استثناء من نوع Error ولن تعود بقيمة. وعلى هذا، TypeScript يفهم أن الدالة لن تنتهي بشكل طبيعي، ولن تعود بقيمة محددة، لذلك يتم تحديدها بنوع never.

بالنسبة للدوال g و h، يكون التصرف مختلفًا. في حالة الدالة g، تعرف بطريقة تقليدية باستخدام الكلمة المفتاحية function، وبما أنها لا تعود بقيمة محددة، فإن TypeScript يفترض أنها قد تنتهي بشكل طبيعي ولا ترمي استثناء. لذا، يتم تعيين نوع العودة إلى never تشبه الدالة f.

أما بالنسبة للدالة h، يتم تعريفها بشكل قياسي دون استخدام الكلمات المفتاحية الخاصة بتحديد نوع العودة. وفي TypeScript، إذا لم يتم تحديد نوع العودة بوضوح، فإنه يفترض أن الدالة ستعود بقيمة من النوع void، وهو النوع الذي يشير إلى عدم وجود قيمة معينة تُعيد. لذلك، يتم تعيين نوع العودة للدالة h إلى void.

باختصار، TypeScript يفهم أن الدوال f و g لن تنتهي بشكل طبيعي، لذا يتم تحديدها بنوع never، بينما يفترض أن الدالة h ستنتهي بشكل طبيعي بدون إرجاع قيمة، لذا يتم تعيينها بنوع void.

بعد التفصيل في التفسير السابق، يمكننا أن نلاحظ أن الفارق الرئيسي في تحديد أنواع الدوال يعود إلى كيفية تعريفها. في TypeScript، هناك عدة طرق لتعريف الدوال، وكل طريقة لها تأثير مختلف على كيفية فهم المترجم لتنفيذ الدالة ونوع العودة الذي يُفتَرَض أن تقوم به.

عند استخدام السنتكس الحديث باستخدام السهم => كما في الحالة مع الدالة f، يعرف TypeScript بشكل صريح أن الدالة لن تنتهي بشكل طبيعي ولن تعود بقيمة، مما يؤدي إلى تحديد نوع never. هذا يعكس فهمنا الواضح للمطلوب من الدالة والمنطق المتوقع لتنفيذها.

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

أما بالنسبة للدالة h، التي تم تعريفها بدون استخدام أي كلمة مفتاحية لتحديد نوع العودة، فإن TypeScript يفترض أن الدالة ستنتهي بشكل طبيعي دون إرجاع قيمة محددة، وبالتالي يُفتَرَض أن نوع العودة هو void. هذا يعكس الاستنتاج الافتراضي للمترجم في حالة عدم توضيح النوع المُرجَع من الدالة.

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

عندما يتعلق الأمر بتنفيذ التحقق من صحة النموذج في Angular 2 عند النقر على زر الإرسال دون تعطيله، هناك عدة طرق يمكن استخدامها لتحقيق هذا الهدف. يتوجب عليك استخدام بعض المنهجيات في TypeScript و Angular لتفعيل هذا السلوك.

أولاً، يمكنك استخدام الأحداث المتاحة في Angular للتعامل مع النقرة على زر الإرسال وتنفيذ التحقق من صحة النموذج بشكل يدوي. يمكنك القيام بذلك عن طريق استخدام الأحداث الأساسية في HTML مثل (click) مع استدعاء وظيفة في TypeScript للتحقق من صحة النموذج.

ثانياً، يمكنك استخدام خاصية مراقبة حالة النموذج في Angular وهي المتوفرة باستخدام FormControl أو FormGroup. عند تغيير حالة النموذج، يمكنك تفعيل التحقق من صحة النموذج بشكل يدوي عن طريق استدعاء الدالة validate() المتوفرة في FormControl أو FormGroup.

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

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

أولاً، دعنا نلقي نظرة على كيفية استخدام الأحداث في HTML لتنفيذ التحقق من صحة النموذج عند النقر على زر الإرسال:

htmlCopy code
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
  
  <button type="submit">إرسالbutton>
form>

وفي المكون الخاص بك في TypeScript، يمكنك تنفيذ الوظيفة onSubmit() كالتالي:

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  onSubmit() {
    // قم بتنفيذ التحقق من صحة النموذج هنا
    if (this.myForm.valid) {
      // تنفيذ الإجراءات عندما يكون النموذج صالحًا
    } else {
      // إظهار رسالة الخطأ أو الإجراء البديل
    }
  }
}

ثانيًا، يمكنك استخدام خاصية مراقبة حالة النموذج في Angular كالتالي:

typescriptCopy code
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      // تحديد حقول النموذج وتطبيق المراقبة عليها
    });
  }

  onSubmit() {
    // قم بتنفيذ التحقق من صحة النموذج هنا
    this.myForm.markAllAsTouched();

    if (this.myForm.valid) {
      // تنفيذ الإجراءات عندما يكون النموذج صالحًا
    } else {
      // إظهار رسالة الخطأ أو الإجراء البديل
    }
  }
}

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

في بيئة React Native، تقديم القيم الافتراضية للـ props الاختيارية في TypeScript يتطلب نهجًا مختلفًا قليلاً مقارنة بالطريقة التقليدية في JavaScript النقي. يتم ذلك باستخدام union type للدمج بين نوع الـ props الفعلي ونوع الـ props الافتراضي، ثم استخدام الفحص الشرطي للتأكد من وجود القيم الافتراضية إذا لم يتم تمرير أي قيمة.

لتحقيق ذلك في مكون React الوظيفي الخالي من الحالة، يمكننا استخدام union type لدمج بين الـ props الفعلي والافتراضي كمعلمة للدالة، ثم استخدام الفحص الشرطي لتحديد ما إذا كانت القيم قد تم تمريرها أم لا. فيما يلي كيف يمكن تحقيق ذلك في TypeScript:

typescriptCopy code
import React from 'react';
import { Text } from 'react-native';

interface TestProps {
    title?: string,
    name?: string
}

const Test: React.FC<TestProps> = (props) => {
    const { title, name } = props;
    
    // فحص إذا كانت القيم تم تمريرها أو لا، وإذا لم يتم ذلك، استخدام القيم الافتراضية
    const finalTitle = title || 'Mr';
    const finalName = name || 'McGee';

    return (
        <Text>
            {finalTitle} {finalName}
        Text>
    );
};

export default Test;

في هذا الكود، تم استخدام React.FC لتعريف مكون React الوظيفي، والذي يأخذ generic type parameter يمثل الـ props المتوقعة. ثم يتم استخدام الفحص الشرطي للتحقق من وجود القيم، وإلا فسيتم استخدام القيم الافتراضية. هذا النهج يسمح بتوفير قيم افتراضية اختيارية للـ props في مكون React الوظيفي ب TypeScript دون الحاجة إلى استخدام defaultProps.

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

مفهوم الـ Default Props في React

في React، تُستخدم خاصية defaultProps لتعيين القيم الافتراضية للـ props في المكونات. هذا يعني أنه إذا لم يتم تمرير قيمة محددة للـ prop عند استخدام المكون، سيتم استخدام القيمة الافتراضية بدلاً من ذلك.

تحدي TypeScript

عند استخدام TypeScript، يمكن أن تكون تعيينات defaultProps غير متوافقة مع النوع الأصلي للـ props، مما يؤدي إلى أخطاء في الوقت الأول أو الوقت التشغيلي. لذا، نحتاج إلى نهج مختلف لتحقيق هذه الوظيفة بشكل آمن في TypeScript.

استخدام Union Types والفحص الشرطي

لتحقيق هذا الهدف في TypeScript، نستخدم union type لدمج بين نوع الـ props الفعلي ونوع الـ props الافتراضي، ومن ثم نقوم بالفحص الشرطي للتحقق من وجود القيم. إذا كانت القيم مفقودة، فإننا نستخدم القيم الافتراضية.

الاستفادة من النهج في TypeScript

هذا النهج يسمح لنا بتحديد قيم افتراضية للـ props في مكون React الوظيفي ب TypeScript دون الحاجة إلى استخدام defaultProps، مما يجعل التعامل مع الـ props أكثر وضوحًا وأمانًا في التطبيقات الخاصة بنا.

ختامًا

بهذه الطريقة، يمكننا تحديد قيم افتراضية للـ props في مكونات React الوظيفية بشكل آمن وفعال في TypeScript، مما يسهل علينا تطوير تطبيقات React Native بشكل موثوق به وسلس.

في 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 للمطورين إمكانية بناء تطبيقات أكثر مرونة وديناميكية، وذلك عبر استخدام الأسماء المحسوبة في تعريف الخصائص في الواجهات والأسماء الفارغة والكائنات بشكل عام.

عند استخدام أساليب getter و setter في TypeScript، يصبح من المعتاد تعريف متغير خاص واستخدام البريفكس “” قبل اسمه، كما هو مبين في الشيفرة المعروضة. ومن ثم عند استخدام JSON.stringify() لتحويل الكائن إلى سلسلة JSON، يتم استخدام اسم المتغير مع البريفكس “” كمفتاح في السلسلة.

لكن هل هناك طريقة لجعل TypeScript يستخدم اسم أسلوب الـ getter كمفتاح؟ هذا ما يطرحه السائل، ويسأل عن طرق أخرى لاستخدام أساليب الـ getter والـ setter وفي الوقت نفسه الحصول على سلسلة JSON نظيفة دون الحاجة للتدخل اليدوي.

في الحقيقة، لا يدعم JSON.stringify() الوظائف المخصصة مثل getter و setter. بمعنى آخر، يتم تحويل الكائن إلى سلسلة JSON باستخدام الخصائص المباشرة، وليس باستخدام الوظائف المخصصة.

لحل هذه المشكلة، يمكننا استخدام مكتبة خارجية مثل class-transformer أو json-typescript-mapper التي تدعم التحويل التلقائي للكائنات TypeScript إلى ومن JSON، وتأخذ بعين الاعتبار الوظائف المخصصة.

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

typescriptCopy code
function toJSON(obj: any): string {
  const jsonObj: any = {};
  Object.keys(obj).forEach(key => {
    const value = obj[key];
    if (typeof value !== 'function') {
      const propertyName = key.replace(/^_/, ''); // Remove leading underscore
      jsonObj[propertyName] = value;
    }
  });
  return JSON.stringify(jsonObj);
}

تأخذ هذه الدالة كائنًا وتقوم بتحويله إلى كائن JSON، باستثناء الأساليب (الوظائف)، وتزيل البريفكس “_” من الخصائص.

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

بدلًا من استخدام الـ JSON.stringify() مباشرة، يمكنك الاستفادة من دالة التحويل المخصصة التي قمت بكتابتها. لنقم بتحويل كائن إلى سلسلة JSON باستخدام هذه الدالة المخصصة:

typescriptCopy code
class MyClass {
  private _major: number;

  constructor(major: number) {
    this._major = major;
  }

  get major(): number {
    return this._major;
  }

  set major(major: number) {
    this._major = major;
  }

  toJSON(): string {
    const jsonObj: any = {};
    Object.keys(this).forEach(key => {
      const value = this[key];
      if (typeof value !== 'function') {
        const propertyName = key.replace(/^_/, ''); // Remove leading underscore
        jsonObj[propertyName] = value;
      }
    });
    return JSON.stringify(jsonObj);
  }
}

const myObj = new MyClass(5);
console.log(myObj.toJSON()); // Output: {"major":5}

هذا النهج يسمح بالحصول على سلسلة JSON نظيفة بسهولة، حيث يتم تحويل الكائن باستخدام الأساليب المخصصة بدون الحاجة إلى إعادة تسمية الخصائص يدويًا أو استخدام مكتبات خارجية.

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

الخطأ الذي تواجهه عند ترجمة وتجميع برنامجك يشير إلى عدم مطابقة نوع البيانات المتوقع في TypeScript للبيانات الفعلية التي تقوم بتعريفها في مصفوفة الـ Assignments.

عند النظر إلى كود البيانات الخاص بك في ملف data.ts، يتبين أنه تم تصميمه باستخدام بنية محددة للبيانات، حيث يتم تحديد العديد من الخصائص لكل عنصر في المصفوفة، مثل “a_type”، “a_title”، “symbol”، وغيرها. ومن الواضح أن كل عنصر في المصفوفة يجب أن يتبع نمطًا معينًا من البيانات.

ومن جهة أخرى، عندما نلقي نظرة على تعريفك لنوع البيانات في ملف assignment.ts، نجد أن هناك تعارضًا بين البيانات التي تم توقعها وتلك التي تقوم بتعريفها فعلياً في ملف data.ts. على سبيل المثال، في ملف assignment.ts، تعرّفت على خصائص مثل “name” و “information” و “selectA” و “selectB”، لكن هذه الخصائص غير موجودة في بعض العناصر في مصفوفة Assignments في ملف data.ts.

هذا يؤدي إلى خطأ في التعيين لأن TypeScript يتوقع أن تكون كل العناصر من نوع Assignment، ولكن بعض البيانات في المصفوفة لا تتوافق مع هذا النمط.

لحل هذه المشكلة، يجب التأكد من أن جميع البيانات في مصفوفة Assignments تتبع نمط البيانات المتوقع في نوع البيانات Assignment. يمكنك فعل ذلك عن طريق ضمان توافق الخصائص المعرفة في ملف assignment.ts مع البيانات الفعلية التي تعرّفها في مصفوفة Assignments في ملف data.ts.

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

عند مواجهة خطأ “is not assignable to type” في TypeScript، يُعتبر السبب الرئيسي لهذا الخطأ عدم تطابق البيانات المُعرّفة مع النمط المتوقع في التعريفات. وفي حالتك، يبدو أن هناك تضاربًا بين تعريفات نوع البيانات والبيانات الفعلية المستخدمة في تطبيقك.

لحل هذه المشكلة، يُنصح باتباع الخطوات التالية:

1. مراجعة تعريفات البيانات: قم بمراجعة تعريفات نوع البيانات للتأكد من أنها تتطابق بشكل صحيح مع بياناتك. في حالتك، يجب أن يتوافق كل عنصر في مصفوفة Assignments مع نوع البيانات Assignment.

2. تحديث البيانات: قم بمراجعة البيانات في مصفوفة Assignments للتأكد من أن جميع الخصائص الموجودة في تعريف نوع البيانات Assignment موجودة في كل عنصر.

3. استخدام وسائل التحقق: يمكنك استخدام وسائل لفحص البيانات أثناء تشغيل التطبيق للتأكد من تطابق البيانات المُستخدمة مع النمط المتوقع. يمكن استخدام أدوات تفحص الأنواع مثل TypeScript Language Service في بيئة التطوير الخاصة بك لتلقي تحذيرات حول تعارضات الأنواع.

4. تحسين إدارة البيانات: في الحالات الكبيرة أو المعقدة، قد ترغب في استخدام تقنيات إدارة الحالة مثل NgRx لضمان تنظيم أفضل للبيانات وضمان تطابقها مع النمط المتوقع.

عند مراعاة هذه الخطوات، يمكنك تجنب أخطاء “is not assignable to type” وتحسين جودة التطبيقات التي تقوم بتطويرها باستخدام TypeScript.

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

عندما تنظر إلى الكود الذي قدمته، يمكنك أن تتوقع أن تحدث خطأ في وقت الترجمة، لأنه يبدو أنه يحاول الوصول إلى الخاصية prop التي تحتوي فقط على متحكم set دون متحكم get. ومع ذلك، في TypeScript، هذا لا يُعتبر خطأ، بل يتم التعامل معه بشكل طبيعي.

السبب في عدم حدوث خطأ هو أن TypeScript يعتمد على مفهوم التفاعلية بين الخصائص، حيث يُمكن للخصائص أن تكون لها متحكمات get فقط، متحكمات set فقط، أو كلاهما معًا. وعند الوصول إلى الخصائص، يتم فحص إذا ما كان هناك متحكم get متوفر للخصائص، وإذا لم يكن هناك، فإن TypeScript يعتبر الوصول إلى الخصائص كتعيين قيمة جديدة لها.

في الحالة التي قدمتها، this.prop في الداخل يُعتبر استدعاءً للمتحكم get للخاصية prop، وعندما لا يكون متحكم get متوفرًا، يتم اعتباره كتعيين قيمة جديدة للخاصية، وهذا يعتبر مقبولًا من قبل TypeScript دون وجود خطأ في وقت الترجمة.

يمكن اعتبار هذا التصرف سلوكاً مفيداً في بعض الحالات، حيث يُمكن استخدامه لتنفيذ بعض العمليات داخل المتحكم set دون الحاجة إلى متحكم get مقابلها، مما يسهل على المطورين إنشاء مخططات برمجية مرنة وسهلة الصيانة.

باختصار، عندما ترى تصرفًا غير متوقع مثل هذا في TypeScript، فلا تندهش كثيرًا، بل اعلم أن هناك مفهومًا أعمق يدعمه ويبرره، ويسهل عملك كمطور.

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

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

عندما تعرِّف خصائص في TypeScript، يمكن أن تكون لها متحكمات set فقط، متحكمات get فقط، أو كلاهما معًا. وهذا يعني أنه حتى إذا كان لا يوجد متحكم get لخاصية ما، فإن الوصول إليها ما زال مقبولاً ولا يُعتبر خطأ.

السبب وراء هذا التصميم هو تعزيز مفهوم السهولة والمرونة في كتابة الكود. فعندما يريد المطور تحديد خاصية تتمتع بمتحكم set فقط، فإنه لا يحتاج إلى تعريف متحكم get فارغ ببساطة لأن ذلك لا يضيف قيمة إضافية. بدلاً من ذلك، يمكنه الوصول إلى الخاصية بدون قلق من وجود متحكم get.

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

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