👀

型の絞りこみ【個人学習まとめ】

に公開
TypeScript
tech

型による絞り込み

特定の条件において、変数の型をより具体的な型へ絞り込むことができます。
TypeScript の型チェッカーに変数の型がもともと指定されていた型や推論された型よりも狭い範囲であることを伝えることができます。
このことを型の絞り込み(Narrowing)と呼び、

  • 代入による絞り込み
  • 型ガード

の 2 種類があります。

Narrowing

代入による型の絞り込み

変数に値を代入する時に、代入される型の値に基づいて変数の型を絞り込むことができます。
実際のコードで確認してみましょう。

let x = Math.random() > 0.1 ? 1 : "こんにちは！";

上記のコードはMath.random()の結果から、0 以上 1 未満の乱数が 0.1 未満かどうかでnumber型またはstring型を x に代入するコードです。
xの型は TypeScript の型推論により、number型またはstring型として推論されます。

では、xに対して、toUpperCaseメソッドを呼び出してみましょう。
toUpperCaseメソッドはstring型に対するメソッドなのでエラーなく呼び出されるはずですが・・・

x.toUpperCase();
→ プロパティ 'toUpperCase' は型 'string | number' に存在しません。プロパティ 'toUpperCase' は型 'number' に存在しません。

エラーとなりました。
原因として TypeScript は変数xはstring型の他にも、number型が代入される可能性があること理解しているのでtoUpperCaseメソッドを呼び出すことができません。かしこい。
しかし、変数xに文字列を代入した場合は、変数xはstring型に絞り込まれるためtoUpperCaseメソッドを呼び出すことが可能になります。

x = "abcdefg";
console.log(x.toUpperCase());
→ ABCDEFG

変数xに数字を代入した場合は、変数xはnumber型に絞り込まれるためnumber型のメソッド(今回はtoFixedメソッド)を呼び出すことができます。

x = 12345.6789;
console.log(x.toFixed());
→ 12346

型ガード

TypeScript は開発者がコードを読むときと同じように、if 分や演算子を理解して型を絞り込むことができます。
if 分などの制御構文を利用して型の安全を保証することを型ガード(Type gurds)と呼びます。
type of type guards

型ガードにはいくつか種類があるので、次回以降の記事で確認してみましょう。

Discussion