null ו-undefined ב-TypeScript: בדיקות והאופרטורים ?. ו-??

כש-strictNullChecks מופעל (הוא חלק מ-strict), ל-null ול-undefined יש טיפוסים משלהם. string אף פעם לא יכול להיות null; ערך שעשוי להיות חסר צריך לומר זאת בטיפוס שלו, כמו string | null, ו-TypeScript מחייב אתכם לטפל במקרה הזה לפני שמשתמשים בערך.

function initials(name: string | null | undefined): string {
  if (name == null) return "?"; // handles both null and undefined
  return name
    .split(" ")
    .map((part) => part[0])
    .join("");
}

console.log(initials("Ada Lovelace")); // AL
console.log(initials(null));           // ?
console.log(initials(undefined));      // ?

אחרי הבדיקה, הקומפיילר יודע ש-name הוא string, ולכן .split מותר. שאר הדף מכסה את הדרכים לבצע את הבדיקה הזו ואת האופרטורים שמקצרים אותה.

strictNullChecks ושגיאות "Possibly Null"

כשטיפוס כולל null או undefined, TypeScript מסרב להשתמש בערך כאילו הוא תמיד קיים:

// This does not compile: name may be null
function greet(name: string | null) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("ada"));

index.ts(3,22): error TS18047: 'name' is possibly 'null'.

הגרסה של undefined היא TS18048, 'x' is possibly 'undefined'. בלי strictNullChecks, null ו-undefined מותרים בכל טיפוס והקוד הזה מתקמפל, ואז קורס בזמן ריצה עם TypeError בפעם הראשונה ש-name הוא null. סוג הבאגים הזה הוא הסיבה העיקרית להשאיר את strict מופעל.

מאיפה הטיפוסים האלה מגיעים בקוד יומיומי:

בדיקת null ו-undefined

כל בדיקה למטה מצמצמת את הטיפוס בתוך הבלוק. בחרו את זו שמתאימה למה שאתם רוצים לפסול.

function label(value: string | null | undefined): string {
  if (value === undefined) return "undefined";
  if (value === null) return "null";
  return value.toUpperCase(); // value is string here
}

function orNone(value: string | null | undefined): string {
  if (value == null) return "(none)"; // == null matches null AND undefined
  return `"${value}"`;
}

console.log(label(undefined), label(null), label("ok")); // undefined null OK
console.log(orNone(null), orNone(undefined), orNone("")); // (none) (none) ""

== null הוא המקום היחיד שבו שוויון רופף הוא הדרך המקובלת: הוא נכון בדיוק עבור null ו-undefined, ולא עבור שום דבר אחר. בדיקת truthiness הייתה מתייחסת למחרוזת הריקה כחסרה, וזה לעיתים קרובות באג.

Optional chaining: ?.

a?.b קורא את b אם a אינו null או undefined, ואחרת עוצר ומחזיר undefined. אותו אופרטור עובד גם לאינדקסים, a?.[i], וגם לקריאות, fn?.().

interface User {
  name: string;
  address?: { city: string; zip?: string };
  tags?: string[];
  onLogin?: () => string;
}

const ada: User = { name: "Ada", address: { city: "London" }, onLogin: () => "welcome" };
const bob: User = { name: "Bob" };

console.log(ada.address?.city);        // London
console.log(bob.address?.city);        // undefined
console.log(ada.address?.zip?.length); // undefined
console.log(bob.tags?.[0]);            // undefined
console.log(ada.onLogin?.());          // welcome
console.log(bob.onLogin?.());          // undefined

הטיפוס של bob.address?.city הוא string | undefined: optional chaining מוסיף undefined לתוצאה, ולכן בדרך כלל משלבים אותו עם ??. ההתנהגות בזמן ריצה היא JavaScript רגיל; ראו optional chaining לפרטים על short-circuiting.

סימן השאלה הכפול: ??

a ?? b מחזיר את a אלא אם הוא null או undefined, ואז הוא מחזיר את b. הוא מחליף את הביטוי הישן a || b, שמשליך גם את 0, "", false ו-NaN:

function pageSize(input: number | undefined): string {
  const withOr = input || 20;      // 0 is falsy, so it is replaced
  const withNullish = input ?? 20; // only undefined is replaced
  return `${withOr} vs ${withNullish}`;
}

console.log(pageSize(undefined)); // 20 vs 20
console.log(pageSize(0));         // 20 vs 0

const scores = new Map([["Ada", 90]]);
const score: number = scores.get("Linus") ?? 0; // number | undefined becomes number
console.log(score);                             // 0

מבחינת טיפוסים, ?? מסיר את null ו-undefined מהצד השמאלי ומאחד את השאר עם הצד הימני, ולכן אפשר להשים את scores.get("Linus") ?? 0 ל-number.

השמת nullish: ??=

a ??= b משים את b ל-a רק כש-a הוא null או undefined. האחים שלו ||= ו-&&= משימים כשהצד השמאלי הוא falsy או truthy.

interface Options {
  retries?: number;
  label?: string;
}

function withDefaults(opts: Options) {
  opts.retries ??= 3;   // assign only if null or undefined
  opts.label ||= "job"; // assign if falsy, so "" is replaced too
  return opts;
}

console.log(withDefaults({}));                       // { retries: 3, label: 'job' }
console.log(withDefaults({ retries: 0, label: "" })); // { retries: 0, label: 'job' }

retries: 0 שורד את ??=, ואילו ה-label הריק מוחלף על ידי ||=. אחרי opts.retries ??= 3, TypeScript מצמצם את opts.retries ל-number עד סוף הפונקציה.

מאפיינים אופציונליים מול | undefined

nickname?: string ו-nickname: string | undefined נקראים אותו דבר, אבל הם שונים בשאלה אם המפתח חייב להתקיים:

interface WithOptional { nickname?: string }            // key may be missing
interface WithUndefined { nickname: string | undefined } // key must be present

const a: WithOptional = {};
const b: WithUndefined = { nickname: undefined };

// @ts-expect-error: Property 'nickname' is missing in type '{}' but required in type 'WithUndefined'.
const c: WithUndefined = {};

console.log("nickname" in a, "nickname" in b); // false true
console.log(a.nickname === b.nickname);        // true: both read as undefined

השתמשו ב-? כשהקוראים יכולים להשמיט את המאפיין, וב-| undefined כשאתם רוצים שכל קורא יעביר אותו במפורש, גם אם הערך הוא undefined. האפשרות exactOptionalPropertyTypes (לא חלק מ-strict) מהדקת את ? עוד יותר: nickname?: string דוחה אז את { nickname: undefined } ומקבל רק מפתח חסר או מחרוזת. פרמטרים אופציונליים של פונקציה (x?: number) מתנהגים כמו מאפיינים אופציונליים: בתוך הפונקציה x הוא number | undefined.

null או undefined: במה להשתמש

TypeScript לא כופה בחירה, אבל ערבוב של שניהם באותו בסיס קוד אומר שכל בדיקה צריכה לטפל בשני מקרים. מוסכמה נפוצה:

• השתמשו ב-undefined (ובמאפיינים אופציונליים) עבור "לא הוגדר" בטיפוסים שלכם. זה מה ש-JavaScript מייצר כברירת מחדל: מאפיינים חסרים, ארגומנטים שהושמטו, חיפושים שלא מצאו ב-find וב-Map.get.
• קבלו null במקום ש-API נותן לכם אותו: ב-JSON אין undefined, ו-String.prototype.match והרבה מתודות DOM מחזירות null.
• בדקו עם == null כשערך יכול להיות כל אחד מהם.

גישה לאינדקס במערך היא הפער היחיד: users[5] מקבל את טיפוס האיבר גם כשהאינדקס מחוץ לטווח. האפשרות noUncheckedIndexedAccess (לא חלק מ-strict) מוסיפה | undefined לכל גישה לאינדקס כדי שהקומפיילר יתפוס גם את זה.