VS Codeが参照するTypeScriptのバージョンを変更する

TypeScriptを利用している場合に、npm run lintなどではエラーになるけどVS Codeではエラーにならないという経験があるひとは多いと思います。

そういった状況が発生する原因はVS Codeが参照しているTypeScriptのバージョンとnpm run lint時に参照されるプロジェクトのTypeScriptのバージョンが違っているためです。

異なるTypeScriptのバージョンのプロジェクトを作成

確認するため空のプロジェクトを作成してみましょう。
以下のコマンドでpackage.jsonとfoo.tsを作成します。

npm init -y
npm install typescript@4
touch ./foo.ts

作成されたpackage.jsonを確認するとTypeScriptのバージョンは4.9.5がインストールされたのが確認できます。

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "typescript": "^4.9.5"
  }
}

VS Codeが参照するTypeScriptのバージョンを確認する

作成したプロジェクトをVS Codeで開いてfoo.tsを選択、そして右下のTypeSciptの横の{}をクリックすると先程インストールしたTypeScriptのバージョン4.9.5ではなく5.6.3が参照されているのがわかります。

VS Codeが参照するTypeScriptのバージョンを変更する

先程インストールしたTypeScriptのバージョン4.9.5が参照されるようにするにはTypeScriptバージョンの横にある「バージョンの選択」をクリック

ここで参照するTypeScriptのバージョンが指定できるので、「ワークスペースのバージョンを使用 4.9.5」を選択しましょう。

これでVS Codeが参照するTypeScriptのバージョンを変更することができます。

.vscode/settings.json で指定

他にもTypeScriptのバージョンを指定する方法が以下のドキュメントに記載されています。

https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-newer-typescript-versions

例えば.vscode/settings.json に以下の指定を追加することによってVS Codeに参照されるTypeScriptをワークスペースのバージョンにあわせることができます。

.vscode/settings.json

{
 "typescript.tsdk": "./node_modules/typescript/lib"
}