VSCodeでtscのTypeScriptエラーをチェックする方法

VSCode で TypeScript を書いているとき、「PROBLEMS」に問題のある記法についてエラーが出ます。ここで表示されているのは ESLint のエラーです。TypeScript では、ESLint だけではなく tsc のエラーにも対応する必要があります。VSCode 上で tsc のエラーをチェックするには、VSCode のターミナルで% yarn tsc -wを直接実行します。

ここでは、tsc と ESLint の違いや、tsc でのみエラーが発生する例についてまとめます。

ESLint と tsc

tsc とは

tsc は”TypeScript Compiler”の略で、文字通り TypeScript のコンパイラです。TypeScript のソースコードは、tsc を使って JavaScript に変換してから実行されます。

ESLint とは

ESLint は、TypeScript のソースコードを厳密にチェックするプログラムです。「lint」は静的解析ツールを意味します。ソースコードを解析した結果、書き方のルールに反しているとエラーが発生します。

ESLint でエラーがなくても tsc でエラーになる

以下の記事の通り、VSCode に「VS Code ESLint extension」をインストールして動かしています。

ESLint と Prettier を VSCode のデフォルト設定に寄せて動かす https://kabueye.com/articles/typescript-vscode-eslint-prettier

VSCode の PROBLEMS には表示されないが、tsc でコンパイルしてみるとエラーが起きている場合があります。例えば以下のような型エラーです。

$ ./node_modules/typescript/bin/tsc --strict --noEmit
components/atoms/Icon.tsx:12:23 - error TS2322: Type 'string' is not assignable to type '"code" | "header" | "link" | "map" | "table" | "th" | "circle" | "filter" | "image" | "stop" | "android" | "windows" | "underline" | "key" | "search" | "twitter" | "send" | "google" | ... 768 more ... | undefined'.

VSCode で開発中に tsc エラーをチェックする方法

VSCode のターミナルで tsc のコマンドを直接実行します。

% yarn tsc -w