値のとりうる形をしぼる

INPUT · スライド

決まった値だけを許す

01 / 05

値そのものを型にできる

型に書けるのは string のような種類だけじゃない。"あか" のように、値そのものを型として書けるんだ。

こう書くと、その変数には "あか" しか入れられなくなる。1つだけでは使いみちが無いけれど、次のスライドで役に立つよ。

const iro: "あか" = "あか";console.log(iro);

実行結果

あか

02 / 05

選択肢を `|` で並べる

とりうる値を | で並べると、「このうちのどれか」という型になる。これをリテラル型(値そのものの型)のユニオンと呼ぶよ。

string と書くよりずっと細かく決められる。「色はこの3つしかない」ということを型で言えるんだ。

let iro: "あか" | "あお" | "きいろ";iro = "あお";console.log(iro);

実行結果

あお

03 / 05

打ちまちがえがその場で止まる

リテラル型のうれしいところはここだよ。並べた以外の値を入れると、実行する前にはじかれる。

string と書いていたら通ってしまって、動かしてから「なぜ色が変わらないんだ」と悩むところだ。

let iro: "あか" | "あお";iro = "みどり";

実行結果

型のエラー: 型 '"みどり"' を型 '"あか" | "あお"' に割り当てることはできません。

04 / 05

`type` で名前をつけて使い回す

同じ選択肢を何度も書くのはつらい。章2で覚えた type名前をつけておこう。

名前がつくと、変数にも引数にも同じ型を使い回せる。あとで選択肢を足すときも、直すのは1か所だけだ。

type Iro = "あか" | "あお";const iro: Iro = "あか";console.log(iro);

実行結果

あか

05 / 05

引数に使うと呼ぶ側が守られる

名前をつけた型は、関数の引数にも書ける。すると呼ぶ側がまちがえたときに止まってくれるよ。

ここから書いてみよう。まずは選択肢を | で並べるところから。

type Iro = "あか" | "あお";function nuru(i: Iro): void {  console.log(i + "でぬる");}nuru("あか");

実行結果

あかでぬる