【初心者向け】TypeScriptで「Property 'values' does not exist on type 'ObjectConstructor'」エラーが発生した時の対処法

TypeScriptにおける「Property 'values' does not exist on type 'ObjectConstructor'」エラーの原因と解決策

このエラーは、TypeScriptで Object.values() メソッドを使用しようとしたときに発生します。 Object.values() メソッドは、オブジェクトのすべてのプロパティ値の配列を取得するES2017で導入された新しいメソッドです。

しかし、TypeScriptコンパイラは、デフォルトではES2015までの仕様しか認識していないため、Object.values() メソッドを認識できず、このエラーが発生します。

解決策

このエラーを解決するには、以下の2つの方法があります。

TypeScriptのターゲットをES2017以降に設定する

TypeScriptコンフィギュレーションファイル (tsconfig.json) にて、target プロパティを es2017 または esnext に設定することで、コンパイラがES2017以降の仕様を認識するようにすることができます。

{
  "compilerOptions": {
    "target": "es2017" // または "esnext"
  }
}

Polyfillを使用する

Object.values() メソッドのPolyfillをプロジェクトに追加することで、ブラウザがサポートしていない環境でもこのメソッドを使用することができます。

• @types/webassembly.js パッケージをインストールします。

npm install @types/webassembly.js

• TypeScript 4.1以降では、lib オプションに es2017 または esnext を指定することで、Object.values() メソッドを含むES2017以降の標準ライブラリ機能を自動的に認識するように設定することができます。
• Babelなどのトランスパイラを使用している場合は、トランスパイラ設定でES2017以降のターゲットを設定することで、Polyfillを使用する必要はありません。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2017" // または "esnext"
  }
}

// コード
const obj = { key1: "value1", key2: "value2" };
const values = Object.values(obj); // エラーなし
console.log(values); // ["value1", "value2"]

// index.html
<script src="https://polyfill.io/v3/polyfill.min.js"></script>

// コード
const obj = { key1: "value1", key2: "value2" };
const values = Object.values(obj); // エラーなし
console.log(values); // ["value1", "value2"]

上記のコードは、以下の前提で記述されています。

• コンパイラは、TypeScript 3.x 以前である
• オブジェクト obj は、キーとして文字列、値として文字列を持つオブジェクトである

対象読者

• Polyfillを使用して、ブラウザ互換性を確保したい
• TypeScriptのエラー解決方法を、具体的なコード例を通して理解したい
• TypeScriptで Object.values() メソッドを使用したいが、エラーが発生している

@types/object-values のような型定義ファイルを使用することで、Object.values() メソッドをTypeScriptコンパイラに認識させることができます。

npm install @types/object-values

// コード
const obj = { key1: "value1", key2: "value2" };
const values: string[] = Object.values(obj); // エラーなし
console.log(values); // ["value1", "value2"]

ダウンレベルコンパイルを行う

ES2015以下の環境で動作する必要がある場合は、Object.values() メソッドをES5互換なコードに書き換えることで、エラーを回避することができます。

const values = Object.keys(obj).map(key => obj[key]);

この方法は、Object.values() メソッドよりもパフォーマンスが劣る場合があることに注意が必要です。

Babelを使用する

Babelなどのトランスパイラを使用することで、Object.values() メソッドを含むES2017以降のコードを、ES5以下の環境で動作するコードに変換することができます。

Babelの設定方法については、Babelの公式ドキュメントを参照してください。

TypeScript 4.1以降を使用する

{
  "compilerOptions": {
    "lib": ["es2017"] // または ["esnext"]
  }
}

それぞれの方法の比較