TypeScript - リテラル型：初級者向けガイド

こんにちは、将来のプログラミングスーパースター！今日は、TypeScriptのリテラル型の興味深い世界に飛び込みます。プログラミングが初めてであっても心配しないでください – この冒険のなかであなたの親切なガイドとしてお手伝いします。このチュートリアルの終わりまでに、リテラル型をプロのように扱えるようになります！

リテラル型とは？

まず、ピザの注文を思い浮かべてみましょう。単に「ピザをください」と言うだけではいけません。サイズを指定する必要があります：小、中、大。TypeScriptにおけるリテラル型は、その具体的なピザサイズと同じです – 変数が持つことができる正確な値です。

文法

リテラル型の文法はシンプルです。指定したい正確な値を使います。基本的な例を見てみましょう：

let pizzaSize: "small" | "medium" | "large";

この場合、pizzaSizeは「small」、「medium」、または「large」のいずれか只能是ります。他の値は一切許されません – 「extra large」や「tiny」などもです！

文字列リテラル型

文字列リテラル型は最も一般的で、理解しやすいです。その名の通り – 変数が持つことのできる特定の文字列です。

例 1: 曜日

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // これも問題ありません
today = "Someday"; // エラー！型 'Someday' は 'DayOfWeek' に割り当てられません。

この例では、DayOfWeekは一週間の七つの曜日のいずれか只能是ります。他の文字列を割り当てようとすると、TypeScriptはあなたを注意します！

例 2: 信号機の色

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
console.log(`The light has changed to ${color}`);
}

changeLight("Green"); // 问题ありません
changeLight("Purple"); // エラー！引数の型 'Purple' は 'TrafficLightColor' に割り当てられません。

ここでは、信号機が有効な色にのみ変わることを確保しています。この通りにはディスコライトは許されません！

数値リテラル型

文字列と同様に、数値リテラル型を作成することもできます。特定の数値に値を制限したいときに非常に便利です。

例 3:サイコロの結果

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`You rolled a ${myRoll}`);

この例では、サイコロが1から6の数値しか振れないことを確保しています。このゲームには装填されたサイコロは一切ありません！

例 4:シャツのサイズ

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // エラー！型 '41' は 'ShirtSize' に割り当てられません。

ここでは、シャツのサイズを特定の数値に制限しています。この店では中間サイズは一切許されません！

組合せリテラル型

異なるリテラル型を組み合わせることで、リテラル型の真の力が発揮されます。

例 5: ゲームキャラクターの状態

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // これは有効です
hero = "Wounded"; // エラー！型 'Wounded' は 'CharacterStatus' に割り当てられません。

このゲームでは、キャラクターは「Alive」、「Dead」、1（生存を意味する）、または0（死亡を意味する）のいずれか只能是ります。テキストとコードの両方の表現を持つようなものです！

リテラル型の使用ケース

リテラル型はさまざまなシーンで非常に便利です。いくつかの例を見てみましょう：

1. 関数パラメータ

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
// リクエストを送信
console.log(`Sending ${method} request to ${url}`);
}

sendRequest("https://api.example.com", "GET"); // 问题ありません
sendRequest("https://api.example.com", "FETCH"); // エラー！引数の型 'FETCH' は 'HttpMethod' に割り当てられません。

HTTPメソッドにリテラル型を使用することで、有効なメソッドのみを使用できるようにします。

2. 設定オブジェクト

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
theme: Theme;
language: Language;
notifications: boolean;
}

const myConfig: AppConfig = {
theme: "dark",
language: "en",
notifications: true
};

リテラル型を使用することで、設定オブジェクトを厳格に作成し、タイポや無効な設定を防ぐことができます。

3. ステートマシン

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
private state: LoginState = "loggedOut";

login() {
this.state = "loggingIn";
// ログインロジックを実行
this.state = Math.random() > 0.5 ? "loggedIn" : "error";
}

logout() {
this.state = "loggedOut";
}

getState(): LoginState {
return this.state;
}
}

ここでは、リテラル型を使用してログインプロセスのさまざまな状態を表現し、状態が事前に定義された値のいずれかであることを確保しています。

メソッド表

以下の表に、カバーした主要なメソッドと概念をまとめます：

メソッド/概念	説明	例
タイプ宣言	リテラル値を使用して新しい型を定義	type DayOfWeek = "Monday" \| "Tuesday" \| ...
変数割り当て	リテラル型を変数に割り当て	let today: DayOfWeek = "Monday";
関数パラメータ	関数パラメータにリテラル型を使用	function sendRequest(method: HttpMethod) {...}
組合せリテラル	異なるリテラル型を組み合わせる	type Status = "Active" \| "Inactive" \| 0 \| 1;
インターフェースプロパティ	インターフェースのプロパティにリテラル型を使用	interface Config { theme: "light" \| "dark" }

そして、ここまでで、あなたのTypeScriptの旅でリテラル型をマスターするためのレベルアップが完了しました！忘れてはならないのは、完璧なピザトッピングを選ぶように、リテラル型も具体的で間違いを防ぐためのものです。引き続き練習を続け、完璧なタイプセーフコードを創作してください！??

Credits: Image by storyset