在types/index.ts定义一个PersonInter接口：

// 定义一个接口，用于限制对象的具体属性

// 接口在 TypeScript 中用于定义一种契约，确保实现该接口的对象都具有相同的结构。

export interface PersonInter { -- -->

id: string;

name: string;

age: number;

}

在父组件有一个person传递给子组件：

<template>

<div>

<ChildComponent :personList="personList" />code>

</div>

</template>

<script setup lang="ts" name="Person">code>

// 在 TypeScript 中，import type 语法用于仅导入类型信息而不导入实际的值或函数。

// 使用 import type 导入的类型信息仅在类型检查时使用，不会在运行时产生任何影响。

import type { -- --> PersonInter } from '@/types';

import { reactive } from 'vue';

import ChildComponent from './ChildComponent.vue';

let personList = reactive<PersonInter>({

id: 'person001',

name: 'John',

age: 18

});

</script>

子组件：

<template>

<div>{ { person.name }}</div>

</template>

<script setup lang="ts" name="ChildComponent">code>

import type { -- --> PersonInter } from '@/types';

import { defineProps } from "vue";

// 只接收person

let props = defineProps(['person'])

console.log(props)

// 接收person+类型限制

let props = defineProps<{ person: PersonInter }>()

// 接收person+类型限制+限制必要性+默认值

// ?表示不必传，父组件可传可不传，如果父组件不传，则使用默认值

// 指定默认值需要使用withDefaults

withDefaults(defineProps<{ person?: PersonInter }>(), {

person: () => {

return { id: 'person000', name: 'Alice', age: 18 }

}

})

</script>

let props = defineProps(['person']) 只接收person，对person没有任何限制。父组件可以给person赋任意类型的值。defineProps<{ person: PersonInter }>(): 通过泛型参数指定了 props 的结构。具体来说，定义了一个名为 person 的 prop，其类型为 PersonInter。defineProps<{ person?: PersonInter }>():

使用泛型参数指定了 props 的结构。定义了一个名为 person 的 prop，其类型为 PersonInter。后面的问号 ? 表示这个 prop 是可选的，即父组件可以选择是否传递这个 prop。