אופרטור איחוי Nullish ב-TypeScript

במאמר זה נסביר את אופרטור האיחוי Nullish ב-TypeScript.

YouTube Video

אופרטור איחוי Nullish ב-TypeScript

אופרטור האיחוי nullish (??) ב-TypeScript דומה לקיצור הבדיקה של JavaScript, אך משמש במפורש יותר כדי לספק ערך חלופי רק כאשר הצד השמאלי הוא null או undefined. האופרטור הזה מאפשר לבדוק בקלות אם ערך הוא null או undefined ולהגדיר ערך ברירת מחדל בעת הצורך.

אופרטור האיחוי nullish (??) מחזיר את הערך הימני רק אם הצד השמאלי הוא 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. מצד שני, אופרטור האיחוי nullish משתמש רק ב-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

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.

שילוב עם סוגים

ניתן לשפר את החוסן של הקוד על ידי ניצול בטיחות הסוגים של TypeScript בשילוב עם אופרטור האיחוי nullish. בדוגמה הבאה, ערכי ברירת מחדל משמשים כאשר תכונות מסוימות הן 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 מאפשר רק string, ולכן משתמשים בערך כפי שהוא.

סיכום

• מפעיל איחוד nullish מסייע לקבוע ערך ברירת מחדל רק כאשר הערך הוא null או undefined. שלא כמו אופרטור ה-OR הלוגי המסורתי, הוא אינו מחשיב את false, 0 או מחרוזות ריקות כ'שקריות', מה שהופך אותו למועיל במיוחד כשאתה רוצה לשמור על הערכים הללו. בנוסף, שילוב שלו עם מערכת הטיפוסים של TypeScript מאפשר יצירת קוד חזק וקריא יותר.
• על ידי שימוש יעיל באופרטור nullish coalescing, ניתן לכתוב לוגיקה תמציתית עבור קביעת ערכי ברירת מחדל תוך הפחתת בדיקות null מיותרות.

אופרטור השמה nullish coalescing ב-TypeScript

אופרטור ההשמה nullish coalescing (??=) הוא אופרטור חדש יחסית שהוצג ב-TypeScript, ומספק שיטה נוחה להקצות ערך רק אם המשתנה הוא null או undefined. כאן נסביר כיצד האופרטור הזה עובד, באילו מצבים הוא יעיל, ונביא דוגמאות עם קוד.

מהו אופרטור השמה nullish coalescing

מפעיל ההשמה של איחוד nullish הוא מפעיל השמה המבוסס על מפעיל איחוד nullish. אופרטור זה משמש להקצאת ערך חדש רק אם המשתנה הוא 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"

על ידי שימוש באופרטור זה, ניתן לכתוב בצורה תמציתית יותר את הלוגיקה של "הקצה אם המשתנה הוא undefined או null".

השוואה לשיטות השמה מסורתיות

ללא מפעיל ההשמה של איחוד nullish, היית צריך להשתמש בהצהרת if או במפעיל תנאי (ternary) כדי להשיג את אותה התנהגות. בואו נשווה לשיטות ההשמה המסורתיות.

שיטה קונבנציונלית

באמצעות משפט 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 שימושי במצבים שונים, כמו אתחול מאפייני אובייקט והגדרת ערכי ברירת מחדל. להלן כמה דוגמאות ספציפיות.

אתחול תכונות של עצמים

 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 שימושי מאוד, אבל יש כמה אזהרות.

רק 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, תוכל להסיר קוד מיותר ולכתוב קוד TypeScript חלק ואלגנטי יותר.

סיכום

אופרטור ההשמה ??= (אופרטור מיזוג Nullish) הוא אחד מתהליכי ההשמה הפשוטים והיעילים ב-TypeScript. אופרטור זה מועיל במיוחד כאשר יש צורך לבדוק null או undefined בעת הגדרת ערכי ברירת המחדל. בהשוואה למשפטי if מסורתיים או אופרטורים טרינריים, הקוד הופך לתמציתי וקריא יותר.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video