[Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)

이번 포스팅에서는 Vue 3 + TypeScript 세팅하는 법과 기존 Vue 3 프로젝트에 TypeScript를 추가하는 법을 알아보자.

2021/03/05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript)

[Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript)

Vue3 + TypeScript 프로젝트 세팅

vue cli를 사용할 예정이다. vue cli가 설치되어 있지 않으면 아래 명령어를 입력하여 설치하자.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

그 다음 vue cli를 이용해 프로젝트를 생성해보자.

vue create vue-3-and-typescript

위 명령어를 치게되면 아래 이미지처럼 선택하는 문구들이 나온다.

 

vue cli를 이용해 프로젝트 설치하는 과정

Vue 프로젝트 전체적으로 살펴보기

기존에는 main.js 파일이었던게 main.ts로 확장자가 타입스크립트로 변경되었다.

main.ts 파일을 열어보면 기존 main.js 파일 내용과 크게 달라진 점이 없다.

즉 타입스크립트는 기존 자바스크립트가 유효하며 필요할때 타입스크립트를 사용하면 된다.

 

다른 프로젝트에서 보지 못했던 shims-vue.d.ts 파일이 있다. 파일을 열어보면 기존과는 다른 구조로 되어있어서 이질감이 느껴진다.

이 파일 목적은 Vue 컴포넌트의 정보를 타입스크립트에 제공하는 파일이다.

즉, 필요한 파일이고 커스텀할 필요성이 없으면 굳이 수정할 필요는 없다.

 

// shims-vue.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

tsconfig.json 파일에서 타입스크립트에 대한 설정을 수정할 수 있다. 현재는 기본 설정 상태이다.

 

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

기존 Vue 프로젝트에 TypeScript 추가하기

아래 명령어를 입력하면 타입스크립트가 설치된다.

vue add typescript

아래 처럼 역시 선택을 해주면 된다.

기존 Vue 프로젝트에 타입스크립트 추가하기

결론

Vue CLI 를 사용하면 쉽게 프로젝트를 만들 수 있고 타입스크립트도 쉽게 추가 가능하다.

다음 시간에는 타입스크립트를 이용해 컴포넌트를 만들어보자.

 

2021.03.09 - [개발일기/Vue.js] - [Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)

[Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)