【TypeScript】リテラル型とは何か?実例でわかりやすく解説(メリット、種類、具体例)

TypeScript-TS-prograshi(プロぐらし)-kv TypeScript
記事内に広告が含まれていることがあります。

TypeScriptを使う中で「リテラル型」という用語を聞いたことがあるのではないでしょうか?

これはJavaScriptにはないTypeScript独自の型で、型安全性を一段階引き上げたいなら、リテラル型の習得は避けて通れません

この記事では、リテラル型とは何かやどのようなメリットがあるかを具体的な実例を交えて解説しています。

この記事を読めば、あなたのTypeScriptコードはより堅牢で、保守しやすいものになるでしょう。


リテラル型とは何か?

リテラル型とは、特定の値そのものを型として定義したです。

TypeScriptでは、string型やnumber型のように広すぎる型ではなく、「この変数にはこの文字(または数字)しか入れられない」というように、取り得る値を究極まで絞り込むために使います

TS独自!

リテラル型はJavaScriptには存在しない型です。TypeScript独自の型になります。


リテラルとは何か?

「リテラル (Literal)」は英語で「文字通りの」という意味です。

プログラミングにおいても同様に、文字通りに、直接記述された固定の値を意味する用語です。


リテラル型の種類

リテラル型がとりうる主な種類には以下のようなものがあります。

リテラルの種類説明例 (JavaScriptなど)
数値リテラル数値そのもの。123, 3.14, 0xFF
文字列リテラルクォーテーションで囲まれたテキスト。"Hello", 'World', `Template`
真偽値リテラル真偽を示すキーワード。true, false
配列リテラル配列の要素を括弧で囲んだもの。[1, 2, 3]
オブジェクトリテラルキーと値のペアを波括弧で囲んだもの。{ name: "Taro", age: 30 }
補足

数値リテラルの「0xFF」は16進数の例です。プレフィックスに「0x」をつけてそのあとに16進数を記述します。(0xFF = 255)


リテラル型のメリット

リテラル型の最大のメリットは、コードの安全性と意図の明確さを飛躍的に向上させる点にあります。

1. 型安全性の大幅な向上

リテラル型は、変数や関数の引数が取り得る値を特定の固定値(例: "success", 1, true)に厳しく制限します

これにより、開発者が意図しない値や、スペルミスによる誤った値を渡そうとした場合、実行時ではなくコンパイル時(コードを書いている段階やビルド時)にTypeScriptがエラーとして検知し、未然にバグを防ぐことができます

これにより、予期せぬエラーでアプリケーションがクラッシュするリスクを大幅に減らすことができます。


2. 開発意図の明確化と可読性の向上

関数や変数の型定義にリテラル型を使用することで、「この引数には、この三つの文字列のうちどれかしか来ない」という開発者の意図がコード上で明確になります

これにより、コードを読む人がその制約をすぐに理解でき、コードの可読性(読みやすさ)と保守性(メンテナンスのしやすさ)が向上します。


3. 効率的なコード補完

リテラル型は、IDE(統合開発環境)のオートコンプリート機能(コード補完)をより効果的にします

例えば、type Status = "OK" | "Error"と定義した場合、その型を持つ変数を操作する際に、IDEは"OK""Error"の二つの選択肢だけを提示してくれます。

これにより、入力ミスを減らし、開発効率が向上します。


リテラル型の具体例|どういう場合に使うか?

ユニオン型と一緒に使う

リテラル型は、ユニオン型(|)と組み合わせて使用することが多いです。

これにより、関数が受け付ける値を厳密に制限し、バグを防ぐのに非常に役立ちます。

例えば、以下のように記述した場合、ButtonStyleという変数が受け取れる値は厳密に「primary」「secondary」「danger」のいずれかになります。

type ButtonStyle = "primary" | "secondary" | "danger";


これを、関数の引数の型として指定します。

function createButton(style: ButtonStyle) {
    console.log(`ボタンのスタイルを変更しました: ${style}`);
}


一意の値を厳密に指定する

例えば、APIからのレスポンスを扱う際に、成功時のステータスコード「200」を明確にしたい場合に使えます。

// type SuccessCode は、数値リテラル '200' 以外のいかなる数値も受け付けない
type SuccessCode = 200;

// なお、成功パターンを複数許容する場合はユニオン型を使う
type CommonSuccessCode = 200 | 201 | 204;


具体的には以下のように使います。

interface ApiResponse {
    status: number; // APIからの応答ステータス
    data: unknown;
}

type SuccessCode = 200;

/**
 * 応答ステータスが成功(200)の場合にのみデータを処理する関数。
 * * @param response APIからの応答オブジェクト
 * @param expectedStatus 期待される成功ステータスコード (SuccessCode型)
 */
function processSuccessfulResponse(response: ApiResponse, expectedStatus: SuccessCode): void {
    
    // 応答ステータスが期待される成功コードと一致するかチェック
    if (response.status === expectedStatus) {
        // expectedStatus は型レベルで 200 であることが保証されている

        console.log(`ステータス ${response.status} で成功しました。`);
        //具体的な処理
    } else {
        // 200 以外のステータス(例: 404や500)が来た場合の処理
        console.error(`期待される成功コード ${expectedStatus} ではありませんでした。実際のステータス: ${response.status}`);
    }
}

// --- 使用例 ---

const goodResponse: ApiResponse = { status: 200, data: { user: "Taro" } };
const badResponse: ApiResponse = { status: 404, data: null };

// 呼び出し例1
processSuccessfulResponse(goodResponse, 200);  // 出力: ステータス 200 で成功しました。

// 呼び出し例2
processSuccessfulResponse(badResponse, 200);  // 出力: 期待される成功コード 200 ではありませんでした。実際のステータス: 404

// 呼び出し例3 ※許容しない型の場合
// processSuccessfulResponse(goodResponse, 404); // <- エラーになる
typeとは何か?

typeとは、型エイリアス(typeエイリアス)の定義です。型エイリアスはTypeScriptで非常によく使います。詳細は下記をご参考ください。

> 【TypeScript】typeエイリアス/型エイリアスとは何か?使い方を実例で解説

タイトルとURLをコピーしました