https://ko.vuejs.org/guide/components/props
//1.문자열 배열로 선언
<script setup>
const props = defineProps(['foo'])
console.log(props.foo)
</script>
//2. 객체 리터럴로 선언
<script setup>
defineProps({
title: String,
likes: Number
})
</script>
//3. 타입스트립트 제네릭으로 선언
<script setup lang="ts">
defineProps<{
title?: string
likes?: number
}>()
</script>
타입스크립트를 사용하면, Props의 정의법이 달라진다. 예를들어서
//TypeScript 미사용
const props = defineProps({
pageNubmers: {
type: Array<number>;
default: [];
};
startNum: {
type: number;
default: 1;
};
totalPage: {
type: number;
default: 0;
};
href: {
type: string;
default: "/";
};
}();
타입스크립트를 사용하지 않을때 Props는 위와 같이 객체 형태로 값들을 선언하고 기본값도 할당해줄 수 있다. type이라는 프로퍼티를 명시해 어떤 타입인지도 지정해 사용할 수도 있음.
위와같이 선언하면, 템플릿 내에서는 반응형 객체들이 .value 없이도 사용할 수 있는 것 처럼, 그냥 프로퍼티 이름으로 값을 사용할 수 있다.
하지만 타입스크립트를 적용하면서 위와같이 기본값까지 할당하려면 다른 방법을 사용해야 한다. 타입스크립트 타입 체커를 이용하면서 위와같이 선언하면 : 오른쪽의 객체가 타입으로 인식되기 때문이다!
따라서 그냥 사용하려면 해당 타입이 number가 아니라는 오류가 난다. 이때는
interface props {
pageNumber: Array<number>;
startNum: number;
totalPage: number;
href: string;
}
const props = withDefaults(defineProps<props>(), {
pageNumber: () => [],
startNum: 1,
totalPage: 1,
href: "",
});
이렇게 인터페이스를 사용하고, 이를 통해 props의 타입을 명시하되, 기본값을 주고 싶다면 withDefaults 라는 메서드를 따로 이용한다! 이 메서드의 두번째 인자로 전달되는 객체가 props의 프로퍼티의 기본값이 된다.