VeturにTypeScript3.7のOptional Chainingを適用してみる

TL;DR

settings.json

{
    // Use dependencies from workspace. Currently only for TypeScript.
    "vetur.useWorkspaceDependencies": true, 
}

概要

TypeScript 3.7のOptional Chainingは最高！！
いつも「なんで?.で書けないんだ」って思っていたけど、ついに来た！

ただ...VueというかVeturで使うには...
Veturは固定のTypeScriptバージョンに依存している¹。
最新サポートしているバージョンはVetur0.22.3のTypeScript3.6.3。
このままTypeScript 3.7のOptional Chainingを書いたら、Veturに怒られる！

トランスパイルしているのはあくまでtscなので、実害があるわけじゃないが、Intelligenceが効かなくなるのは相当な痛手だ。

解決策

探してみたらちゃんとあった、

Allow using workspace typescript version#682
how can i use optionalChaining?#1438

Vetur 0.17.0以降、"vetur.useWorkspaceDependencies"のオプションを設定できるらしい。
字面通りの意味なら、この設定をしたら、ワークスペースのTypeScriptバージョンを使ってくれるみたい！

ワークスペースのTypeScriptのバージョンを3.7.2に上げて、

$ npm install typescript@3.7.2 --save-dev

ESLintのparserの@typescript-eslint/parserを最新バージョンの2.7.0に更新する。（3.7.2対応のparserにしないと表示が色々おかしくなる）

$ npm install @typescript-eslint/parser@2.7.0 --save-dev

VSCodeのsettings.jsonに

settings.json

{
    // Use dependencies from workspace. Currently only for TypeScript.
    "vetur.useWorkspaceDependencies": true, 
}

を追加したら、Optional Chainをちゃんと認識してくれるようになった！（VSCodeの再起動必須）

使用環境

TypeScript 3.7.2
VSCode 1.40.0
Vetur 0.22.6
ESLint 5.16.0

ESLint 設定

.eslintrc.js

module.exports = {
    parserOptions: {
        parser: '@typescript-eslint/parser',
    },

    extends: [
        // ...
    ],
};

1. how can i use optionalChaining?#1438 Comment https://github.com/vuejs/vetur/issues/1438#issuecomment-533952010 ↩