【TypeScript】リテラル型の使い方と応用例10選

はじめに

近年、フロントエンド技術の進化と共に、JavaScriptのスーパーセットであるTypeScriptが注目を集めています。

特にTypeScriptの型システムは、JavaScriptの動的型付けの柔軟性を持ちつつ、静的型の安全性を提供することで、多くの開発者から支持を受けています。

その中でも、TypeScriptの「リテラル型」は非常に強力なツールとして知られています。

この記事では、TypeScriptのリテラル型を初心者向けに徹底解説します。

実際のサンプルコードを通して、リテラル型の使い方、その応用例、注意点、そしてカスタマイズ方法まで学んでいきましょう。

TypeScriptのリテラル型を学ぶことで、あなたのコードはより安全性を増し、型の柔軟性も向上します。

この記事を通じて、リテラル型の力を最大限に引き出す手助けができれば幸いです。

●TypeScriptのリテラル型とは

TypeScriptは、JavaScriptのスーパーセットとして開発された言語です。

JavaScriptをベースに、型を持つことでコードの品質を向上させることを目的としています。

その中で、TypeScript独自の型システムの一部として「リテラル型」という型が存在します。

リテラル型は、変数や定数、プロパティなどが取りうる値を1つ、または限定的ないくつかの値のみとする型です。

例えば、ある関数が取り得る引数の文字列を「”red”」「”blue”」「”green”」の3つだけに限定したいときなどに活用します。

この制約は、特定の値のみを許可することで、コードの品質を向上させるとともに、間違いやバグを事前に防ぐことができるのです。

それでは、このリテラル型に関する基本概念から、実際の使い方、応用例について詳しく解説していきます。

○リテラル型の基本概念

TypeScriptのリテラル型は、文字リテラル型、数値リテラル型、真偽値リテラル型の3つの主なカテゴリがあります。

これは、文字列、数値、真偽値のリテラル値を直接型として指定することができることを意味します。

このコードでは、文字リテラル型を使って変数colorの取り得る値を「red」と「blue」の2つに限定しています。

この例では、color変数は「red」または「blue」の文字列しか受け取れないようになっています。

let color: 'red' | 'blue';
color = 'red';   // これは正しい
color = 'green'; // これはエラー

上記のサンプルコードで、color = 'green';という行を追加しようとすると、TypeScriptコンパイラはエラーを返します。

これは、「green」という文字列は、事前に定義されたリテラル型「’red’ | ‘blue’」に合致しないからです。

同様に、数値リテラル型や真偽値リテラル型も、特定の数値や真偽値だけを受け入れる変数や関数の引数を定義する際に利用されます。

実際に、数値リテラル型を利用した変数を定義するサンプルコードは次の通りです。

let score: 100 | 200 | 300;
score = 100;   // これは正しい
score = 400;   // これはエラー

上記のサンプルコードでは、score変数は100, 200, 300のいずれかの数値しか受け取れません。

それ以外の値を代入しようとすると、エラーが発生します。

●リテラル型の使い方

TypeScriptは静的型付けを持つJavaScriptの上位互換言語です。

この強力な型システムにより、コードの品質が向上し、エラーをコンパイル時に検出できるようになります。

その中でも、TypeScriptのリテラル型は非常に便利な型定義の一つです。

リテラル型は、変数やパラメータが取りうる特定の値を限定することができる型です。

具体的には、文字列、数値、真偽値などのリテラルを型として指定することができます。

○サンプルコード1：基本的なリテラル型の定義

// 文字列リテラル型の例
type Color = "red" | "green" | "blue";

// 数値リテラル型の例
type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;

// 真偽値リテラル型はboolean型でカバーされているので、特に定義する必要はありません。

このコードでは、文字列リテラル型を使ってColorという型を定義しています。

この例ではColor型の変数は、"red"、"green"、"blue"の3つの値のいずれかを取ることができます。

同様に、数値リテラル型を使って、サイコロの目を示すDiceValueという型を定義しています。

この型の変数は、1から6のいずれかの値を取ることができます。

こうしたリテラル型を使用することで、変数が取り得る値を明確に制限できるため、予期しない値が入ることを防ぐことができます。

このサンプルコードを利用すると、次のように変数を宣言して利用できます。

let myColor: Color = "red";     // 正常
let myDice: DiceValue = 5;     // 正常

// myColor = "yellow";         // エラー: Type '"yellow"' is not assignable to type 'Color'.
// myDice = 7;                 // エラー: Type '7' is not assignable to type 'DiceValue'.

上記の例では、myColorとmyDiceに正しい値を割り当てると問題ありませんが、定義されたリテラル型の範囲外の値を割り当てようとすると、コンパイルエラーが発生します。

これにより、プログラム内で不正な値が割り当てられるリスクを大幅に減少させることができます。

○サンプルコード2：リテラル型を持つ関数の実装

TypeScriptは、JavaScriptのスーパーセットとしての役割を果たしていますが、TypeScriptが持つ強力な型システムの中で、リテラル型はその特徴的な一部です。

ここでは、リテラル型を使用した関数の実装に焦点を当て、その動作と使用方法を詳細に解説します。

// このコードでは、リテラル型を使って特定の文字列のみを許可する関数を実装しています。
function greeting(time: 'morning' | 'afternoon' | 'evening'): string {
    switch (time) {
        case 'morning':
            return "おはようございます";
        case 'afternoon':
            return "こんにちは";
        case 'evening':
            return "こんばんは";
        default:
            return "指定された時間帯が正しくありません";
    }
}

この例では、関数greetingが定義されており、引数timeには'morning', 'afternoon', 'evening'の3つのリテラル型の値のみを受け取ることができます。

このようにリテラル型を使用することで、関数の引数や返り値などの型をより具体的に制約することが可能となります。

このコードを実際に使用すると、次のようになります。

console.log(greeting('morning'));  // おはようございます
console.log(greeting('afternoon'));  // こんにちは
console.log(greeting('evening'));  // こんばんは
console.log(greeting('night'));  // 指定された時間帯が正しくありません

上記のコードを実行すると、最初の3つのconsole.logの出力結果はそれぞれ「おはようございます」「こんにちは」「こんばんは」と表示されます。

しかし、4つ目のconsole.logの場合、'night'という許可されていない値を関数に渡しているため、「指定された時間帯が正しくありません」という結果が返されることになります。

このようにリテラル型を使うことで、関数や変数の取りうる値を明確に制約し、安全なコードの記述をサポートすることができます。

特定の値のみを許可することで、予期しない値が入力された際のエラーハンドリングも容易になります。

さらに、このようなリテラル型を活用することで、コードの可読性や保守性も向上します。

他の開発者がコードを見たときに、どのような値が許容されているのか、一目で分かるため、誤った値の入力や不要なデバッグ作業を減少させることが期待されます。

○サンプルコード3：リテラル型を用いたオブジェクトの定義

TypeScriptでは、特定の固定された値のみを取りうる型を定義するためにリテラル型を使用できます。

ここでは、リテラル型を用いてオブジェクトの定義方法を、実例を交えながら詳しく解説していきます。

リテラル型は、オブジェクトのプロパティに対しても使うことができます。

これにより、そのプロパティが取り得る値を厳密に制限することが可能となります。

下記のサンプルコードでは、vehicleというオブジェクトを定義しています。

この例では、typeプロパティは"car"または"bicycle"の文字列リテラルのみを取ることができるように設定されています。

type VehicleType = "car" | "bicycle";

const vehicle: { type: VehicleType, wheels: number } = {
    type: "car",
    wheels: 4
};

このコードでは、VehicleTypeという型を"car" | "bicycle"という文字列リテラルのユニオン型として定義しています。

次に、そのVehicleTypeを使ってvehicleオブジェクトのtypeプロパティの型として指定しています。

これにより、typeプロパティには"car"または"bicycle"のみを代入できるようになっています。

仮に、typeプロパティに"bus"のようなVehicleTypeに定義されていない値を代入しようとすると、コンパイラはエラーを出力します。

これにより、期待しない値が代入されることを防ぐことができます。

もし上記のサンプルコードに、type: "bus"のような行を追加しようとすれば、TypeScriptのコンパイラは次のようなエラーを出力します。

「Type '"bus"' is not assignable to type 'VehicleType'.」

また、リテラル型は、オブジェクトのメソッドの引数や戻り値の型としても利用することができます。

下記のサンプルコードでは、getVehicleNameというメソッドを定義しており、このメソッドはVehicleTypeを引数として受け取り、対応する車両の名前を文字列として返します。

const vehicleInfo = {
    getVehicleName: (type: VehicleType): string => {
        if (type === "car") {
            return "自動車";
        } else if (type === "bicycle") {
            return "自転車";
        }
        throw new Error("Invalid vehicle type");
    }
};

const name = vehicleInfo.getVehicleName("car");  // "自動車"という文字列を返します。

この例では、getVehicleNameメソッドが、"car"を引数に受け取ると"自動車"、"bicycle"を受け取ると"自転車"という文字列を返します。

引数がこれらの値以外の場合、エラーをスローします。

このように、リテラル型を使うことで、関数やメソッドの引数や戻り値に期待する具体的な値を厳密に制限することができます。

これにより、不正な値が渡されるリスクを大幅に減少させることが可能です。

○サンプルコード4：ユニオン型とリテラル型の組み合わせ

TypeScriptでの型の指定は非常に強力です。

特にリテラル型は、特定の固定値のみを持つことができる変数を定義する際に有効です。

ユニオン型と組み合わせることで、複数のリテラル値のいずれかを持つことができる型を作成することができます。

この組み合わせは、限られた選択肢からの選択をコンパイル時に強制することができるため、安全なコードの作成に役立ちます。

ユニオン型とリテラル型の組み合わせのサンプルコードを紹介します。

// リテラル型の組み合わせ
type Color = "赤" | "青" | "黄";

// 上記のリテラル型を使った関数
function getColorName(color: Color): string {
    return `選択された色は${color}です。`;
}

// 使用例
const myColor: Color = "赤";
console.log(getColorName(myColor));

このコードでは、Colorという型を定義しています。

この型は”赤”、”青”、または”黄”のいずれかの文字列のみを受け入れることができるユニオン型となっています。

つまり、Color型の変数にはこれら3つの値のいずれかしか設定することができません。

次に、このリテラル型を引数にとるgetColorNameという関数を定義しています。

この関数は、Color型の引数を受け取り、その色の名前を含む文字列を返します。

最後に、Color型の変数myColorを定義し、”赤”を設定しています。

そして、getColorName関数を使用して、選択された色の名前をコンソールに出力しています。

上記のコードを実行すると、選択された色に関するメッセージがコンソールに表示されます。

具体的には「選択された色は赤です。」というメッセージが出力されることになります。

●リテラル型の応用例

○サンプルコード5：リテラル型を用いた型の絞り込み

実際のプログラム開発で、特定の文字列や数値だけを許容するような場面は多くあります。

こうした場合、リテラル型を活用することで、型の絞り込みを行うことができます。

例として、ユーザーのロールを「admin」か「user」の2つだけ許容するシステムを考えてみましょう。

type UserRole = 'admin' | 'user';

function getUserInfo(role: UserRole) {
    // ユーザー情報の取得処理
    if (role === 'admin') {
        // adminの情報を取得
    } else {
        // userの情報を取得
    }
}

このコードではUserRoleという型をリテラル型で定義しています。

この例ではroleというパラメータには、’admin’または’user’のいずれかの文字列しか受け取れないことを意味しています。

このようにリテラル型を活用することで、関数やメソッドの引数に期待される値を明確にし、間違った値が入力されることを防ぐことができます。

実際に上記のコードを実行すると、getUserInfo関数は正しくユーザーのロールに基づいた処理を実行します。

‘admin’が指定された場合はadminの情報を取得し、’user’が指定された場合はuserの情報を取得するという動作をします。

こうしたリテラル型の活用は、コードの安全性を向上させるだけでなく、開発者間のコミュニケーションも円滑にする効果があります。

期待する値が明確に定義されていれば、それに基づいて処理を実装することができ、ミスのリスクを大幅に減少させることができます。

○サンプルコード6：条件付き型とリテラル型の組み合わせ

TypeScriptの中でリテラル型と条件付き型を組み合わせることで、非常にパワフルな型定義を行うことができます。

条件付き型を使うことで、特定の条件を満たす時にのみ型を適用させることができ、この機能をリテラル型と組み合わせることで、限定された値の中から条件に合致するものだけを選択するような型を作成することができます。

このコードでは、T が string または number のリテラル型のとき、それぞれ別の型を返す条件付き型を定義しています。

この例では、T が string の場合は StringArray という型を、number の場合は NumberArray という型を返します。

type ConvertType<T> = T extends string ? StringArray : T extends number ? NumberArray : never;

type StringArray = Array<string>;
type NumberArray = Array<number>;

まず、StringArray と NumberArray という2つのシンプルな型を定義しています。

それぞれ文字列の配列と数値の配列を示しています。

次に、ConvertType という条件付き型を定義します。

この型はジェネリック型 T を引数に取り、T が string である場合には StringArray を、number の場合には NumberArray を返します。

どちらの条件も満たさない場合は never 型を返すことで、型の範囲外の値が与えられた場合にエラーとなるようにしています。

上記で定義した ConvertType を実際に使用した例を紹介します。

let stringList: ConvertType<"hello">;  // StringArray型と推論されます。
let numberList: ConvertType<42>;       // NumberArray型と推論されます。

stringList の場合、"hello" という文字列のリテラル型を ConvertType に渡しているため、StringArray 型が適用されます。

同様に、numberList では 42 という数値のリテラル型を渡しているため、NumberArray 型が適用されます。

この方法を利用することで、特定のリテラル型が与えられた時にのみ特定の型を適用する、というような複雑な型定義を実現することができます。

この技術は、特定の条件下でのみ有効な関数やメソッドの定義など、高度な型制約を要求する場面で非常に役立ちます。

○サンプルコード7：リテラル型での関数オーバーロード

TypeScriptは静的型付けの強力なツールとしての「関数オーバーロード」を提供しています。

関数オーバーロードを使用すると、同じ関数名で異なるシグネチャを持つ複数の関数定義を作成することができます。

ここでは、リテラル型を活用して関数オーバーロードを行う方法を紹介します。

// リテラル型を使った関数オーバーロードの定義
function combine(input: 'string', value1: string, value2: string): string;
function combine(input: 'number', value1: number, value2: number): number;

// 関数の実装部分
function combine(input: 'string' | 'number', value1: any, value2: any): any {
    if (input === 'string') {
        return value1 + value2;
    } else {
        return value1 + value2;
    }
}

このコード例において、combine関数はリテラル型を用いて2つのオーバーロードを持っています。それぞれ’string’と’number’のリテラル型を第一引数として受け取ることを想定しています。これにより、関数を呼び出す際の引数の型の組み合わせによって、異なる戻り値の型を持つことができます。

関数オーバーロードの実装部分では、具体的な処理内容を記述します。上記のコードでは、文字列が渡された場合は文字列の連結、数値が渡された場合は数値の加算を行っています。

また、関数オーバーロードは、さまざまな場面で応用することができます。例えば、異なる型の引数を受け取って、それに応じて異なる処理を行う関数を作成する場合などに活用することができます。

// リテラル型と関数オーバーロードを組み合わせた応用例
function display(input: 'upper', value: string): string;
function display(input: 'lower', value: string): string;

function display(input: 'upper' | 'lower', value: string): string {
    if (input === 'upper') {
        return value.toUpperCase();
    } else {
        return value.toLowerCase();
    }
}

この応用例では、display関数は2つのオーバーロードを持っており、それぞれのリテラル型の値に応じて、文字列を大文字または小文字に変換して返します。

このように関数オーバーロードを活用することで、関数の振る舞いを柔軟にカスタマイズすることができます。

○サンプルコード8：リテラル型を利用したジェネリクス

TypeScriptのリテラル型は、特定の値のみを取る型を定義するための方法として注目されています。

一方、ジェネリクスは型の再利用性を高めるための仕組みとしてTypeScriptの中心的な役割を果たしています。

これらの２つを組み合わせることで、より柔軟で再利用性の高いコードを書くことが可能となります。

この項目では、リテラル型を用いたジェネリクスの実装例を表し、それに対する詳細な説明とともに、実行結果に関する解説を行います。

// ジェネリクスにリテラル型を利用する例
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const person = {
    name: "Taro",
    age: 30
};

const personName = getProperty(person, "name"); // "Taro"
const personAge = getProperty(person, "age"); // 30

このコードでは、getProperty関数を定義しています。

この関数は、ジェネリクスのTとKを受け取り、KはTのキーのリテラル型として定義されています。

つまり、KはTのプロパティ名を取ることができるリテラル型となります。

関数の内部でobj[key]を返しており、これにより指定されたオブジェクトのプロパティ値を取得して返すことができます。

personオブジェクトを例として、getProperty関数を使用しています。

ここで、getProperty(person, "name")とすることでpersonオブジェクトのnameプロパティの値を取得できるため、変数personNameには"Taro"が代入されます。

同様に、getProperty(person, "age")とすることでageプロパティの値を取得できるため、変数personAgeには30が代入されます。

この例を通して、ジェネリクスを使用した関数の中で、リテラル型を活用することで、型の安全性を保ったまま特定のプロパティを動的に取得することができることを理解することができます。

こちらのコードの実行を行った場合、personNameには"Taro"、personAgeには30という値がそれぞれ代入されることが期待されます。

これにより、安全にオブジェクトの特定のプロパティの値を取得することができます。

○サンプルコード9：リテラル型を使ったタグ付きユニオン

TypeScriptでのコーディングを進めていく中で、特定の文字列や数字のみを許容する「リテラル型」に出会うことが増えてきたのではないでしょうか。

リテラル型をうまく活用することで、より型安全なプログラムを構築することが可能となります。

今回は、リテラル型を使った「タグ付きユニオン」というテクニックを取り上げます。

タグ付きユニオンは、共通のリテラルプロパティ（タグ）を持つ複数の型をユニオン型で組み合わせる方法です。

これにより、特定のタグに応じて型を絞り込むことができるのです。

では、具体的なサンプルコードを見てみましょう。

type Cat = {
    type: "cat";
    meow(): void;
}

type Dog = {
    type: "dog";
    bark(): void;
}

type Animal = Cat | Dog;

function makeSound(animal: Animal) {
    if (animal.type === "cat") {
        animal.meow();
    } else if (animal.type === "dog") {
        animal.bark();
    }
}

このコードでは、CatとDogという二つの型を定義しています。

それぞれにはtypeというリテラルプロパティがあり、このプロパティの値によって動物の種類を識別しています。

そして、これらの型をユニオン型として組み合わせたAnimal型を作成しています。

関数makeSoundは、このAnimal型の引数を受け取り、typeプロパティの値に応じて適切な音を出すメソッドを呼び出す構造となっています。

このように、タグ付きユニオンを用いると、共通のプロパティを持つ異なる型を効果的に管理することができ、型の安全性も向上します。

このサンプルコードを実際に動かすと、次のように動作します。

例えば、猫のオブジェクトをmakeSound関数に渡すと、meowメソッドが呼び出され、猫の鳴き声が出力されます。

一方、犬のオブジェクトを渡すと、barkメソッドが呼び出され、犬の吠え声が出力されることになります。

タグ付きユニオンは、リテラル型とユニオン型の組み合わせによって生まれる強力なテクニックです。

特に、異なる型に共通のプロパティやメソッドが存在する場合、このテクニックを活用することで、型の安全性を一層向上させることができます。

○サンプルコード10：マップ型をリテラル型と組み合わせて使う

TypeScriptには「マップ型」という非常に強力な型が存在しています。

このマップ型を利用することで、オブジェクトのキーや値を元に新しいオブジェクトの型を動的に生成することが可能となります。

特に、このマップ型とリテラル型を組み合わせることで、より緻密で柔軟な型定義を行うことができます。

この章では、マップ型をリテラル型と組み合わせた使い方を詳細に解説していきます。

実際のコードを使って、その利便性と応用の幅を探っていきましょう。

まずは基本的なマップ型の定義から見ていきます。

type MyMappedType = {
    [K in 'a' | 'b' | 'c']: K extends 'a' ? number : string;
};

このコードでは、'a', 'b', 'c'という三つのリテラル型をキーとして持つオブジェクトの型を定義しています。

そして、マップ型を使用して各キーに対応する値の型を動的に割り当てています。

この例では、キーが'a'の場合はその値の型をnumberとし、それ以外の場合はstringとしています。

実際にこの型を使用したオブジェクトを作成してみましょう。

const obj: MyMappedType = {
    a: 123,
    b: "hello",
    c: "world"
};

このオブジェクトobjは、上記の型定義に従っているので、エラーが発生しません。

しかし、例えばaの値を文字列にすると、型の制約に違反するためエラーとなります。

マップ型をリテラル型と組み合わせることで、このようにキーごとに異なる型の値を持たせることができるのです。

これにより、オブジェクトの構造に柔軟性を持たせることができます。

さらに、リテラル型を動的に生成する場面でマップ型を利用することも考えられます。

例として、特定の接頭辞を持つキーだけを抽出するマップ型を考えてみましょう。

type PrefixKeys<T, P extends string> = {
    [K in keyof T as K extends `${P}${infer Rest}` ? Rest : never]: T[K];
};

type MyObject = {
    applePrice: number;
    orangePrice: number;
    bananaWeight: string;
    grapeWeight: string;
};

type PriceKeys = PrefixKeys<MyObject, "apple">; // { Price: number }

このPrefixKeysというジェネリクス型は、指定されたオブジェクトTのキーの中から、指定された接頭辞Pを持つものだけを抽出し、その接頭辞を取り除いた新しいキーを持つオブジェクトの型を生成します。

上記の例では、MyObjectから"apple"という接頭辞を持つキーを抽出し、その結果をPriceKeysという型として取得しています。

このように、マップ型とリテラル型を組み合わせることで、非常に高度な型操作を行うことができるのです。

●注意点と対処法

TypeScriptのリテラル型を使用する際には、多くの利点がありますが、一方で注意すべき点や制約も存在します。

ここでは、リテラル型を用いた開発の中でよく出くわす注意点やエラーへの対処法を詳細に解説していきます。

○リテラル型の制約と限界

TypeScriptのリテラル型は非常に強力なツールですが、使用時には次のような制約や限界があります。

❶型の狭さ

リテラル型は特定の値のみを許容するため、予期しない値が来た場合にエラーが発生します。

これは強固な型の安全性を保つための仕組みですが、柔軟性を求める場合には不向きと言えるでしょう。

❷拡張の難しさ

一度定義したリテラル型は、後から簡単には拡張することが難しい場合があります。

type Color = "red" | "green" | "blue";
// これを後から "yellow" を追加したい場合、型の再定義が必要になる。

❸多用による複雑さ

リテラル型を多用することで、コードが冗長となる恐れがあります。

適切なバランスで使用することが重要です。

これらの制約や限界を知っておくことで、リテラル型の効果的な使用が可能となります。

○エラーへの対処法とヒント

リテラル型を使用する際に発生するエラーの一例と、それに対する対処法を以下に示します。

❶不正な値の代入

リテラル型で定義した型以外の値を代入しようとすると、TypeScriptはエラーを発生させます。

このコードではColor型を使って"yellow"を代入しようとしています。

この例ではColor型に"yellow"は含まれていないため、エラーとなります。

type Color = "red" | "green" | "blue";
let myColor: Color = "yellow";  // エラー: Type '"yellow"' is not assignable to type 'Color'.

対処法：型を再定義するか、適切な値を代入します。

❷関数の引数や戻り値としての使用

リテラル型を関数の引数や戻り値として使用する場合、関数内で予期しない値を扱おうとするとエラーが発生する可能性があります。

このコードでは、getColorName関数がリテラル型Colorを引数にとっています。

この例では"purple"を関数に渡そうとしているため、エラーが発生します。

type Color = "red" | "green" | "blue";
function getColorName(color: Color) {
    return color;
}
getColorName("purple");  // エラー: Argument of type '"purple"' is not assignable to parameter of type 'Color'.

対処法：適切な引数を渡すか、関数の型定義を見直します。

これらのエラーに対する対処法を知っておくことで、リテラル型を用いた開発の効率を高めることができます。

●リテラル型のカスタマイズ方法

TypeScriptにおけるリテラル型のカスタマイズについての説明を行います。

カスタマイズとは、既存のリテラル型をさらに具体的にする、あるいは、柔軟性を持たせるためのテクニックを指します。

○拡張と制約の追加

リテラル型は非常に単純で、特定の固定値だけを取りうる型を指します。

しかし、場合によっては、あるリテラル型を拡張したり、制約を追加したりする必要が出てきます。

このコードでは、リテラル型の制約を強化する方法を表しています。

まず、Colorというリテラル型を定義していますが、その後に新たな色を追加する場面を想定しています。

// 初めに定義されたリテラル型
type Color = "red" | "blue" | "yellow";

// さらに新しい色を追加したい場合
type ExtendedColor = Color | "green";

この例では、ExtendedColorという新しい型は、元々のColorに含まれる色に加えて、”green”という値も取りうるようになりました。

○リテラル型を動的に生成するテクニック

リテラル型は固定値のみを取りうると説明しましたが、TypeScriptのテンプレートリテラル型を使用することで、動的にリテラル型を生成することも可能です。

このコードでは、テンプレートリテラル型を使って、"px"や"em"のような単位を持つ文字列のリテラル型を生成しています。

その結果として、特定の数値の後に単位が続く形式の文字列をリテラル型として定義することができます。

type Size = `${number}px` | `${number}em`;

// 以下のような値を取りうる
const smallSize: Size = "10px";
const largeSize: Size = "2em";

上の例では、Sizeという型は、数字の後に"px"または"em"が続く文字列のみを取りうる型として定義されています。

したがって、"10px"や"2em"のような文字列はSize型の変数として使用することができますが、"10kg"のような文字列はエラーとなります。

まとめ

TypeScriptは、JavaScriptのスーパーセットとして、静的型付けの機能を提供しており、リテラル型はその中で非常に強力な機能となっています。

リテラル型を使うことで、変数や関数の引数、戻り値などの具体的な値を限定的に指定できるようになり、型安全性を一層強化することができます。

TypeScriptのリテラル型は、初心者から上級者まで、多くの開発者にとって有益なツールとなるでしょう。

今回学んだ知識をベースに、リテラル型を効果的に活用し、より高品質なアプリケーションの開発を進めていきましょう。