[VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기

Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다.

Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다.

 

이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다.

---

프로젝트 생성

이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다.

Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다.

# 1. Install Vue CLI, if it's not already installed
npm install --global @vue/cli

# 2. Create a new project, then choose the "Manually select features" option
vue create my-project-name

# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:
vue add typescript

vue-cli가 이미 있다면 vue create를 통해 생성해주면 될것이고, 이미 존재하는 프로젝트에 typescript를 추가하고자 한다면 vue add typescript를 사용하면 된다.

 

tsconfig.json 권장 설정

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

vue add typescript를 통해 추가 했을경우 위 권장 설정을 살펴보길 바란다.

(vue-cli는 이미 되어있어있을테니 크게 신경 쓸 필요는 없을 것 같다.)

Vue components 정의

우선 script 태그의 언어를 ts로 선언해 주어야 한다.

<script lang="ts">
  ...
</script>

그러고 나서 기존 Vue와 크게 달라진 점은 전역 메서드 defineComponent를 통해 component를 정의해야 한다는 점이다.

import { defineComponent } from "vue";

export default defineComponent({
  name: "HomeView",
  //...
});

물론 기존에 vue3 만 사용할 때도 defineComponent를 사용할 수 있었겠지만, 없이도 사용이 가능했다.

하지만 typescript를 사용하게 되면 typesript에서 vue component내의 타입을 올바르게 추론하기 위해서 필수적으로 defineComponent를 통해 component를 정의하는 것을 권장한다.

---

추가적으로 당연히 vue-cli를 통해 typescript를 추가해준 것이 아닌 이상 프로젝트에 맞게 설정이 들어가야 하는 건 어쩔 수 없다.

vue-cli에서는 자동으로 잡아주기 때문에 상관없겠지만 add를 통해 추가한 경우 따로 필요한 설정을 찾아서 해주길 바란다.

---

참고: vue-components 정의

TypeScript 지원 | Vue.js