🛞

【TypeScript】インデックスシグネチャのプロパティが含まれる型で他プロパティの型設定

に公開

概要

TypeScriptではインデックス型 (index signature)の機能を使用して、可変のキー項目の型を作ることができます。このインデックスシグネチャを使用したプロパティと通常のプロパティを設定した時に、少しハマったことがあったのでメモ書きします。

前提

  • 使用したTypeScriptのバージョンは5.9.3です。

ハマったこと

以下の通り、インデックスシグネチャのvalue側の型と異なる型を他項目で設定すると、型エラーとなります。

type MyType = {
  [key: string]: number;
  name: string; // これは型エラー
};

原因と対処

TypeScript Handbook の "Index Signatures"で紹介されていますが、「While string index signatures are a powerful way to describe the “dictionary” pattern, they also enforce that all properties match their return type.」とのことで、インデックスシグネチャに設定した型に他プロパティの方も引きずられるそうです。
したがって以下のようにインデックスシグネチャの型へ、他プロパティで使用されうる型も設定する必要があります。

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

Discussion