Vue3 - 4.Custom type의 데이터

VSCode 상에 VueDX를 설치하고 시작하자. vue에서 typescript editor service를 제공한다.

• interface을 정의하는 type을 하나의 파일에서 관리토록한다.

// ./src/types.ts

export interface EventItem {
  id : number
  category : string
  title : string
  description : string
  location: string
  date: string
  time: string
  organizer: string
}

• single component file에서 다음과 같이 불러온다. reactive data의 type 지정은 타입 단언으로 설정한다.

<script>
import {EventItem} from '../types'

export default defineComponent({
  data(){
    return{
      event: {} as EventItem // Type Assertion
    }
  }
})
</script>