どちらの型でもいい

01 / 05

「どちらもありうる」を書く

ここまでの型は、どれも「これ1つ」だった。string なら文字列だけ、number なら数値だけだ。

でも現実には、どちらもありうる場所がある。受付の番号を 12 で持つ人と "A12" で持つ人がいる、というような。そんなときに使うのがユニオン型（型を | でつないだもの）だよ。

let bangou: string | number = 12;console.log(bangou);bangou = "A12";console.log(bangou);

実行結果

12
A12

02 / 05

書き方は、型と型のあいだに | を置くだけ。「文字列か数値のどちらか」という意味になる。

つなぐ数は2つでなくてもいい。3つ以上並べてもだいじょうぶだよ。

let atai: string | number | boolean;atai = true;console.log(atai);

実行結果

true

03 / 05

「どちらでもいい」は「なんでもいい」ではないよ。許すのは並べた型だけだ。

string | number と書いた変数に true を入れようとすると、これまでと同じようにはじかれる。

let bangou: string | number = 12;bangou = true;

実行結果

型のエラー: 型 'boolean' を型 'string | number' に割り当てることはできません。

04 / 05

ユニオン型を書くと、TypeScript の態度が変わる。どちらか分からないあいだは、片方にしかできないことをさせてくれない。

toUpperCase() は文字列のメソッドだ。数値には無いので、呼ぼうとすると止められる。

function dasu(m: string | number) {  console.log(m.toUpperCase());}

実行結果

型のエラー: プロパティ 'toUpperCase' は型 'string | number' に存在しません。
  プロパティ 'toUpperCase' は型 'number' に存在しません。

05 / 05

どちらでもできることなら、絞りこまなくてもそのまま書ける。console.log で表示するのは文字列でも数値でもできるから、これは通るよ。

絞りこむ書き方はこの章の後半で出てくる。まずは | でつないで型を書くところから始めよう。

function dasu(m: string | number) {  console.log(m);}dasu("ゆい");dasu(7);

実行結果

ゆい
7