【保存版】TypeScriptの「null」「undefined」「unknown」の違いを超わかりやすく解説！

TypeScriptでよく出てくる「null」「undefined」「unknown」。
なんとなく使っていませんか？
この記事では、それぞれの違いを超わかりやすくまとめました！

まずはざっくりまとめ！

それぞれもう少し詳しく見ていこう！

💬 nullとは？

nullは、「意図的に何も入っていない」と表現したいときに使います。

let userName: string | null = null;

ポイント：開発者が「ここは何もない」と明示したいときに使います。

💬 undefinedとは？

undefinedは、「まだ値がセットされていない」ことを意味します。

let age: number;
console.log(age); // undefined

ポイント：何も設定していない変数や、戻り値がない関数の結果に出ることもあります。

💬 unknownとは？

unknownは、「どんな型がくるかわからないけど、あとでしっかり調べる」ために使う型です。

let data: unknown = "hello";

if (typeof data === "string") {
  console.log(data.toUpperCase()); // OK
}

ポイント：anyと違って、unknownは勝手に操作できません。
安全に型チェックしてから使う必要があります。

【比較まとめ】どれを使えばいいの？

• null → 意図的に「空っぽ」を表現したいとき
• undefined → 「まだ決まってない」初期状態のとき
• unknown → 「型がわからないけど安全に扱いたい」とき

コードで比較すると一目瞭然！

function getName(id: number): string | null {
  if (id === 0) {
    return null; // わざと空にする
  }
  return "User";
}

let user;
console.log(user); // undefined（まだ何も入っていない）

function fetchData(): unknown {
  return JSON.parse("{}"); // 何が返るかわからないのでunknown
}

まとめ：TypeScriptでは「意図」を伝えることが大事！

TypeScriptは「なぜその型にするのか」をちゃんと考えるのが超重要です！
null、undefined、unknownをうまく使い分けて、バグの少ないコードを書いていきましょう🔥