error TS7053のエラーが出た時の対処方法 Element implicitly has an 'any' type because expression of type 'string' can't be used to index typeのエラーが出た時の対処方法

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index typeのエラーが出た時の対処方法を紹介します。

その前に、このエラーは下記のようなコードを実行するとおきます。

const favoriteFoods = {
  "yamada": "apple",
  "tanaka": "banana",
  "sato": "orange",
}

const yourName: string = "yamada"
console.log(favoriteFoods[yourName])

実際に起こるエラーはこちらです。

src/index.ts:8:13 - error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ yamada: string; tanaka: string; sato: string; }'.
  No index signature with a parameter of type 'string' was found on type '{ yamada: string; tanaka: string; sato: string; }'.

これは、今回favoriteFoodsだとindexのtypeが何かわからなく、それが原因で起きています。 そのため、favoriteFoodsがどのようなindexを受け取るのかを定義することで回避できます。 例えば、下記のようにしてあげればエラーは出なくなります。

[key: string]: stringとすることでkeyに入る部分はstring型であることを明示します。 そうすることで、indexとして使われる際にはstring型を許容するようになり、buildエラーも無くなります。

interface favoriteFoods {
  [key: string]: string
}

const favoriteFoods: favoriteFoods = {
  "yamada": "apple",
  "tanaka": "banana",
  "sato": "orange",
}

const yourName: string = "yamada"
console.log(favoriteFoods[yourName])

参考: Typescript error: TS7053 Element implicitly has an 'any' type