Vue3 - 2. Vue3 + Typescript

Vue3 + Typescript 프로젝트 생성 방법

1. vue cli 설치 (버전: 4.5.8)
   • npm install -g @vue/cli
2. Vue3 프로젝트 생성
   • vue create vue3-and-typescript
   • Babel, Typescript, 3.x, no class style 설정

기존 Vue3 프로젝트에 Typescript 설정하는 방법

vue add typescript
- vue/cli upgrade
- Babel, no class style 설정
- convert all .js file to .ts
- skip type checking to all declaration files

프로젝트 구조

• main.ts : 기존 javascript로 구성된 main.js와 동일
• shims-vue.d.ts : Typescript의 Helper file이다. vue 파일에서 일어나는 일들에 대해 정의가 내려져 있다. 수정 불필요

Component에 Typescript 적용하는법

<script lang="ts">
  import {defineComponent} from 'vue' // import vue helper function
  export default defineComponent{
    data(){
      return {}
    },
  }
</script>

• defineComponent : typescript를 컴파일 할 수 있는 component를 정의해준다. single file component에 설정.