union型
縦棒で「AまたはB」を書く
ここまでは、1 つの名前に 1 つの型を付けてきました。でも実際のデータには「文字列のときも数値のときもある」ものがあります。ゆめさくの作品 ID がそうです。古い作品は 1 2 のような数値で、新しい作品は "w-001" のような文字列で入っています。
こういうときは、型を縦棒でつなぎます。
TypeScript
let workId: string | number;
workId = "w-001";
workId = 7;この string | number を union 型と呼びます。日本語では合併型ですが、現場ではそのまま union と呼ぶことがほとんどです。読むときは「string または number」と読みます。
書いていない型は入らない
union は「なんでも入る」という意味ではありません。並べた型だけが入ります。
TypeScript
let workId: string | number;
workId = true;
// エラー Type 'boolean' is not assignable to type 'string | number'.any との違いはここです。any は検査そのものを止めますが、union は許す型を自分で決めて、それ以外を止めます。選択肢を広げながら、検査は効いたままにできます。
3 つ以上つなげる
縦棒はいくつでも並べられます。
TypeScript
let cellValue: string | number | boolean;見やすさのために、先頭にも縦棒を置く書き方もよく使われます。意味は同じです。
TypeScript
type CellValue =
| string
| number
| boolean;共通してできることだけができる
union 型の値には、並べたすべての型が持っている操作しかできません。
TypeScript
function show(workId: string | number): string {
return "作品 " + workId;
}文字列との連結は string でも number でもできるので、これは通ります。一方、workId.trim() は number が trim を持っていないので止められます。
TypeScript
function show(workId: string | number): string {
return workId.trim();
// エラー Property 'trim' does not exist on type 'string | number'.
}片方だけの機能を使いたいときは、どちらなのかを先に確かめる必要があります。そのやり方は No.34 で扱います。この回では、まず union を書けるようになるところまでです。
手を動かす
演習では、作品 ID を受け取って見出しを作る関数に型を付けます。ID は数値でも文字列でも来ます。両方を受け取れる型注釈を書いてください。
要件
idは文字列と数値のどちらも受け取れる型にするtitleには文字列の型を付ける- 処理の中身は変えない
入出力例
workHeading(1, "プロフィールサイト") → "#1 プロフィールサイト"
workHeading("w-001", "自己紹介カード") → "#w-001 自己紹介カード"
workHeading(12, "スキル一覧の表") → "#12 スキル一覧の表"
workHeading("draft-9", "配色メモ") → "#draft-9 配色メモ"ヒント
