التسلسل الاختياري في TypeScript
في هذه المقالة، نشرح التسلسل الاختياري في TypeScript۔
YouTube Video
التسلسل الاختياري في TypeScript
التسلسل الاختياري في TypeScript هو ميزة مفيدة للوصول إلى خصائص الكائنات أو المصفوفات المتداخلة بعمق۔ تمنع هذه الميزة الأخطاء عند الوصول إلى خصائص غير موجودة، مما يسمح لك بكتابة كود مختصر وقابل للقراءة۔
ما هو التسلسل الاختياري؟
يعيد مشغل التسلسل الاختياري (?.) القيمة undefined عند الوصول إلى خاصية أو طريقة في كائن غير موجودة۔ يسمح هذا للكود بمواصلة التشغيل دون إلقاء خطأ إذا لم تكن الخاصية موجودة۔
على سبيل المثال، عند الوصول إلى خصائص كائن متداخل كما هو موضح أدناه، يحدث خطأ إذا لم تكن الخاصية موجودة باستخدام الطريقة التقليدية۔
مثال
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined
- في هذه الحالة، ستحدث مشكلة إذا لم يكن
addressموجودًا۔ يمكن استخدام التسلسل الاختياري لمنع ذلك۔
مثال باستخدام السلسلة الاختيارية
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined
- باستخدام التسلسل الاختياري، يتم تجنب الأخطاء ويتم إرجاع
undefinedبدلاً من ذلك عند عدم وجود الخصائص۔
كيفية استخدام التسلسل الاختياري
يمكن استخدام التسلسل الاختياري في سيناريوهات متعددة، مثل الوصول إلى الخصائص، واستدعاء الدوال، والوصول إلى المصفوفات۔ سنشرح كيفية استخدام كل منها۔
الوصول إلى الخصائص
يمكنك الوصول بأمان إلى الخصائص المتداخلة للكائنات۔
1interface Company {
2 name: string;
3 location?: {
4 city?: string;
5 country?: string;
6 };
7}
8
9const company: Company = {
10 name: 'Tech Corp',
11 location: {
12 city: 'New York'
13 }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined
يستخدم هذا الكود الربط الاختياري للوصول إلى خصائص city وcountry فقط إذا كانت الخاصية location موجودة في كائن company۔
استدعاء الدوال
يمكن أن يتحقق التسلسل الاختياري من وجود دالة قبل استدعائها۔
1interface User {
2 name?: string;
3 greet?: () => void;
4}
5
6const user: User = {
7 name: 'Bob',
8 // greet is undefined
9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs
يستخدم هذا الكود الربط الاختياري لاستدعاء دالة greet بأمان فقط إذا كانت موجودة۔ لن يحدث أي خطأ حتى إذا لم تكن الدالة معرّفة۔
الوصول إلى المصفوفات
يمكن تطبيق التسلسل الاختياري على المصفوفات للتحقق مما إذا كانت العناصر موجودة۔
1interface Team {
2 members?: string[];
3}
4
5const team: Team = {
6 members: ['Alice', 'Bob', 'Charlie']
7};
8
9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined
يصل هذا الكود إلى عناصر المصفوفة فقط إذا كان team.members موجودًا، ويعيد القيمة للفهارس الموجودة وundefined لغير الموجودة۔
الربط الاختياري وعامل الدمج الصفري
يعيد التسلسل الاختياري القيمة undefined، ولكن أحيانًا قد لا يكون ذلك كافيًا۔ في هذه الحالة، يمكن استخدام عامل الدمج الصفري (??) الذي تم تقديمه في TypeScript 3.7 لتوفير قيم افتراضية عندما تكون القيمة null أو undefined۔
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'
عند الجمع بينه وبين التسلسل الاختياري، يمكنك كتابة كود أكثر مرونة۔
1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
تحذيرات عند استخدام التسلسل الاختياري
عند استخدام الربط الاختياري، من المهم أن تضع في اعتبارك النقاط التالية:۔
-
استخدام الربط الاختياري دون داعٍ
- استخدام الربط الاختياري للخصائص أو الدوال المضمونة الوجود قد يجعل الكود زائدًا عن الحاجة۔ من الأفضل استخدامه فقط عندما تكون وجودية العنصر الهدف غير مؤكدة۔
-
أخطاء كتابية
- الإفراط في استخدام الربط الاختياري قد يجعل من الصعب ملاحظة الأخطاء الكتابية التي تؤدي إلى الوصول إلى خصائص غير مقصودة۔ قم بإجراء فحوصات النوع المناسبة واستخدمه بحذر۔
ملخص الكود
1interface User {
2 name?: string;
3 address?: {
4 city?: string;
5 postalCode?: string;
6 };
7}
8
9const user: User = {
10 name: 'Alice',
11 address: {
12 city: 'Tokyo'
13 }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'
الملخص
التسلسل الاختياري في TypeScript يوفر كودًا موجزًا مع تجنب الأخطاء عند الوصول إلى الكائنات أو المصفوفات المتداخلة بعمق۔ بالإضافة إلى ذلك، فإن دمجه مع عامل الدمج الصفري يسمح لك بتعيين قيم افتراضية وخلق منطق أكثر مرونة۔ عند استخدامه بشكل مناسب، يمكن أن يحسن بشكل كبير من أمان الكود وقابليته للقراءة۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔