文字列リテラル型と数値リテラル型
リテラル型を使って、値を特定の文字列や数値に限定します。
「文字列リテラル型と数値リテラル型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
リテラル型とは
ほとんどの型は、値の集合を表します。string は任意の文字列を、number は任意の数値を意味します。リテラル型は、その範囲を 1 つの正確な値に絞り込みます。
'north' 型で許可されるのは文字列 'north' だけで、それ以外は許可されません。リテラル型を使うと、型システム内で許可する値の正確で有限な集合をモデル化できます。
let dir: 'north' = 'north';
console.log(dir);
// dir = 'south'; // Error: not assignable to type 'north'文字列リテラルの共用体
リテラル 1 つだけでは、あまり便利ではありません。| で複数のリテラルを組み合わせて、リテラルの共用体を作成します。これは、固定された選択肢の集合をモデル化する慣用的な方法です。
以下の Direction は、4 つの正確な文字列のいずれか 1 つにしかなりません。
type Direction = 'north' | 'south' | 'east' | 'west';
let heading: Direction = 'east';
console.log('Heading:', heading);
heading = 'west';
console.log('Now:', heading);無効な値を拒否する
リテラルの共用体の強みは、許可された集合の外側にある値をコンパイラーが拒否することです。タイプミスや無効な選択肢が、実行時のバグではなくコンパイル時エラーになります。
type Direction = 'north' | 'south' | 'east' | 'west';
let heading: Direction = 'north';
console.log(heading);
// heading = 'up'; // Error: '"up"' is not assignable to 'Direction'関数パラメーターとしてのリテラル
特定の値だけを受け取る関数パラメーターには、リテラルの共用体を使用します。呼び出し側では自動補完が利用でき、無効な値を渡すことも防止されます。
type Direction = 'north' | 'south' | 'east' | 'west';
function move(dir: Direction): string {
return 'Moving ' + dir;
}
console.log(move('south'));
// console.log(move('left')); // Error数値リテラル型
リテラル型は文字列専用ではありません。正確な数値も使用できます。典型的な例は 6 面体のサイコロで、出た目は 1 から 6 のいずれかでなければなりません。
type Dice = 1 | 2 | 3 | 4 | 5 | 6;
function roll(): Dice {
return (Math.floor(Math.random() * 6) + 1) as Dice;
}
console.log('Rolled:', roll());パラメーター内の数値リテラル
数値リテラルの共用体を使うと、入力を正確な数値の集合に制限できます。品質レベル、HTTP に似たコード、グリッドサイズなどに最適です。
type Quality = 1 | 2 | 3;
function setQuality(level: Quality): void {
console.log('Quality set to', level);
}
setQuality(2);
// setQuality(5); // Error: 5 is not 1 | 2 | 3文字列リテラルと数値リテラルの組み合わせ
共用体では、種類の異なるリテラルを組み合わせることもできます。名前付きのプリセットまたは生の値のどちらかを受け取る API で便利です。
type Size = 'small' | 'large' | 0 | 100;
function resize(s: Size): void {
console.log('Resizing to', s);
}
resize('small');
resize(100);真偽値リテラル型
真偽値にもリテラル型があります。true と false は値であると同時に型でもあります。完全な boolean 型は、実際には true | false です。
type AlwaysOn = true;
let enabled: AlwaysOn = true;
console.log('Enabled:', enabled);
// enabled = false; // Error: false not assignable to trueリテラルによるドキュメント性の向上
リテラルの共用体は、そのままドキュメントにもなります。type Status = 'idle' | 'loading' | 'done' を読めば、考えられるすべての状態がすぐに分かります。推測したり、コード全体にマジック文字列を散在させたりする必要はありません。
type Status = 'idle' | 'loading' | 'done';
function render(s: Status): string {
return 'State is: ' + s;
}
console.log(render('loading'));リテラルと他の型の組み合わせ
共用体では、リテラル型とより広い型を組み合わせることもできます。よくあるパターンが 'auto' | number で、特別なキーワード 'auto' または任意の数値を意味します。
type Width = 'auto' | number;
function setWidth(w: Width): void {
console.log('Width:', w);
}
setWidth('auto');
setWidth(320);名前付き定数としてのリテラル
リテラル型は名前付き定数と組み合わせると特に効果的です。型を一度定義してどこでも再利用でき、安全にリファクタリングできます。コンパイラーがすべての使用箇所の一貫性を保ちます。
type Theme = 'light' | 'dark';
const DEFAULT_THEME: Theme = 'dark';
function applyTheme(t: Theme): void {
console.log('Applying', t, 'theme');
}
applyTheme(DEFAULT_THEME);理解度チェック
リテラル型についての理解を確認しましょう。
まとめ: リテラル型
次のことを学びました。
- リテラル型は、
'north'や6のような 1 つの正確な値を表します。 - リテラルを
|で組み合わせると、許可する値の有限な共用体を作成できます。 - 文字列、数値、真偽値で使用でき、
'auto' | numberのように、より広い型と組み合わせることもできます。 - 関数パラメーターとして使用すると、自動補完が利用でき、コンパイル時に無効な入力を拒否できます。
次は、TypeScript がリテラル型と拡大された型のどちらを選ぶかを見ていきます。
type Direction = 'north' | 'south' | 'east' | 'west';
type Dice = 1 | 2 | 3 | 4 | 5 | 6;
function describe(d: Direction, n: Dice): string {
return 'Go ' + d + ' ' + n + ' steps';
}
console.log(describe('north', 3));よくある質問
「文字列リテラル型と数値リテラル型」レッスンは無料ですか？
はい。「文字列リテラル型と数値リテラル型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「文字列リテラル型と数値リテラル型」で何を学びますか？
リテラル型を使って、値を特定の文字列や数値に限定します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「文字列リテラル型と数値リテラル型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 文字列リテラル型と数値リテラル型
- 真偽値リテラルとリテラル推論
- as constによるconstアサーション
- リテラルをユニオンにまとめる