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

1. الكتابة الثابتة

إحدى الميزات الأساسية لـ TypeScript هي الكتابة الثابتة. على عكس JavaScript، حيث يمكن للمتغيرات الاحتفاظ بقيم من أي نوع، يتيح لك TypeScript تحديد أنواع المتغيرات والخصائص والمعلمات بشكل صريح.

في JavaScript العادي، يمكنك الإعلان عن متغيرات مثل هذا:

let name = "Whiskers";
let age = 5;

في TypeScript، يمكنك فرض أنواع البيانات عن طريق إضافتها إلى تعريف المتغير:

let name: string = "Whiskers";
let age: number = 5;

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

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

2. واجهات

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

على سبيل المثال، دعونا نحدد واجهة لكائن Cat:

interface Cat {
    name: string;
    age: number;
    breed?: string; // optional property
}

الآن، عند إنشاء كائن قطة، يجب أن يلتزم بهذه الواجهة:

const fluffy: Cat = {
    name: "Fluffy",
    age: 3
};

في هذه الحالة، الاسم والعمر حقلان مطلوبان، لكن السلالة اختيارية بسبب ?. إذا حاولت تعيين كائن Cat لا يتوافق مع الواجهة، فسيشير TypeScript إلى المشكلة:

const wrongCat: Cat = {
    name: "Whiskers",
    // missing 'age' property
};

يمكنك أيضًا جعل الخصائص اختيارية باستخدام ؟ الرمز، مما يسمح بالمرونة عند الضرورة، مع الحفاظ على سلامة الكتابة.

3. خصائص الطبقة

تشبه فئات TypeScript فئات JavaScript ولكن مع ميزات وأمان إضافية للنوع. على سبيل المثال، يمكنك الإعلان بوضوح عن أنواع لخصائص الفئة:

class Cat {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

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

class Cat {
    name: string;
    breed?: string;
}

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

4. إمكانية الوصول العامة والخاصة

ميزة أخرى مهمة في TypeScript هي القدرة على التحكم في إمكانية الوصول لأعضاء الفصل (الخصائص والأساليب) باستخدام معدّلات الوصول العامة والخاصة. افتراضيًا، يكون جميع أعضاء الفصل علنيين في كل من JavaScript وTypeScript، مما يعني أنه يمكن الوصول إليهم من أي مكان. ومع ذلك، يمكنك تحديد أعضاء الفصل بشكل صريح على أنهم خاصون لتقييد إمكانية الوصول إليهم داخل الفصل.

على سبيل المثال:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    speak() {
        return `Meow! I am ${this.name}`;
    }
}

في هذا المثال، خاصية الاسم عامة، لذا يمكن الوصول إليها خارج الفصل، لكن خاصية العمر خاصة، لذا لا يمكن الوصول إليها إلا داخل الفصل نفسه.

const whiskers = new Cat("Whiskers", 5);
console.log(whiskers.name); // Works fine
console.log(whiskers.age); // Error: 'age' is private

يضمن استخدام الخاص التغليف، ومنع التغييرات العرضية أو الوصول إلى بيانات الفصل الحساسة من خارج الفصل.

5. الاختزال المنشئ

يوفر TypeScript اختصارًا مفيدًا للإعلان عن الخصائص وتهيئتها عبر المُنشئ. بدلاً من الإعلان عن الخصائص يدويًا وتعيينها في المُنشئ، يمكنك الإعلان عنها مباشرةً في قائمة معلمات المُنشئ.

إليك مثال أساسي:

class Cat {
    constructor(public name: string, private age: number) {}
}

هذا الرمز يعادل وظيفيًا ما يلي:

class Cat {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

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

خاتمة

في هذه المقالة، قمنا بتغطية بعض ميزات TypeScript الرئيسية التي ستواجهها بشكل متكرر في تطوير Angular:

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

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

بعد ذلك، دعنا نتعمق في إعداد بيئة التطوير الخاصة بك لـ Angular وإعداد الأدوات التي ستحتاجها للبدء!