01 / 05
値そのものを型にできる
型に書けるのは string のような種類だけじゃない。"あか" のように、値そのものを型として書けるんだ。
こう書くと、その変数には "あか" しか入れられなくなる。1つだけでは使いみちが無いけれど、次のスライドで役に立つよ。
const iro: "あか" = "あか";console.log(iro);実行結果
あか
値のとりうる形をしぼる
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
同じ選択肢を何度も書くのはつらい。章2で覚えた type で名前をつけておこう。
名前がつくと、変数にも引数にも同じ型を使い回せる。あとで選択肢を足すときも、直すのは1か所だけだ。
type Iro = "あか" | "あお";const iro: Iro = "あか";console.log(iro);実行結果
あか
05 / 05
名前をつけた型は、関数の引数にも書ける。すると呼ぶ側がまちがえたときに止まってくれるよ。
ここから書いてみよう。まずは選択肢を | で並べるところから。
type Iro = "あか" | "あお";function nuru(i: Iro): void { console.log(i + "でぬる");}nuru("あか");実行結果
あかでぬる