[TypeScript+Vue] VisualStudio에서 TypeScript+Vue 사용시 오류

오류1 - 증상

VisualStudio에서 TypeScript를 사용할 때 불규칙적으로 아래 오류가 무작위로 발생하는 경우가 있습니다.

• Map, Set 등의 이름을 찾을 수 없다는 오류 : Error TS2583 (TS) Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later. ClientApp\src\models\Home.ts 18 Active
• '@' 등 경로를 찾을 수 없는 오류 : Error TS2307 (TS) Cannot find module '@/utils/Date.ts' or its corresponding type declarations. ClientApp\src\components\Home.ts 12 Active

원인 및 해결

1. tsconfig.json 파일의 Build Action이 Content가 아닐 때 발생합니다. tsconfig.json 파일을 찾아 Build Action을 Content로 변경하고 VisualStudio를 재시작하면 문제가 해결됩니다.
2. 해당 .vue 파일의 Build Action이 Content가 아닌 경우, Content로 변경하고 VisualStudio를 재시작하면 문제가 해결됩니다.

오류2 - 증상

불규칙하게 Parsing error: Unexpected token 오류가 발생합니다. (예시↓)

Failed to compile.

./src/store/State.ts
Module Error (from ./node_modules/eslint-loader/index.js):

C:\dev\ClientApp\src\store\State.ts
  9:9 error  Parsing error: Unexpected token

    7 | //State
    8 | export class State {
>  9 |     public Items: ItemDto;
        |            ^
  10 |     constructor() {
  11 |         this.Items = new ItemDto();

  X 1 problem (1 error, 0 warnings)

원인 및 해결

eslint에서 babel-eslint를 사용한 경우 나타납니다. .eslintrc.js를 열고 parsor를 @typescript-eslint/parser로 바꾸어주세요. 

//.eslintrc.js 파일
parserOptions: {
  "parser": "@typescript-eslint/parser"  //"parser": "babel-eslint"
},