vue3中ts怎么利用interface给从父组件接收的数据定义类型

在 Vue 3 中，可以使用 interface 或 type 来定义从父组件接收的数据的类型。以下是一个使用 interface 的示例：

// 父组件传递的数据的接口定义
interface ParentData {
  name: string;
  age: number;
  email: string;
}
// 子组件
export default defineComponent({
  props: {
    data: {
      type: Object as PropType<ParentData>,
      required: true
    }
  },
  setup(props) {
    console.log(props.data.name);   // 可以直接访问数据的属性
    
    return () => (
      <div>
        <p>Name: {props.data.name}</p>
        <p>Age: {props.data.age}</p>
        <p>Email: {props.data.email}</p>
      </div>
    );
  }
});

在上面的示例中，使用 interface 定义了从父组件接收的数据的类型 ParentData。然后，在子组件的 props 中使用 Object 类型，并通过 PropType<ParentData> 来指定数据的类型为 ParentData。通过 required: true 来表示该属性为必需的。 在 setup 函数中，可以通过 props 访问父组件传递的数据，并进行相应的显示或处理。可以直接使用 props.data 来访问传递过来的数据的属性。

下面解释一下PropType作用

PropType 是 Vue.js 提供的一个工具函数，用于在组件的 props 中指定数据类型验证。它的作用是对从父组件传递给子组件的数据进行类型检查，以确保数据的类型符合预期，提高代码的可靠性和可维护性。 使用 PropType 可以指定不同的数据类型，例如基本数据类型、内置对象、自定义对象、数组等。在类型验证不通过时，Vue 会在浏览器的控制台给出相应的警告信息。 以下是 PropType 的使用示例：

import { PropType } from 'vue';
export default {
  props: {
    name: {
      type: String,    // 指定数据类型为字符串
      required: true   // 表示该属性为必需的
    },
    age: {
      type: Number,    // 指定数据类型为数字
      default: 18      // 可以指定默认值
    },
    hobbies: Array as PropType<string[]>,   // 指定数据类型为字符串数组
    info: Object as PropType<{ 
      email: string,
      address: string 
    }>    // 指定数据类型为包含指定属性的对象
  }
}

在上述示例中，我们使用了 PropType 来指定了 name 属性为字符串类型，age 属性为数字类型，并指定了默认值为 18。hobbies 属性为字符串数组类型，info 属性为包含指定属性的对象类型。 通过使用 PropType，我们可以对组件的 props 进行类型验证，以确保传入的数据类型符合预期，避免一些潜在的类型错误。当数据类型不匹配或缺失必要的属性时，Vue 会在控制台给出相应的警告信息，帮助我们快速发现并解决问题。