本文へスキップ
BecomeCoder

TypeScriptコース · 第4章 型を組み合わせる · レッスン15

any / unknown / never の使い分け

ブラウザで完結

導入

第1章で anyunknown の基本を学びました。ここでは実務でよく効く「網羅性チェック」の道具として never 型を学び、3つの型の使い分けを整理します。

説明

おさらいです。any は型チェックを放棄する型なので極力避け、型が決まらない値には unknown を使い、使う前に必ず型を絞り込みます。

never は「絶対に値が入らない」ことを表す型です。例外を投げて必ず終了する関数の戻り値によく使われます。

function fail(message: string): never {
  throw new Error(message);
}

never のもう1つの使いどころが、switch 文の網羅性チェックです。すべてのパターンを処理しきれているかをコンパイル時に確認できます。

type Shape = "circle" | "square" | "triangle";

function describe(shape: Shape): string {
  switch (shape) {
    case "circle":
      return "丸";
    case "square":
      return "四角";
    case "triangle":
      return "三角";
    default: {
      const check: never = shape;   // すべてのケースを網羅していれば shape は never になる
      return check;
    }
  }
}
console.log(describe("triangle"));

もし Shape"star" を追加して、switch に対応する case を足し忘れると、default の中で shapenever に絞り込めなくなり("star" が残ってしまうため)、const check: never = shape; の行が型エラーになります。これにより「対応漏れ」をコンパイル時に検知できます。

やってみよう

Shape"star" を追加し、switchcase "star": を足さないままにしてみましょう。const check: never = shape; がどんな意味を持つ行なのか、コードを目で追って確認してみてください。

演習

上の describe 関数を使って、describe("triangle") の結果を console.log() で表示してください。

ヒント1を見る

switch の各 case で対応する日本語の文字列return します。

ヒント2を見る

console.log(describe("triangle")); と書きます。

実際に動かしてみよう

下のエディタにTypeScriptを書いて「実行」を押すと、その場でJavaScriptに変換してブラウザ内で実行し、出力が表示されます。本文の例をそのまま試したり、型注釈を書き換えたりしてみましょう(console.log の結果が下に出ます。初回だけコンパイラの読み込みに少し時間がかかります)。

TypeScript — ブラウザ内で実行

TypeScriptコンパイラ(同梱)でTS→JSに変換してから実行する学習用環境を読み込みます(初回のみコンパイラの読み込みに少し時間がかかります)。
スクロールして表示された時点でも自動で読み込まれます。