TypeScript Tips & Tricks Part 1

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

Type Annotations

TypeScript هي لغة مكتوبة بشكل ثابت، مما يعني أنها تتيح لك تحديد أنواع المتغيرات والوظائف.

فلذلك استخدام ​​Type Annotations سوف يساعك على اكتشاف الأخطاء مبكرًا في عملية التطوير وتحسين إمكانية قراءة الكود.

فيما يلي بعض الأمثلة على ذلك:

// variable تحديد نوع بيانات المتغير
let counter: number = 0;

// fuction parameters + return type تحديد نوع بيانات المتغير
function addNumbers(a: number, b: number): number {
 return a + b;
}

// class تحديد نوع بيانات المتغير
class Person {
 firstName: string;
 lastName: string;
 age: number;

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

 getFullname(): string {
   return `${this.firstName}${this.lastName}`;
 }
}

Enums

تعد الـEnums ميزة فعالة في TypeScript تتيح لك تحديد مجموعة من الثوابت المسماة (constants)

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

فيما يلي مثال على كيفية استخدام الـEnums في TypeScript:

enum Color {
 Red = "RED",
 Green = "GREEN",
 Blue = "BLUE"
}

function printColor(color: Color): void {
 console.log(`The color is ${color}`);
}

printColor(Color.Red); // output: The color is RED

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

Optional Chaining (?)

هي ميزة TypeScript التي تتيح لك الوصول بأمان إلى الخصائص والأساليب المتداخلة (nested properties) دون القلق بشأن إذا كانت القيم الوسيطة خالية أو غير محددة (null or undefined)

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

فيما يلي مثال على كيفية استخدام التسلسل الاختياري في TypeScript:

interface Person {
 name: string;
 address?: {
   street: string;
   city: string;
 };
}

const person1: Person = {
 name: "Mo",
 address: {
   street: "123 Main St",
   city: "Giza",
 },
};

const person2: Person = {
 name: "Ahmed",
};

console.log(person1?.address?.city); // output: Giza
console.log(person2?.address?.city); // output: undefined

نحن نستخدم الـOptional Chaining للوصول بأمان إلى العنوان، حتى إذا كانت خاصية العنوان أو أي من خصائصها الفرعية غير محددة أو فارغة (null or undefined).

Nullish Coalescing

يعد الـNullish Coalescing ميزة أخرى في TypeScript والتي يمكن أن تساعد في جعل التعليمات البرمجية أكثر قوة. فهي تسمح لك بتوفير قيمة افتراضية لمتغير أو تعبير عندما يكون فارغًا أو غير معرف، دون الاعتماد على قيم خاطئة.

فيما يلي مثال على كيفية استخدام الاندماج الصفري في TypeScript:

let test1: string | null = null;
let test2: string | undefined = undefined;
let test3: string | null | undefined = "hello";

console.log(test1 ?? "default value"); // output: "default value"
console.log(test2 ?? "default value"); // output: "default value"
console.log(test3 ?? "default value"); // output: "hello"

في هذا المثال، لدينا ثلاثة متغيرات قد تحتوي على قيم خالية أو غير محددة (null or undefined). نستخدم عامل Nullish Coalescing (؟؟) للتحقق مما إذا كانت القيم فارغة (إما فارغة أو غير محددة) وتقديم قيمة افتراضية في هذه الحالة.

في الحالتين الأوليين ، يكون المتغيران test1 و test2 فارغين أو غير معرفين ، على التوالي ، لذلك يتم إرجاع القيمة الافتراضية.

في الحالة الثالثة ، تحتوي القيمة test3 على قيمة غير خالية / غير غير محددة ، لذلك يتم إرجاع هذه القيمة بدلاً من القيمة الافتراضية.

Generics

تعد الـGenerics ميزة قوية في TypeScript تتيح لك كتابة كود قابل لإعادة الاستخدام وتعمل مع أنواع مختلفة من البيانات، يمكنهم المساعدة في تقليل التكرار وتحسين إمكانية صيانة الكود.

فيما يلي مثال على كيفية استخدام الأدوية الجنيسة في TypeScript:

function identity<T>(arg: T): T {
 return arg;
}

let output1 = identity<string>("hello"); // output: "hello"
let output2 = identity<number>(42); // output: 42

في هذا المثال ، نحدد function تسمى identity تأخذ النوع T وتعيد نفس نوع القيمة التي تم تمريرها.

ثم نسمي identity بنوعين مختلفين من البيانات: string وnumber. ترجع الدالة نفس نوع القيمة التي تم تمريرها ، لذا يكون متغير 1 من النوع string ومتغير 2 من النوع number.

هذه خمس حيل لاستخدام لغة الـTypeScript بفعالية أكثر، فهل كان المقال مفيدًا لك؟ شاركنا رأيك في التعليقات وانتظر الجزء الثاني قريبًا!