【TypeScript】インデックスシグネチャとは何ですか?
TypeScript

【TypeScript】インデックスシグネチャとは何ですか?

作成日:2021年07月29日
更新日:2021年08月05日

profileというオブジェクトがあったとします。

ts
let profile: {} = {};

profileオブジェクトに、nameageを入れてみます。

ts
let profile: {} = {};
profile.name = "田中";
profile.age = 23;

すると、

image2

profile.nameprofile.ageにエラーが発生し、『プロパティ 'name' は型 '' に存在しません。』と指摘されました。

profileオブジェクトにnameageの型を指定すれば解決します。

ts
let profile: { name?: string; age?: number } = {};
profile.name = "田中";
profile.age = 23;

さらにaddressを追加すると、どうなるでしょうか。

ts
let profile: { name?: string; age?: number } = {};
profile.name = "田中";
profile.age = 23;
profile.address = "埼玉県";

image3

address がない、と指摘されます。

この場合、インデックスシグネチャを使用すると、追加したい項目が出てきても型指定ができるようになります。

方法は、型指定のところに、[key: keyの型]: 型と書きます。

型は、オブジェクトに入れたい値の型になります。

値は、string 型または number 型なので、string | numberを書きます。

ts
let profile: { [key: string]: string | number } = {};
profile.name = "田中";
profile.age = 23;
profile.address = "埼玉県";

image4

値のエラーが発生しなくなりました。

初めから、特定の値がある場合は、値に型を指定しても問題ありません。

ts
type Profile = {
name: string;
[key: string]: string | number;
};
let profile: Profile = { name: "" };
profile.name = "田中";
profile.age = 23;
profile.address = "埼玉県";

image5

© 2024あずきぱんウェブスタジオ