[vite + React + typescript] 초기설정 tsconfig.app.json의 'tsBuildInfoFile', 'noUncheckedSideEffectImports' 에러 해결

문제점

vscode를 사용할 때, vite + React + typescript의 초기 tsconfig.app.json에는 두 가지가 에러가 표시된다.

1. Option 'tsBuildInfoFile' cannot be specified without specifying option 'incremental' or option 'composite'.

2. Unknown compiler option 'noUncheckedSideEffectImports'.

해결

1. 첫 번째의 경우 "incremental": true, 옵션을 추가하면 해결된다.

  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

incremental 옵션: https://www.typescriptlang.org/tsconfig/#incremental

2. 두 번째의 경우 vscode내장된 TypeScript의 버전이 5.6.3 미만이기 때문.

• 아무 타입스크립트 파일을 열어놓고Ctrl+Shift+P를 눌러서 TypeScript: Select TypeScript Version에 들어가서 버전을 5.6.3 이상을 선택하면 해결됨

• 만약 선택지에 최신 버전의 타입스크립트가 없는 경우, 선택지에 전역 설치된 TypeScript가 나오게 하는 방법:
  1. .vscode 폴더를 프로젝트 최상단에 만들고
  2. 하위에 settings.json 파일 생성 (아래 예시는 윈도우의 경우)

{
  "typescript.tsdk": "C:\\Users\\<유저명>\\AppData\\Roaming\\npm\\node_modules\\typescript\\lib"
}