Menu
Coddy logo textTech

リテラル型

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部 — レッスン 33/73。

リテラル型を使用すると、変数を広範なカテゴリではなく、正確で特定の値に制限することができます。任意の文字列を受け入れる代わりに、"left""right""up"、または"down"だけに制限できます。

リテラル型は、その正確な値を型そのものとして使用します。

文字列、数値、または真偽値のリテラル型を作成できます:

let direction: "left" = "left";  // "left" のみが許可されます
let count: 42 = 42;              // 数値の 42 のみが許可されます
let isReady: true = true;        // true のみが許可されます

リテラル型は、ユニオン型と組み合わせることで、許可される値の制御されたセットを作成し、非常に強力になります。これは、方向、ステータスコード、または設定オプションなどのシナリオに最適です:

type Direction = "left" | "right" | "up" | "down";
type Status = "pending" | "approved" | "rejected";

let playerMove: Direction = "up";    // 有効
let orderStatus: Status = "pending"; // 有効
// let invalid: Direction = "diagonal"; // エラー!

このアプローチにより、厳密な型安全性を維持しながら、複数のオプションという柔軟性が得られます。TypeScriptはコンパイル時にタイポや無効な値をキャッチするため、一般的な文字列型を使用するよりもコードの信頼性が高まります。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

challenge icon

チャレンジ

簡単

リテラル型 "left" | "right" | "up" | "down" のための Direction という名前の型エイリアスを作成してください。

リテラル型 "menu" | "playing" | "paused" | "gameover" のための GameState という名前の型エイリアスを作成してください。

リテラル型 "easy" | "medium" | "hard" のための Difficulty という名前の型エイリアスを作成してください。

次に、作成した型エイリアスを使用して以下の変数を宣言してください:

  • Direction 型の playerDirection という名前の変数を宣言し、値 "up" を代入します
  • GameState 型の currentState という名前の変数を宣言し、値 "playing" を代入します
  • Difficulty 型の selectedDifficulty という名前の変数を宣言し、値 "medium" を代入します

Direction 型の direction というパラメータを受け取り、string を返す movePlayer という名前の関数を作成してください。この関数は、"Moving [direction]" という形式のメッセージを返す必要があります。

GameState 型の state というパラメータを受け取り、string を返す updateGameState という名前の関数を作成してください。この関数は、"Game state: [state]" という形式のメッセージを返す必要があります。

作成した変数を使用して関数を呼び出し、結果を出力してください:

  • playerDirection を引数にして movePlayer を呼び出し、その結果を出力します
  • currentState を引数にして updateGameState を呼び出し、その結果を出力します
  • selectedDifficulty の値を出力します

各結果を、上記の指定された順序で個別の行に出力してください。

チートシート

リテラル型は、変数を広範なカテゴリではなく、正確で特定の値に制限します。

let direction: "left" = "left";  // "left"のみが許可されます
let count: 42 = 42;              // 数値の42のみが許可されます
let isReady: true = true;        // trueのみが許可されます

リテラル型を共用体型(Union Types)と組み合わせることで、許可される値の制御されたセットを作成できます:

type Direction = "left" | "right" | "up" | "down";
type Status = "pending" | "approved" | "rejected";

let playerMove: Direction = "up";    // 有効
let orderStatus: Status = "pending"; // 有効

これにより、複数のオプションによる柔軟性を維持しながら、コンパイル時にタイポや無効な値を検出することで型安全性を提供します。

自分で試してみよう

// TODO: ここにコードを書いてください
// Direction、GameState、Difficultyの型エイリアスを作成します
// 型エイリアスを使用して変数を宣言します
// movePlayer関数とupdateGameState関数を作成します
// 関数を呼び出し、結果を出力します
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Introduction To TypeScriptのすべてのレッスン