TypeScript
【TypeScript】インデックスシグネチャとは何ですか？
作成日：2021年07月29日
更新日：2021年08月05日
profileというオブジェクトがあったとします。
ts
let profile: {} = {};
profileオブジェクトに、nameとageを入れてみます。
ts
let profile: {} = {};
profile.name = "田中";
profile.age = 23;
すると、
profile.nameとprofile.ageにエラーが発生し、『プロパティ 'name' は型 '' に存在しません。』と指摘されました。
profileオブジェクトにnameとageの型を指定すれば解決します。
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 = "埼玉県";
address がない、と指摘されます。
この場合、インデックスシグネチャを使用すると、追加したい項目が出てきても型指定ができるようになります。
方法は、型指定のところに、[key: keyの型]: 型と書きます。
型は、オブジェクトに入れたい値の型になります。
値は、string 型または number 型なので、string | numberを書きます。
ts
let profile: { [key: string]: string | number } = {};
profile.name = "田中";
profile.age = 23;
profile.address = "埼玉県";
値のエラーが発生しなくなりました。
初めから、特定の値がある場合は、値に型を指定しても問題ありません。
ts
type Profile = {
name: string;
[key: string]: string | number;
};
let profile: Profile = { name: "" };
profile.name = "田中";
profile.age = 23;
profile.address = "埼玉県";
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら（Udemyの外部サイトへ遷移します）
