記事一覧に戻る
Web技術

TypeScriptの型ガードを、小さな例から

「この値は何だろう」をコードで確かめる。条件分岐と型の絞り込みを、短い例で整理する。

青い四角にTSの文字を配置したTypeScriptの記事カバー

文字列かもしれないし、数値かもしれない。複数の型を受け取るとき、そのままでは使えない操作がある。条件を確かめて型を絞ると、できることが明確になる。

typeofで、値の種類を確かめる

function formatValue(value: string | number): string {
  if (typeof value === 'number') {
    return value.toFixed(2);
  }

  return value.trim();
}

分岐の中では数値として、分岐を抜けた先では文字列として扱える。条件分岐と制御フローが、型を絞り込む手がかりになる。

型アサーションの前に、確かめる

asでコンパイラに伝えることと、実行時に値を検査することは違う。外から来たデータを扱うなら、本当に期待した形なのか確かめる処理が必要になる。

小さな条件を、読みやすく

条件が複雑になったら、名前のある関数に切り出すことも考える。ただし、型を保証すると宣言するだけでは検査にならない。関数の中身と宣言が一致するように書く。

参考:TypeScript Handbook — Narrowing