ターゲット JavaScript バージョンを ES6 以上に設定する

2024-04-14

TypeScript での "Property 'includes' does not exist on type 'string[]'" エラーの詳細解説と解決策

TypeScript コードで includes メソッドを使用しようとした際に、"Property 'includes' does not exist on type 'string[]'" というエラーが発生することがあります。これは、TypeScript が静的型付けを採用しているため、includes メソッドが string[] 型に定義されていないことを検知し、エラーとして報告しているためです。

原因

includes メソッドは ECMAScript 6 (ES6) で導入された機能であり、TypeScript バージョン 1.7 以降でサポートされています。しかし、TypeScript のコンパイラは、設定されているターゲット JavaScript バージョンに基づいてコードを解析します。そのため、ターゲット JavaScript バージョンが ES6 よりも低い場合、includes メソッドは認識されず、エラーが発生します。

解決策

このエラーを解決するには、以下のいずれかの方法を試すことができます。

ターゲット JavaScript バージョンを ES6 以上に設定する

tsconfig.json ファイルで target プロパティを設定することで、ターゲット JavaScript バージョンを指定できます。以下のように設定することで、ES6 以上の機能を利用可能になります。

{
  "compilerOptions": {
    "target": "es6"
  }
}

indexOf メソッドを使用する

includes メソッドと同等の機能を提供する indexOf メソッドを使用することができます。以下のコードは、includes メソッドを使用するコードを indexOf メソッドを使用して書き換えたものです。

const fruits = ["apple", "banana", "orange"];
const searchValue = "banana";

if (fruits.indexOf(searchValue) !== -1) {
  console.log(`${searchValue} is found in the fruits array.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

Polyfill を使用する

ES6 以前の JavaScript 環境でも includes メソッドを使用できるように、Polyfill を利用することができます。Polyfill は、ブラウザがサポートしていない機能を補うための JavaScript ライブラリです。

補足

TypeScript バージョン 2.4 以降では、lib プロパティを使用して、特定の JavaScript ライブラリ (例: ES6) の機能を自動的にインポートすることができます。
Babel や webpack などのツールを使用している場合は、これらのツールが ES6 などの機能をトランスパイルするように設定する必要があります。

上記以外にも、includes メソッドを使用する前に、配列の型を明確に定義することで、このエラーを回避することができます。

const fruits: string[] = ["apple", "banana", "orange"];
const searchValue: string = "banana";

if (fruits.includes(searchValue)) {
  console.log(`${searchValue} is found in the fruits array.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

TypeScript サンプルコード： includes メソッドと indexOf メソッドの比較

このサンプルコードでは、includes メソッドと indexOf メソッドを使用して、配列内に特定の要素が存在するかどうかを確認する方法を比較します。

例

以下のコードは、fruits という配列に "apple", "banana", "orange" という要素が含まれているかどうかを確認するものです。

const fruits = ["apple", "banana", "orange"];
const searchValue = "banana";

// includes メソッドを使用する
if (fruits.includes(searchValue)) {
  console.log(`${searchValue} is found in the fruits array.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

// indexOf メソッドを使用する
const index = fruits.indexOf(searchValue);
if (index !== -1) {
  console.log(`${searchValue} is found in the fruits array at index ${index}.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

出力

banana is found in the fruits array.
banana is found in the fruits array at index 1.

解説

includes メソッドは、配列内に特定の要素が存在するかどうかを 真偽値 で返します。要素が存在する場合は true、存在しない場合は false を返します。
indexOf メソッドは、配列内に特定の要素が存在するかどうかを確認し、存在する場合 その要素のインデックス番号 を返します。要素が存在しない場合は -1 を返します。

一般的には、以下の条件に基づいて、どちらのメソッドを使用するかを選択します。

要素が存在するかどうかだけを確認したい場合: includes メソッドを使用します。
要素が存在するかどうかだけでなく、その要素のインデックス番号も知りたい場合: indexOf メソッドを使用します。

includes メソッドは ES6 で導入された機能であり、TypeScript バージョン 1.7 以降でサポートされています。
indexOf メソッドは ES5 で導入された機能であり、すべての JavaScript 環境で利用可能です。

このサンプルコード以外にも、includes メソッドと indexOf メソッドの使い分けに関する情報は、以下のリソースを参照することができます。

TypeScript で配列に要素が含まれているかどうかを確認するその他の方法

for ループを使用する

最も基本的な方法は、for ループを使用して配列内の各要素を順に調べ、一致する要素を探すというものです。

const fruits = ["apple", "banana", "orange"];
const searchValue = "banana";

let isFound = false;
for (const fruit of fruits) {
  if (fruit === searchValue) {
    isFound = true;
    break;
  }
}

if (isFound) {
  console.log(`${searchValue} is found in the fruits array.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

長所:

シンプルで分かりやすい

ループ処理が必要なため、他の方法と比べてパフォーマンスが劣る場合がある

some メソッドは、配列内の要素に対して指定した条件を満たす要素が 1つでも存在するかどうか を true または false で返します。

const fruits = ["apple", "banana", "orange"];
const searchValue = "banana";

const isFound = fruits.some(fruit => fruit === searchValue);

if (isFound) {
  console.log(`${searchValue} is found in the fruits array.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

簡潔でエレガントな記述が可能
for ループよりもパフォーマンスが優れている場合がある

要素が存在するかどうかだけでなく、その要素が何番目の要素であるかを知ることはできない

find メソッドは、配列内の要素に対して指定した条件を満たす 最初の要素 を返します。要素が見つからない場合は undefined を返します。

const fruits = ["apple", "banana", "orange"];
const searchValue = "banana";

const foundFruit = fruits.find(fruit => fruit === searchValue);

if (foundFruit) {
  console.log(`${searchValue} is found in the fruits array.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}

const fruits = ["apple", "banana", "orange"];
const searchValue = "banana";

const index = fruits.findIndex(fruit => fruit === searchValue);

if (index !== -1) {
  console.log(`${searchValue} is found in the fruits array at index ${index}.`);
} else {
  console.log(`${searchValue} is not found in the fruits array.`);
}