عامل الاندماج الصفري في 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 المنطقي.۔ عامل التشغيل المنطقي 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
- كما هو موضح، معامل OR المنطقي يعيد القيمة الافتراضية
18حتى عندما تكون القيمة0.۔
مثال على عامل التشغيل 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
-
من ناحية أخرى، معامل الاندماج الصفري يعيد القيمة الأصلية حتى عندما تكون
0.۔ -
الاختيار بين معامل OR المنطقي ومعامل الاندماج الصفري يعتمد على ما إذا كان
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;
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أوundefined، لذلك يتم استخدام معامل الاندماج الصفري لتعيين القيمة الافتراضية18.۔ - في الوقت نفسه، الخاصية
nameتقبل فقط سلسلة نصية، لذا يتم استخدام القيمة كما هي.۔
الملخص
- عامل التشغيل 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,
3 // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"
باستخدام هذا المشغل، يمكنك كتابة منطق "إسناد إذا كانت المتغير غير معرف أو null" بأسلوب أكثر إيجازًا.۔
المقارنة مع طرق الإسناد التقليدية
بدون عامل الإسناد nullish coalescing، ستحتاج إلى استخدام تعبير if أو عامل ثلاثي لتحقيق نفس السلوك.۔ لنقارن مع طرق الإسناد التقليدية.۔
الطريقة التقليدية
باستخدام عبارة if، يمكن صياغته كما يلي:۔
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
الطريقة باستخدام العامل الثلاثي
بدلاً من ذلك، باستخدام معامل ثلاثي، يمكن صياغته كما يلي:۔
1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"
طريقة مختصرة باستخدام معامل الإسناد بالاندماج الصفري
من ناحية أخرى، باستخدام معامل الإسناد بالاندماج الصفري، يمكن صياغته هكذا:۔
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
كما هو موضح، معامل الإسناد بالاندماج الصفري أبسط بكثير وأكثر وضوحًا مقارنة بطرق الإسناد الأخرى، مما يحسن وضوح الكود.۔
أمثلة محددة على استخدام ??=
عامل الإسناد 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 هما المستهدفان.۔
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)
- هذا المعامل يقوم بالإسناد فقط عندما تكون القيمة
nullأوundefined.۔ على سبيل المثال، القيم مثل سلسلة فارغة ("") أو0أوfalseليست مستهدفة.۔
كن حذرًا عند استخدامه مع المعاملات الأخرى.۔
1let value: string | null = null;
2
3// Targets not only "null" and "undefined" but also falsy values
4value ||= "Default";
5console.log(value); // Output: "Default"
6
7value = "";
8// An empty string is also targeted
9value ||= "Default";
10console.log(value); // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value); // Output: "Default"
- معامل الإسناد بالاندماج الصفري قد ينتج عنه نتائج غير مقصودة عند استخدامه مع معاملات أخرى.۔ من المهم بشكل خاص فهم الفرق بينه وبين عامل الإسناد المنطقي OR.۔
كود نموذج
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 أيضًا.۔