عامل الاندماج الصفري في TypeScript

في هذه المقالة، سنشرح عامل الاندماج الصفري في TypeScript۔

YouTube Video

عامل الاندماج الصفري في TypeScript

عامل الاندماج الصفري (??) في TypeScript يشبه التقييم السريع في JavaScript ولكنه يُستخدم بشكل أكثر وضوحًا لتوفير قيمة افتراضية فقط عندما يكون الجانب الأيسر null أو undefined۔ يسمح لك هذا العامل بفحص ما إذا كانت القيمة null أو undefined بسهولة وتعيين قيمة افتراضية حسب الحاجة۔

يقوم عامل الاندماج الصفري (??) بإرجاع القيمة الموجودة على اليمين فقط إذا كان الجانب الأيسر null أو undefined۔ هذا يعني أن القيم مثل false أو سلسلة نصية فارغة أو الرقم 0 تبقى دون تغيير۔ هذه هي الفروق الرئيسية عن عامل التشغيل المنطقي OR التقليدي (||)۔ تم تقديم هذا العامل في TypeScript 3.7۔

الصياغة الأساسية

1let result = value ?? defaultValue;

• value: الموضوع الذي يتم فحصه لمعرفة ما إذا كان null أو undefined
• defaultValue: القيمة التي يتم إرجاعها إذا كانت value هي null أو undefined

مثال على الاستخدام

1function getUserName(userName: string | null | undefined): string {
2  return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice"));  // Output: Alice
6console.log(getUserName(null));     // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User

هنا، تقوم الوظيفة getUserName بإرجاع "Default User" إذا كانت userName هي null أو undefined، وإلا فإنها تُرجع قيمة userName۔

الفرق عن عامل التشغيل المنطقي OR

عامل التشغيل المنطقي OR يعامل القيم مثل false، 0، و"" (سلسلة فارغة) على أنها "زائفة"، تمامًا مثل null وundefined.۔ من ناحية أخرى، يستخدم عامل الاندماج الصفري فقط null و undefined كقيمة افتراضية۔

مثال على عامل التشغيل المنطقي OR

1function getUserAge(age: number | null | undefined): number {
2  return age || 18;  // `0` also applies the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 18
7console.log(getUserAge(null)); // Output: 18

مثال على عامل التشغيل nullish coalescing

1function getUserAge(age: number | null | undefined): number {
2  return age ?? 18;  // `0` does not apply the default value
3}
4
5console.log(getUserAge(25));  // Output: 25
6console.log(getUserAge(0));   // Output: 0
7console.log(getUserAge(null)); // Output: 18

اختيار بين عامل التشغيل المنطقي OR وعامل التشغيل nullish coalescing يعتمد على ما إذا كانت القيم 0 والسلاسل الفارغة مقبولة.۔ على سبيل المثال، إذا كنت تريد الاحتفاظ بعمر المستخدم كـ 0، فستحتاج إلى استخدام عامل التشغيل nullish coalescing.۔

الدمج مع الأنواع

يمكنك تعزيز قوة الكود الخاص بك من خلال الاستفادة من أمان الأنواع في TypeScript مع الجمع مع عامل الاندماج الصفري۔ في المثال التالي، تُستخدم القيم الافتراضية عند وجود خصائص معينة كـ null أو undefined۔

 1interface User {
 2  name: string;
 3  age?: number | null;
 4}
 5
 6function displayUserInfo(user: User): string {
 7  const userName: string = user.name ?? "Anonymous";
 8  const userAge: number = user.age ?? 18;
 9  return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18

• في الواجهة User، يكون age هو number | null، بما يسمح أن تكون قيمته null أو undefined۔
• وظيفة displayUserInfo تُرجع "Anonymous" إذا كانت name هي null أو undefined، و 18 إذا كانت age هي null أو undefined۔

الملخص

عامل التشغيل nullish coalescing يساعد في تعيين قيمة افتراضية فقط عندما تكون القيمة null أو undefined.۔ على عكس عامل التشغيل المنطقي OR التقليدي، فإنه لا يعامل القيم false، 0، أو السلاسل الفارغة على أنها "زائفة"، مما يجعله مفيدًا بشكل خاص للحفاظ على هذه القيم.۔ بالإضافة إلى ذلك، فإن دمجه مع نظام أنواع TypeScript يتيح إنشاء كود أكثر قوة وقابلية للقراءة.۔

من خلال الاستخدام الفعال لمشغل دمج القيم nullish، يمكنك كتابة منطق تعيين القيم الافتراضية بإيجاز وتقليل الحاجة إلى تصحيحات null غير الضرورية.۔

مشغل إسناد دمج القيم Nullish في TypeScript

مشغل إسناد دمج القيم nullish (??=) هو مشغل حديث نسبيًا تم تقديمه في TypeScript، ويوفر طريقة مريحة لإسناد قيمة فقط إذا كانت المتغير null أو undefined.۔ هنا، سنشرح كيفية عمل هذا المشغل، وفي أي حالات يكون فعالًا، وسنقدم أمثلة مع الكود.۔

ما هو مشغل إسناد دمج القيم Nullish

عامل الإسناد nullish coalescing هو عامل إسناد يستند إلى عامل التشغيل nullish coalescing.۔ يتم استخدام هذا المشغل لإسناد قيمة جديدة فقط إذا كانت المتغير null أو undefined.۔

1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null, so the new value is assigned
3console.log(variable); // Output: "Default Value"

باستخدام هذا المشغل، يمكنك كتابة منطق "إسناد إذا كانت المتغير غير معرف أو null" بأسلوب أكثر إيجازًا.۔

المقارنة مع طرق الإسناد التقليدية

بدون عامل الإسناد nullish coalescing، ستحتاج إلى استخدام تعبير if أو عامل ثلاثي لتحقيق نفس السلوك.۔ لنقارن مع طرق الإسناد التقليدية.۔

الطريقة التقليدية

1let variable: string | null = null;
2if (variable === null || variable === undefined) {
3  variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"

الطريقة باستخدام العامل الثلاثي

1let variable: string | null = null;
2variable = variable ?? "Default Value";
3console.log(variable); // Output: "Default Value"

طريقة مختصرة باستخدام العامل ??=

1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"

عامل الإسناد nullish coalescing أبسط بكثير وأكثر قابلية للقراءة مقارنة بطرق الإسناد الأخرى، مما يحسن من قابلية قراءة الشيفرة.۔

أمثلة محددة على استخدام ??=

عامل الإسناد nullish coalescing مفيد في سيناريوهات مختلفة، مثل تهيئة خصائص الكائنات وتعيين القيم الافتراضية.۔ إليك بعض الأمثلة المحددة.۔

تهيئة خصائص الكائن

 1interface Config {
 2  theme?: string;
 3  language?: string;
 4}
 5
 6let config: Config = {};
 7config.theme ??= "light";  // Set the default "light" theme if none is specified
 8config.language ??= "en";  // Set the default "en" language if none is specified
 9
10console.log(config); // Output: { theme: "light", language: "en" }

تهيئة المصفوفات

1let numbers: number[] | null = null;
2numbers ??= [];  // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]

تعيين القيم الافتراضية لمعاملات الدالة

1function greet(name?: string) {
2  name ??= "Guest";  // Set name to "Guest" if it is undefined or null
3  console.log(`Hello, ${name}!`);
4}
5
6greet();          // Output: "Hello, Guest!"
7greet("Alice");   // Output: "Hello, Alice!"

ملاحظات وقيود

عامل الإسناد nullish coalescing مفيد جدًا، ولكن هناك بعض التحذيرات.۔

• يستهدف فقط null و undefined: يقوم هذا المشغل بالتعيين فقط إذا كانت القيمة هي null أو undefined۔ على سبيل المثال، السلاسل الفارغة ("")، والقيمة 0، وfalse ليست مستهدفة۔

1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)

• التعامل مع عوامل تشغيل أخرى: قد يؤدي استخدام عامل الإسناد nullish coalescing مع عوامل تشغيل أخرى إلى نتائج غير مقصودة.۔ من المهم بشكل خاص فهم الفرق بينه وبين عامل الإسناد المنطقي OR.۔

 1let value: string | null = null;
 2value ||= "Default";  // Targets not only "null" and "undefined" but also falsy values
 3console.log(value);  // Output: "Default"
 4
 5value = "";
 6value ||= "Default";  // An empty string is also targeted
 7console.log(value);  // Output: "Default"
 8
 9value = null;
10value ??= "Default";  // Targets only null or undefined
11console.log(value);  // Output: "Default"

كود نموذج

 1let config: { theme?: string; language?: string } = {};
 2
 3// Use Nullish Coalescing Assignment to set default values
 4config.theme ??= "light";
 5config.language ??= "en";
 6
 7console.log(config); // Output: { theme: "light", language: "en" }
 8
 9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]

باستخدام عامل الإسناد nullish coalescing، يمكنك التخلص من الشيفرة غير الضرورية وكتابة شيفرة TypeScript أكثر سلاسة وأناقة.۔

الملخص

مشغل التعيين بالتوحيد nullish (??=) هو أحد عمليات التعيين البسيطة والفعالة في TypeScript۔ إنه مفيد بشكل خاص عندما تحتاج إلى إجراء فحوصات لـ null أو undefined أثناء تعيين القيم الافتراضية۔ بالمقارنة مع عبارات if التقليدية أو المشغل الثلاثي، يجعل الكود أكثر إيجازاً وقابليةً للقراءة، ويجب استخدامه بشكل فعال في التطوير المستقبلي۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video