[Vuejs] TypeScript 추가 & 설정

TypeScript 추가하기

vue2에서 TypeScript를 사용하는 두가지 방법을 알아보자

🚗  프로젝트 생성할 때 추가하기

1. vue-cli로 프로젝트 생성

vue create 프로젝트명

2. Manually select features 선택

3. TypeScript 및 필요한 항목 선택

4. 선택한 항목에 대한 옵션 선택

5. 프로젝트 생성 완료

 

🚙  프로젝트 생성 후 추가하기

1. TypeScript를 제외한 프로젝트를 생성

2. 해당 프로젝트의 터미널에서 아래의 명령어 입력

vue add typescript

3. 필요한 옵션 선택

4. 타입스크립트 추가로 생성되있던 기존 파일 중 일부 변경 및 새로운 파일 추가(자동)

 

🔥  주의 사항

기존 프로젝트에 TypeScript를 추가하는 경우, 옵션 선택에 신중해야 한다.

 

---

 

세팅

우선 공식 플러그인 vue-class-component, vue-property-decorator를 설치하고 웹팩을 설정한다.

웹팩 설정은 다음과 같다.

 

입구파일 수정

entry: {
  app: './src/main.ts'
}

resolve 부분

extenstions: ['.js', '.vue', '.json', '.ts', 'tsx']

로더 설정

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
   appendTsSuffixTo: [/\.vue$/],
 }
}

tsconfig.json 설정

{
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "allowSyntheticDefaultImports": true,
  "experimentalDecorators": true,
  "allowJs": true,
  "module": "es2015",
  "strict" : true, // 타입스크립트 기능의 확장 기준 (미사용 시 항상 any 타입으로 처리됨)
  "target": "es5",
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "isolatedModules": true,
 "lib": [
  "dom",
  "es5",
  "es2015.promise"
 ],
 "sourceMap": true,
 "pretty": true
 }
}