Vue에서 TypeScript 사용하기: Props

TypeScript를 이용하면 props의 속성도 제한할 수 있다. 어떻게 하는지 알아보자!!!!

 

types.ts 파일에 다음과 같이 정의돼있다.

export interface human {
  name: string
  likeNumber: number
  isAdult: boolean
}

그리고 humanDetail이라는 Component가 있다. 이 Component는 human이라는 props의 타입을 human으로 제한하고 싶다.

이 때 우리는 type에 'Object as PropType<인터페이스명>'과 같이 값을 전달해주면 된다.

그냥 단순히 'type: 인터페이스명'과 같이 해서는 타입을 지정해 줄 수 없고, PropType이라는 것의 도움을 받아서 아래 코드와 같이 해줘야 한다.

import { defineComponent, PropType } from 'vue'
import { human } from '../types'

export default humanDetail({
  props: {
    human: {
      type: Object as PropType<human>,
      required: true
    }
  },
})