vue3 中 props 使用 ts 类型定义复杂类型
一、复杂对象类型的`props`
1. 接收一个复杂对象类型的 `props`
<script lang="ts">
import { defineComponent } from "vue";
interface User {
name: string;
age: number;
}
export default defineComponent({
props: {
user: {
type: Object as () => User,
required: true,
},
},
});
</script>首先定义一个接口 `User` 来表示复杂对象的结构。在 `props` 定义中，对于 `user` 属性，指定其类型为一个函数，该函数返回一个符合 `User` 接口的对象，并设置 `required` 为 `true`。
二、数组类型的`props`
1. 接收一个数组类型的 `props`
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
items: {
type: Array as () => string[],
required: false,
default: () => [],
},
},
});
</script>