typeofで絞り込む｜コードで実践

TypeScript型設計：オブジェクト・状態・ジェネリクス

interface、optional property、readonly、union・リテラル型、型ガード、ジェネリクスを扱う全23レッスンの型設計コースです。Profile・Work・ApplicationStateを題材に、APIや画面で扱うデータと状態を壊れにくい型として設計します。既存JavaScriptプロジェクトの移行は次のコースで扱います。

union のままでは片方の機能が使えない

union 型の値には、並べたすべての型に共通する操作しかできません。

TypeScript

function label(updated: string | number): string {
  return updated.trim();
  // エラー Property 'trim' does not exist on type 'string | number'.
}

trim は文字列の機能なので、数値かもしれない値には使わせてもらえません。使いたければ、文字列であることを先に確かめる必要があります。

typeof で確かめると型が狭まる

typeof は JavaScript にもある演算子で、値の種類を文字列で返します。TypeScript はこの判定を読み取って、分岐の中で型を狭めてくれます。

TypeScript

function label(updated: string | number): string {
  if (typeof updated === "string") {
    return updated.trim();
  }
  return updated + "日前";
}

if の中では updated が string に確定しているので trim が使えます。そして if を抜けたあとは、残った number に確定します。可能性を消していくこの働きを絞り込みと呼びます。英語では narrowing です。

絞り込みに使える文字列

typeof が返す値のうち、この段階で使うのは次の 3 つです。文字列なら "string"、数値なら "number"、真偽値なら "boolean" が返ります。

TypeScript

function toText(value: string | number | boolean): string {
  if (typeof value === "boolean") {
    return value ? "公開" : "下書き";
  }
  if (typeof value === "number") {
    return value + "件";
  }
  return value;
}

最後の return value は、string だけが残っているので型注釈どおりに通ります。分岐で消し切ると、注釈を足さなくても辻褄が合うようになります。

消し忘れると教えてくれる

絞り込みが足りないと、その場でエラーになります。

TypeScript

function toText(value: string | number): string {
  if (typeof value === "number") {
    return value + "件";
  }
  return value.toFixed(1);
  // エラー Property 'toFixed' does not exist on type 'string'.
}

数値を先に返してしまったあとに数値の機能を使おうとしたので止まりました。書いた分岐と使っている機能がずれていることを、型が指摘してくれています。

手を動かす

演習では、作品の更新情報を受け取ってラベルを作ります。日付の文字列で来ることも、何日前かの数値で来ることもあります。typeof で分けて、それぞれに合った文字列を返してください。

union のままでは片方の機能が使えない

union 型の値には、並べたすべての型に共通する操作しかできません。

TypeScript

function label(updated: string | number): string {
  return updated.trim();
  // エラー Property 'trim' does not exist on type 'string | number'.
}

trim は文字列の機能なので、数値かもしれない値には使わせてもらえません。使いたければ、文字列であることを先に確かめる必要があります。

typeof で確かめると型が狭まる

typeof は JavaScript にもある演算子で、値の種類を文字列で返します。TypeScript はこの判定を読み取って、分岐の中で型を狭めてくれます。

TypeScript

function label(updated: string | number): string {
  if (typeof updated === "string") {
    return updated.trim();
  }
  return updated + "日前";
}

絞り込みに使える文字列

typeof が返す値のうち、この段階で使うのは次の 3 つです。文字列なら "string"、数値なら "number"、真偽値なら "boolean" が返ります。

TypeScript

function toText(value: string | number | boolean): string {
  if (typeof value === "boolean") {
    return value ? "公開" : "下書き";
  }
  if (typeof value === "number") {
    return value + "件";
  }
  return value;
}

最後の return value は、string だけが残っているので型注釈どおりに通ります。分岐で消し切ると、注釈を足さなくても辻褄が合うようになります。

消し忘れると教えてくれる

絞り込みが足りないと、その場でエラーになります。

TypeScript

function toText(value: string | number): string {
  if (typeof value === "number") {
    return value + "件";
  }
  return value.toFixed(1);
  // エラー Property 'toFixed' does not exist on type 'string'.
}

typeofで絞り込む

union のままでは片方の機能が使えない

typeof で確かめると型が狭まる

絞り込みに使える文字列

消し忘れると教えてくれる

手を動かす

要件

入出力例

ヒント

メモ

typeofで絞り込む

union のままでは片方の機能が使えない

typeof で確かめると型が狭まる

絞り込みに使える文字列

消し忘れると教えてくれる

手を動かす

要件

入出力例

ヒント

メモ