devlog

フロントエンドエンジニアの技術ブログ

TypeScriptで型定義済みのオブジェクトにプロパティを追加する方法

TypeScriptでは、型が定義されているオブジェクトに追加でプロパティを追加するとエラーが発生します。

type Data = {
  id: number,
  name: 'hoge'
}

const data01: Data = {
  id: 1,
  name: 'hoge',
  created_at: new Date() // Error
}

この場合は、インデックスシグネチャを使用する事で追加のプロパティを付与する事が可能です。

type Data = {
  id: number,
  name: 'hoge',
  [index: string]: any
}

const data01: Data = {
  id: 1,
  name: 'hoge',
  created_at: new Date()
}

注意 オブジェクトの同じ階層にあるプロパティの値は、型が一致している必要があります。例えば、、

type Data = {
  id: number,
  name: 'hoge',
  [index: string]: Date
}

const data01: Data = { // Error
  id: 1,
  name: 'hoge',
  created_at: new Date()
}

この場合は、インデックスシグネチャの値に対応する型としてDate型を指定しています。 しかし、Date型はプロパティのidnameの型として相応しくなくエラーが発生します。 同階層に複数の型が指定されるプロパティがある場合、インデックスシグネチャ側の型定義はUnion Typesとして指定します。

type Data = {
  id: number,
  name: 'hoge',
  [index: string]: Date | string | number
}

const data01: Data = {
  id: 1,
  name: 'hoge',
  created_at: new Date()
}

@ 2019 devlog