TypeScript配列インデックスエラー解説

例えば、次のようなコードがあるとします。

const myArray = ['apple', 'banana', 'orange'];
const fruit = myArray['grape']; // Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index

このコードでは、myArrayは文字列の配列であり、fruit変数にmyArrayの要素をインデックス'grape'でアクセスしようとしています。しかし、myArrayの要素の型は文字列であり、'grape'という文字列は配列のインデックスとして使用できません。そのため、TypeScriptはエラーメッセージを出力します。

このエラーを解決するには、次のような方法があります。

1. インデックスの型を配列の要素の型と一致させる:

   const myArray = ['apple', 'banana', 'orange'];
   const fruit = myArray[0]; // OK
   

2. インデックスの型をstring型にして、配列の要素の型をany型にする:

   const myArray: string[] = ['apple', 'banana', 'orange'];
   const fruit = myArray['grape']; // OK, but not recommended
   

TypeScript配列インデックスエラー解説

エラーメッセージの意味

例1: インデックスが文字列の場合

const myArray: string[] = ['apple', 'banana', 'orange'];
const fruit = myArray['grape']; // Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index

この例では、myArrayは文字列の配列ですが、インデックスとして'grape'という文字列を使用しています。TypeScriptは、文字列は配列のインデックスとして使用できないため、エラーが発生します。

const myArray: string[] = ['apple', 'banana', 'orange'];
const fruit = myArray[2]; // OK

この例では、インデックスとして数値の2を使用しています。これは配列の要素の型と一致するため、エラーは発生しません。

例3: インデックスが数値型で定義されている場合

const myArray: string[] = ['apple', 'banana', 'orange'];
const index: number = 2;
const fruit = myArray[index]; // OK

この例では、インデックスを数値型で定義しているため、エラーは発生しません。

エラーを解決する方法

代替方法

最も一般的な方法は、インデックスの型を配列の要素の型と一致させることです。

const myArray: string[] = ['apple', 'banana', 'orange'];
const fruit = myArray[2]; // OK

配列のインデックスは通常数値であるため、インデックスの型をnumber型にすることもできます。

const myArray: string[] = ['apple', 'banana', 'orange'];
const index: number = 2;
const fruit = myArray[index]; // OK

この方法は、インデックスとして文字列を使用したい場合に利用できますが、配列の要素の型がany型になるため、型安全性を損なう可能性があります。

const myArray: string[] = ['apple', 'banana', 'orange'];
const fruit = myArray['grape']; // OK, but not recommended

Mapオブジェクトを使用する

Mapオブジェクトは、キーと値のペアを保持するデータ構造であり、キーとして文字列を使用することができます。

const myMap = new Map<string, string>();
myMap.set('apple', 'red');
myMap.set('banana', 'yellow');
myMap.set('orange', 'orange');

const fruit = myMap.get('grape'); // undefined

Record型を使用する

Record型は、オブジェクトのキーと値の型を指定することができます。

type FruitMap = Record<string, string>;

const myFruitMap: FruitMap = {
  apple: 'red',
  banana: 'yellow',
  orange: 'orange',
};

const fruit = myFruitMap['grape']; // undefined