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

지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자.

타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자.

 

TypeScript 컴포넌트 변화(TypeScript Changes in Single File Components)

개발 언어 속성(The Language Attribute)

싱글 파일 컴포넌트에서 script 태그에 보면 lang 속성이 추가되었다.

자바스크립트 사용할때는 없었는데 타입 스크립트 사용 시에는 명시를 해줘야 한다.

<script lang="ts">

defineComponent Method

Vue3를 잘 활용하기 위해 필요한 새로운 것중에 하나가 바로 헬퍼 메서드(helper methods)를 불러오는 거다.

일반적으로 컴포넌트를 SFC에서 정의할때 아래와 같은 구문을 사용한다.

export default {...}

그러나, 타입스크립트를 사용할 경우, 명시적으로 사용한다고 알려줘야 한다.

그래서 Vue에서 제공하는 헬퍼 메서드인 defineComponent를 사용한다.

import { defineComponent } from 'vue'

export default defineComponent({...})

 

기존 컴포넌트에 타입스크립트 문법 추가

<script>
import EventCard from '../components/EventCard.vue'
import EventService from '../services/EventService'

export default {
  name: 'EventList',
  components: {
    EventCard
  },
  data() {
    return {
      events: null
    }
  },
  created() {
    EventService.getEvents()
      .then(response => {
        this.events = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

타입스크립트로 전환하기 위해서 해야 될 일

1. script 태그에 lang 속성 정의

2. 헬퍼 메서드(defineComponent) import 하기

3. 헬퍼 메서드(defineComponent) 적용하기

 

<script lang="ts">
import { defineComponent } from 'vue'

import EventCard from '../components/EventCard.vue'
import EventService from '../services/EventService'

export default defineComponent({
  name: 'EventList',
  components: {
    EventCard
  },
  data() {
    return {
      events: null
    }
  },
  created() {
    EventService.getEvents()
      .then(response => {
        this.events = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
})
</script>

결론

오늘은 Vue에서 타입스크립트를 적용한 컴포넌트를 만드는 방법을 살펴봤다.

크게 어렵거다 복잡한 점은 없고 명시적으로 선언을 잘해주면 될 것 같다.