TL;DR

settings.json

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

개요

TypeScript 3.7의 Optional Chaining은 최고! !
언제나 「어째서 ?. 로 쓸 수 없다」라고 생각했지만, 드디어 왔다!

그냥 ... Vue 또는 Vetur에서 사용하려면 ...
Vetur는 고정 TypeScript 버전에 따라 다릅니다 1
최신 지원하는 버전은 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 [email protected] --save-dev

ESLint parser @typescript-eslint/parser를 최신 버전 2.7.0으로 업데이트합니다. (3.7.2 대응의 parser로 하지 않으면 표시가 여러가지 이상해진다)

$ npm install @typescript-eslint/[email protected] --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: [
        // ...
    ],
};

how can i use optionalChaining?#1438 Comment htps : // 기주 b. 코 m/ゔ에 js/ゔぇ r/이스에 s/1438 # 이스에 코멘 t-533952010   ↩