TypeScriptで輝くインデックス型の完全ガイド

この記事ではTypeScriptの素晴らしい特性であるインデックス型について紹介します。

これは文字通り型の「インデックス」を操作するためのものです。
多くの場面で役立つので一緒に見ていきましょう！

インデックス型とは何か

まず初めに インデックス型 とは何かを簡単に説明します。

type MyType = {
    [index: string]: number;
};

このコードはキーが文字列で値が数値のオブジェクト型を定義しています。

[index: string] がキー、そして number がそのキーに対応する値の型を表します。
つまり、この MyType は任意の文字列キーと数値を持つオブジェクトを表す型になります。

では、実際にこれを使ってみましょう。

let obj: MyType = {
    apple: 1,
    banana: 2,
    cherry: 3,
};

console.log(obj.apple); // 1
console.log(obj.banana); // 2
console.log(obj.cherry); // 3

見ての通り obj は MyType 型のインスタンスとなり、任意の文字列キーに数値を割り当てることができます。

そして、それらのキーを通じて値にアクセスできます。
まるで魔法のようですね！

インデックスシグネチャ

次に インデックスシグネチャ について説明します。

type IndexSigType = {
    [key: string]: any;
};

これはすべてのプロパティキーが文字列で、それらのプロパティ値が任意の型であることを示す型です。

具体的な例を見てみましょう。

let myObj: IndexSigType = {
    name: "Alex",
    age: 30,
    isProgrammer: true,
};

console.log(myObj.name); // "John"
console.log(myObj.age); // 30
console.log(myObj.isProgrammer); // true

このように myObj は名前、年齢、そしてプログラマーであるかどうかといった情報を保持しています。

そしてこれらすべての情報に文字列キーを通じてアクセスすることができます。
すごいですね！これがTypeScriptのインデックス型の力です。

インデックス型でキーを制限する

すべての文字列をキーとするのではなく、特定のキーのみを許可 したい場合もあると思います。
そんな場合はインデックス型でキーを制限する事ができます。

type Fruit = 'apple' | 'banana' | 'cherry';

type FruitType = {
    [K in Fruit]?: number;
};

ここでは、まず Fruit という型を定義して、それが取り得る値を apple、banana 、cherry のいずれかに制限しています。

次に FruitType というインデックス型を定義してそのキーを Fruit 型、つまり先ほど定義した3つの文字列のいずれかに限定しています。

これによって以下のようなオブジェクトを作成することができます。

let fruitCount: FruitType = {
    apple: 10,
    banana: 20,
    cherry: 30,
};

console.log(fruitCount.apple); // 10
console.log(fruitCount.banana); // 20
console.log(fruitCount.cherry); // 30

このように fruitCount オブジェクトのキーは apple 、banana、cherry のいずれかに制限されて、それぞれのキーには数値が割り当てられています。

また、?: を使って各キーをオプショナルにしているため全てのキーを必ず持つ必要はありません。

インデックス型は文字列や数値のキーを持つオブジェクトを表現するために使用されるものであり、TypeScriptの型システムが提供する豊富な機能の一部です。

ここまで読んでいただきありがとうございました！

TypeScriptでオブジェクトをコピーする方法をわかりやすく解説

TypeScriptのオブジェクトコピー法を学ぼう！参照渡し、シャローコピー、ディープコピーの違いを詳解します。

gizanbeak.com

Gizanbeak