Eclipse上でTypescriptの型チェックが動かないときに確認すること

EclipseのTypescriptエディタでは、たまに型チェックがうまく動かずanyになる事がある。メソッドの候補が表示されないと面倒なので何とかしたいのだが、いくつか原因があるので大抵は試行錯誤になる。いくつか良く嵌まるパターンを以下にまとめる。

Typescriptのバージョンが異なる

EclipseのTypescriptプラグインでは、型をチェックするためのトランスパイラを指定できる。デフォルトでは「内蔵」になっており、Package.jsonでインストールしたローカルのトランスパイラとは関係が無い。これにより、「ビルドはできるがエディタ上はエラーになる」という不可解なことが起こる。

Typescriptのバージョンが正しいかを確認するには、EclipseでWindow > Preferences > JavaScript > Typescript > Runtime から以下の設定画面を開く。Consume Typescript WithでEmbeddedが選択している場合、インストールから時間が経つことで新しい言語仕様に対応できずエラーになる可能性がある。

以下のような設定があると思う。

Typescriptの場所	パス
プロジェクトごと	${workspace_loc:プロジェクト名/node_modules/typescript}
グローバル	<npm config lisで表示されるprefix>/node_modules/typescript}

tsconfigの設定に不備がある

結構落とし穴があるが、Google検索すれば大抵同じ間違いに嵌まった人がいるので、大抵の答えは得られる。以下のようなケースがある。(これらはトランスパイルもエラーになるから特に不可解ではないが…)

ライブラリを指定していない

Promise,HTMLElement,async/await,array.mapなど、当たり前に使えるべきものが無いというエラーが起きる場合、compilerOptionsのlibが不足しているか、指定はしているがes*のバージョンが非対応などの可能性がある。

TypescriptのCompiler Optionsの一覧から選べるものを調べるようにする。

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "es2015",
      "dom"
    ]
  }
}

JSXを有効にしていない

これはReact限定かもしれない。reactとreact-nativeに分かれているので、間違わないようにする。

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react"
  }
}

デコレータを有効にしていない

デコレータは使おうとすると「この設定を有効にすること」と表示されるのですぐ気づける。(いつまでexperimental?)

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

@typesをインストールしていない

nodeでfsが使えないなど、JavascriptライブラリをTypescriptで使おうとする場合に起きる。npm install @types/ライブラリ名で必要な型情報をインストールしておき、tsconfig.jsonのtypeRootsを設定しておけば解決する。

tsconfig.json

{
    "typeRoots": [
      "node_modules/@types"
    ]
}