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 وأخطاء «قد يكون 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 بالضبط، ولا شيء غيرهما. أما فحص القيمة المنطقية فكان سيعامل النص الفارغ كقيمة غائبة، وهذا خطأ في أحيان كثيرة.

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 من الطرف الأول ويجمع الباقي في union مع الطرف الثاني، ولهذا يمكن إسناد scores.get("Linus") ?? 0 إلى number.

الإسناد عند الفراغ: ??=

يسند a ??= b القيمة b إلى a فقط عندما تكون a هي null أو undefined. وشقيقاه ||= و&&= يسندان عندما يكون الطرف الأول خاطئًا أو صحيحًا منطقيًا.

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 حيث تعطيك إياه واجهة برمجية: لا يوجد undefined في JSON، وتعيد String.prototype.match وكثير من دوال DOM القيمة null.
• افحص بـ == null عندما قد تكون القيمة أيًا منهما.

فهرسة المصفوفات هي الثغرة الوحيدة: users[5] نوعه نوع العنصر حتى عندما يكون الفهرس خارج النطاق. يضيف الخيار noUncheckedIndexedAccess (ليس جزءًا من strict) | undefined إلى كل وصول بالفهرس حتى يكتشف المترجم ذلك أيضًا.