TypeScriptのnullとundefined: チェック方法、?. と ??

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 はあらゆる型で許され、このコードはコンパイルできますが、name が初めて null になったときに実行時に TypeError でクラッシュします。この種のバグが 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 のときだけ true になり、それ以外では true になりません。truthiness のチェックだと空文字列も欠けているものとして扱ってしまい、それはしばしばバグになります。

オプショナルチェーン: ?.

a?.b は、a が null でも undefined でもなければ b を読み、そうでなければそこで止まって 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 です。オプショナルチェーンは結果に undefined を加えるので、ふつうは ?? と組み合わせます。実行時の動きは普通のJavaScriptです。短絡評価の詳細は オプショナルチェーン を参照してください。

Null 合体演算子: ??

a ?? b は、a が null か undefined でなければ a を、そうなら b を返します。0、""、false、NaN も捨ててしまう古い書き方 a || b の代わりになります:

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 に代入できるのはこのためです。

Null 合体代入: ??=

a ??= b は、a が null か undefined のときだけ a に b を代入します。仲間の ||= と &&= は、左辺が 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 のあと、関数の残りでは 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はどちらかを強制しませんが、1つのコードベースで両方を混ぜると、すべてのチェックで2つのケースを扱うことになります。よくある規約は次のとおりです:

• 自分の型での「未設定」には undefined（と省略可能なプロパティ）を使う。JavaScriptがデフォルトで生み出すのはこちらです: 存在しないプロパティ、省略された引数、find や Map.get で見つからなかった場合。
• APIが null を返す場所では null を受け付ける: JSON には undefined がなく、String.prototype.match や多くの DOM のメソッドは null を返します。
• どちらもありうる値は == null でチェックする。

唯一の抜けは配列のインデックスアクセスです。users[5] は、インデックスが範囲外でも要素の型として型付けされます。noUncheckedIndexedAccess オプション（strict には含まれません）を使うと、すべてのインデックスアクセスに | undefined が加わり、コンパイラーがそれも捕まえるようになります。