في هذه الصفحة
استكمالا لسلسله ال TypeScript لكتابه كود نظيف
Destructuring
الـDestructuring هو صيغة مختصرة تسمح لك باستخراج القيم من المصفوفات والكائنات (arrays and objects). مما يمكن أن يساعد في جعل الكود الخاص بك أكثر قابلية للقراءة وأكثر إيجازًا، بالإضافة إلى تقليل احتمالية الأخطاء الناتجة عن عدم ملاءمة أسماء المتغيرات (variable names).
مثال على Object Destructuring
let person = { firstName: "John", lastName: "Doe", age: 30 };
let { firstName, lastName } = person;
console.log(firstName); // output: "John"
console.log(lastName); // output: "Doe"في هذا المثال نقوم بإنشاء Object يسمى Person بثلاث خصائص، ثم نستخدم خاصية الـObject destructuring لإستخراج الاسم الأول واسم العائلة وتعيينها إلى متغيرات من نفس الإسم، والذي يسمح لنا بالوصول إلى هذه الخصائص بسهولة أكبر وبكود أقل.
مثال على Array Destructuring
let numbers = [1, 2, 3, 4, 5];
let [first, second, , fourth] = numbers;
console.log(first); // output: 1
console.log(second); // output: 2
console.log(fourth); // output: 4في هذا المثال، نقوم بإنشاء مصفوفة من الأرقام واستخدام خاصية الـArray destructuring لإستخراج العنصر الأول والثاني والرابع وتخصيصها لمتغيرات، نتخطى العنصر الثالث باستخدام فجوة. والذي يسمح لنا بالوصول إلى عناصر محددة من المصفوفة Array بسهولة أكبر وبكود أقل.
1.3 مثال على function parameters destructuring:يمكن أيضًا استخدام الـDestructuring مع function parameters ، مما يسمح لك باستخراج قيم محددة من العناصر التي تم تمريرها كمعاملات للدالة :
function greet({ firstName, lastName }: { firstName: string, lastName: string }): void { console.log(`Hello, ${firstName} ${lastName}!`);
}
let person = { firstName: "ahmed", lastName: "mohsen", age: 30 };
greet(person); // output: "Hello, ahmed mohsen!"Interfaces
تعد الـInterfaces ميزة قوية أخرى في TypeScript والتي يمكن أن تساعدك في كتابة برمجيات قابلة للقراءة. حيث تسمح لك بتحديد نوع للـ( class, object, or function) والتي يمكن أن تساعدك على تجنب الأخطاء الشائعة وتجعل كودك موثقًا في زاته (self-documenting).
فيما يلي مثال على كيفية استخدام الواجهات في TypeScript:
في هذا المثال، نحدد Interface يسمى Person تحدد شكل الكائن Person، بما في ذلك خاصية الاسم الأول وخاصية اسم العائلة وخاصية العمر الاختيارية.
ثم نقوم بتعريف دالة function تُسمى sayHello تأخذ الكائن كـparameter وتقوم بتحيته.
interface Person {
firstName: string;
lastName: string;
age?: number;}
function sayHello(person: Person): void {
console.log(`Hello, ${person.firstName} ${person.lastName}!`);
if (person.age) {
console.log(`You are ${person.age} years old.`);
}
}
let person1 = { firstName: "Ahmed", lastName: "Mohsen", age: 30 };
let person2 = { firstName: "Mo", lastName: "Ali" };
sayHello(person1); // output: "Hello, Ahmed Mohsen! You are 30 years old."
sayHello(person2); // output: "Hello, Mo Ali!"Async/Await
Async / await هي ميزة قوية في TypeScript، والتي تتيح كتابة تعليمات برمجية غير متزامنة (asynchronous) تبدو وتتصرف مثل كود متزامن (synchronous). والذي يمكن أن يساعد في تحسين قابلية قراءة الكود وتقليل احتمالية الأخطاء التي تسببها callback hell وهي إضافة الكثير من الـcallbacks المتلاحقة.
فيما يلي مثال على كيفية عدم استخدام ثم استخدام Async / await في TypeScript:
getData()
.then((data) => {
console.log(data);
}).catch((error) => {
console.error(error);
});
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}في هذا المثال ، نُعرف دالة function غير متزامنة تسمى getData والتي تقوم بإجراء طلب جلب للبيانات من API وتنتظر الإجابة باستخدام الكلمة الأساسية await، ثم نحورها لـ json، وننتظر النتيجة مرة أخرى باستخدام await، ثم نستدعي الدالة getData ونستخدم الـ then للتعامل مع البيانات التي تم استرجاعها، أو طريقة catch للتعامل مع أي أخطاء قد تحدث.
داخل الدالة غير المتزامنة (async function)، يمكنك استخدام await قبل استدعاء وظيفة تقطع وعدًا (returns a promise.)، مما يجعل الكود ينتظر حتى يتم تسوية الوعد(promise is settled)، عندها يتم التعامل مع القيمة التي تم الوفاء (fulfilled value) بها بالوعد كقيمة مرتجعة، أو يتم طرح القيمة المرفوضة ( return value, or the rejected value).
