[Vite] Vite 개발 환경에서 타입스크립트(Typescript) 적용하기

 

vite 환경에서 타입스크립트(Typescript) 환경을 설정하는 방법입니다.

당황스럽게도 아무것도 하지 않아도(?) ts 파일이든 js 파일든지간에 vite는 훌륭하게 컴파일을 해 줍니다.

요렇게 파일을 넣었는데..이게 되네?

 

아무 생각없이 위 사진처럼 코드를 넣고 vite 명령어를 실행하면 그냥 컴파일된 내용이 나오는 걸 볼 수 있습니다.

그렇지만 이러한 경우 eslint에서 나오는 "Parsing error : Unexpected token" 또는 "빠른 수정을 사용할 수 없습니다" 같은 오류를 만나게 되므로 몇가지 추가 설정을 해 주어야 합니다.

 

* 모듈 추가

yarn add @typescript-eslint/parser --dev

 

 

개발 모듈을 설치한 뒤에 tsconfig.json 파일을 루트 폴더에 생성하여 줍니다.

* 파일 이름 : tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node"  
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.js",
    "src/**/*.vue" // 뷰 파일, 리엑트 파일, 앵귤러 파일 등등...
  ]
}

 

 

다음으로 .eslintrc.cjs 파일을 수정하여 줍니다.

* 파일이름 : .eslintrc.cjs

module.exports = {
  extends: [
    //....생략 
    'plugin:@typescript-eslint/recommended'   //요거 추가~
  ],
  parserOptions: {
   //....생략 
    extraFileExtensions: ['.vue']  //리엑트면, 뷰면, 앵귤러면 맞는 형식 써 주기
  },
  plugins: ['vue', '@typescript-eslint']  //'@typescript-eslint' 추가
}

 

 

간단하게 vite 환경에서 타입스크립트를 적용하는 방법이였습니다!

궁금한점 또는 틀린 부분은 언제든 연락 주세요~