動かざることバグの如し

近づきたいよ 君の理想に

TypeScriptでElement implicitly has an 'any' type because expression of type 'string'エラー

typescript

環境

  • TypeScript 4

問題

例えば以下のようなサンプルコードがあったとする

function receivedStringValue() : string {
  return 'apple';
}

const fruits = {
  apple: 'りんご',
  banana: 'バナナ',
  melon: 'メロン'
};

const key: string = receivedStringValue();
const value = fruits[key];

が、実はコレだといかのようなエラーになる

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ apple: string; banana: string; melon: string; }'.
No index signature with a parameter of type 'string' was found on type '{ apple: string; banana: string; melon: string; }'.ts(7053)

fruits[key] のkeyの型がわからん、といった感じだろうか

解決方法１

明示的にinterface FruitsKey を作成する。そうすることでfruitsのキーのいずれか来るということがわかりエラーにならなくなる

-const fruits = {
+interface FruitsKey {
+  [key: string]: any;
+}
+
+const fruits: FruitsKey = {
   apple: 'りんご',
   banana: 'バナナ',
   melon: 'メロン'
 };
 
 const key: string = receivedStringValue();
 const value = fruits[key];

解決方法２

keyを key as keyof typeof Foo の形にする。

const fruits = {
   apple: 'りんご',
   banana: 'バナナ',
   melon: 'メロン'
 };

-const value = fruits[key];
+const value = fruits[key as keyof typeof fruits];

解決方法２のほうが簡単だが１の方がfruitのValue側の方も決めれるのでより厳密な定義ができそう？

参考リンク