リテラル型
値そのものを型として書く
型名の代わりに、値をそのまま書けます。
TypeScript
let category: "web";
category = "web";
category = "design";
// エラー Type '"design"' is not assignable to type '"web"'."web" という型は、"web" という文字列 1 つだけを許す型です。これをリテラル型と呼びます。リテラルとは、コードに直接書いた値そのもののことです。
これだけだと使い道がありませんが、前回の union と組み合わせると一気に実用になります。
union にすると選択肢の一覧になる
ゆめさくの作品には、カテゴリが 3 つあります。Web 制作、デザイン、ライティングの 3 つです。これを string で持つと、こう書けてしまいます。
TypeScript
let category: string = "desgin";打ち間違いですが、string から見れば立派な文字列なので何も起きません。表示のときになって初めて、どのカテゴリにも当てはまらないと気づきます。
リテラル型を union で並べると、選べる値そのものを型にできます。
TypeScript
type WorkCategory = "web" | "design" | "writing";
let category: WorkCategory = "design";
category = "desgin";
// エラー Type '"desgin"' is not assignable to type 'WorkCategory'.打ち間違いが、実行する前に止まりました。
エディタが候補を出してくれる
もう 1 つの効果があります。WorkCategory の値を書こうとすると、エディタが "web" "design" "writing" を候補として出します。
TypeScript
function setCategory(category: WorkCategory): void {
console.log(category);
}
setCategory("writing");何を渡せばよいかを覚えておく必要がなくなります。型が仕様書の役をしてくれる、というのはこういうことです。
数値や真偽値でも書ける
リテラル型は文字列だけのものではありません。
TypeScript
type Rating = 1 | 2 | 3 | 4 | 5;
type AlwaysTrue = true;評価の星の数のように、取りうる値が決まっているものは同じ形で書けます。
手を動かす
演習では、カテゴリを受け取って日本語のラベルを返す関数を書きます。中身の分岐はすでに書いてあるので、カテゴリの型を自分で定義して、引数に付けてください。定義した型に無い文字列を渡そうとすると、その場で止まります。
要件
WorkCategoryという型エイリアスを定義する- 許す値は
"web""design""writing"の 3 つだけにする - 引数
categoryにWorkCategoryを付ける
入出力例
categoryLabel("web") → "Web制作"
categoryLabel("design") → "デザイン"
categoryLabel("writing") → "ライティング"ヒント
編集 ゆめさく編集部