eslint-plugin-typescript-compatはTypeScriptプロジェクト向けのESLintルールです。 このESLintではサポートしているブラウザが、実装していないメソッドを検知してLintエラーにしてくれます。

JavaScriptではメソッドの静的解析は難しい(メソッド名が同じでも独自実装の可能性があるため)ですが、TypeScriptの型情報を使って静的解析をしています。

サポートしている機能

  • [ ] JavaScriptのビルトインオブジェクト
    • [x] プロトタイプメソッド Array.prototype.find
    • [x] 静的メソッド Array.from
    • [ ] オブジェクト Promise
  • [ ] DOM API

基本的にメソッドのみを使っています。 他のオブジェクトなども原理的には実装できるはずですが、実装していません。

オブジェクトに関してはamilajack/eslint-plugin-compat: Check the browser compatibility of your codeがあるので、併用するのが良さそうです。ルール的にマージしてしまうのが良い気はしますが、特に動きはないです。

必要な人はこのIssueを進めていくと良いかもしれません。

インストール

npmを使ってインストールします。

$ npm install eslint-plugin-typescript-compat typescript @typescript-eslint/parser --save-dev

TypeScriptの型情報を使うためにtypescriptと@typescript-eslint/parserも必要です。

使い方

1. ESLintの設定を更新する

.eslintrc.json:

   {
+    "extends": ["plugin:typescript-compat/recommended"],
+    "env": {
+      "browser": true
+    },
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
     // ...
   }

TypeScriptの型情報を使うためにparserOptions.projectを設定する必要があります。 また、TypeScriptのlibを設定する必要があります。 TypeScriptのlibのデフォルトはES2015(ES6)です。そのため、何も設定してないプロジェクトだとTypeScriptのチェッカーはES2016+の機能を認識しません。 そのため、ES2016+のメソッドを使うとエラーとなってしまいます。

Note: If –lib is not specified a default list of libraries are injected. The default libraries injected are: ► For –target ES5: DOM,ES5,ScriptHost ► For –target ES6: DOM,ES6,DOM.Iterable,ScriptHost – https://www.typescriptlang.org/docs/handbook/compiler-options.html

ES2016+の機能を検知したい場合は、"lib": ["ESNext"]など適切なlibを設定する必要があります。

{
    "compilerOptions": {
        // ...
        "lib": [
            "ESNext",
            "DOM"
        ]
    }
}

2. ブラウザのターゲットを設定する

ブラウザのターゲットはbrowserslistを使って設定します。

package.jsonにbrowserslistを使ったブラウザのターゲットを設定できます。

例えば、IE 11をサポートする場合は以下のように設定します。

{
     // ...
+    "browserslist": [
+      "ie 11"
+    ]
}

詳細はbrowserslistのドキュメントを参照してください。

Firefox 100以上で使えないメソッドを検知するなら firefox 100 を指定するイメージです。

サンプル

ブラウザのターゲットがIE 11の場合は、次のようにbrowserslistを設定します。

     "browserslist": [
       "ie 11"
    ]

次のコードはIE 11がサポートしていないArray.prototype.includesを含んでいるのでエラーとなります。

const items = [1,2,3];
items.includes(2);

このルールでは、次のようなエラーを表示します。

Array.includes is not supported in ie 11. https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/find”

オプション

Polyfillsを追加する

Polyfillsをeslintの設定に追加します。 polyfillが定義されている場合は、ブラウザがそのメソッドを実装してなくてもエラーとして検出しません。

{
  // ...
  "settings": {
    "polyfills": [
      // Example of instance method, must add `.prototype.`
      "Array.prototype.find"
    ]
  }
}

まとめ

eslint-plugin-typescript-compatは、サポートされていないメソッドを検出するためのESLintプラグインです。 メソッドのみしか対応してないので、eslint-plugin-es-xやeslint-plugin-compatなどと併用するのが良さそうです。

eslint-plugin-typescript-compatは結構前に作ったのですが、記事を書き忘れていました。 TypeScript 5のリリースに合わせてv1.0.0を公開したので、記事を書きました。

このルールの元は、次のツールになっています。