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

let profile: {} = {}

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

let profile: {} = {}

profile.name = "田中"
profile.age = 23

すると、

image2

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

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

let profile: { name?: string; age?: number } = {}

profile.name = "田中"
profile.age = 23

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

let profile: { name?: string; age?: number } = {}

profile.name = "田中"
profile.age = 23
profile.address = "埼玉県"

image3

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

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

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

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

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

let profile: { [key: string]: string | number } = {}

profile.name = "田中"
profile.age = 23
profile.address = "埼玉県"

image4

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

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

type Profile = {
  name: string
  [key: string]: string | number
}

let profile: Profile = { name: "" }

profile.name = "田中"
profile.age = 23
profile.address = "埼玉県"

image5

ブログ一覧