union型｜コードで実践 - ゆめさくコード

縦棒で「AまたはB」を書く

ここまでは、1 つの名前に 1 つの型を付けてきました。でも実際のデータには「文字列のときも数値のときもある」ものがあります。ゆめさくの作品 ID がそうです。古い作品は 1 2 のような数値で、新しい作品は "w-001" のような文字列で入っています。

こういうときは、型を縦棒でつなぎます。

let workId: string | number;

workId = "w-001";
workId = 7;

この string | number を union 型と呼びます。日本語では合併型ですが、現場ではそのまま union と呼ぶことがほとんどです。読むときは「string または number」と読みます。

union は「なんでも入る」という意味ではありません。並べた型だけが入ります。

let workId: string | number;

workId = true;
// エラー Type 'boolean' is not assignable to type 'string | number'.

any との違いはここです。any は検査そのものを止めますが、union は許す型を自分で決めて、それ以外を止めます。選択肢を広げながら、検査は効いたままにできます。

縦棒はいくつでも並べられます。

let cellValue: string | number | boolean;

見やすさのために、先頭にも縦棒を置く書き方もよく使われます。意味は同じです。

type CellValue =
  | string
  | number
  | boolean;

union 型の値には、並べたすべての型が持っている操作しかできません。

function show(workId: string | number): string {
  return "作品 " + workId;
}

文字列との連結は string でも number でもできるので、これは通ります。一方、workId.trim() は number が trim を持っていないので止められます。

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

片方だけの機能を使いたいときは、どちらなのかを先に確かめる必要があります。そのやり方は No.34 で扱います。この回では、まず union を書けるようになるところまでです。

演習では、作品 ID を受け取って見出しを作る関数に型を付けます。ID は数値でも文字列でも来ます。両方を受け取れる型注釈を書いてください。