אופרטור איחוי 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 הלוגי מתייחס לערכים כמו 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

דוגמה למפעיל איחוד 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

לבחור בין מפעיל OR לוגי לבין מפעיל איחוד nullish תלוי אם 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 ?? "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 מסייע לקבוע ערך ברירת מחדל רק כאשר הערך הוא 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, so the new value is assigned
3console.log(variable); // Output: "Default Value"

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

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

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

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

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 הוא הרבה יותר פשוט וקריא בהשוואה לשיטות השמה אחרות, ומשפר את קריאות הקוד.

דוגמאות ספציפיות לשימוש ב-??=

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

סיכום

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

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

YouTube Video