אופרטור איחוי 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 בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.