[ Vue ] defineProps에 타입을 지정하는 2가지 방법

Type 선언 방식

defineProps() 는 2가지 타입 선언 방식을 가지고 있다.

 

1. 런타임 선언

◾ <script setup> 사용 시 defineProps() 매크로는 인수를 기반으로 Props 타입을 추론하는 기능을 지원한다.

◾ 이는 런타임 시 인수를 전달받았을 때 타입이 선언된다는 것이다. 

 

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

props.foo // string
props.bar // number | undefined
</script>

( ) 안에 인수를 정의

 

 

2. 타입 기반 선언

◾ Props의 타입을 미리 정의해두고 컴파일러는 이를 기반으로 동일한 런타임 옵션을 추론한다.

(타입스크립트와 함께 사용한다면 이 방법을 권장!)

<script setup lang="ts">
const props = defineProps<{
  foo: string
  bar?: number
}>()
</script>

< > 안에 인수를 정의

 

위의 두 가지 선언은 모두 사용가능하지만, 동시에 사용할 수는 없다.

 

 

또한 Props 타입을 별도의 인터페이스로 분리할 수도 있다.

<script setup lang="ts">
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()
</script>

 

 

또한 인터페이스를 외부 소스에서 가져올 수도 있다 (import)

<script setup lang="ts">
import type { Props } from './foo'

const props = defineProps<Props>()
</script>

※ 외부 인터페이스 참조는 3.3버전 이상에서만 가능함 (하위 버전에서는 로컬 인터페이스 참조만 가능)

→ 내가 Vue 버전 업데이트를 진행한 이유

 

 

---

 

기본 값 설정

2번째 방법인 타입 기반 선언을 사용할 때는 Props에 대한 기본값을 선언할 수 없다. ➡ withDefaults 컴파일러 매크로를 사용해 기본값을 줄 수 있다.

 

export interface Props {
	title: string
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

 

이때 모든 props에 대한 기본값을 지정해줄 필요는 없다.

※ 더더욱이 필수 props에 대해서는 지정해줄 필요가 전혀 없음

 

 

또한 string[] 처럼 배열 타입을 가진 props에 기본값을 설정해주고 싶다면 화살표 함수를 사용하여 배열을 반환하는 형식을 사용해야 한다.

labels: []
// 이런 식으로 바로 배열을 적어줄 경우
// Type 'never[]' is not assignable to type '(props: LooseRequired<Props>) => string[]'.
// 이런 에러를 겪게될 것이다..

 

 

 

 

---

[ 참고 자료 ] 

https://ko.vuejs.org/guide/typescript/composition-api#props-default-values

https://ko.vuejs.org/api/options-state