Vue 中的 DefineProps 属性的复杂类型

Question

在我的代码中，我已经（或希望）在某些时候使用复杂的 prop 类型。下面是我想到的示例：

enum Country {
  [...]
}

interface IPerson {
  firstname: string;
  lastname: string;

}

interface IAddress {
  street: string;
  houseNo: string;
  city: string;
  postalCode: string;
  country: number;
}

interface ITestComponentProps {
  person: IPerson;
  addresses: Array<IAddress>;
}

那么我想用这一切来实现的TestComponent.vue是：

[...]
const props = defineProps<ITestComponentProps>();
[...]

我现在期望的是某种错误消息或任何告诉我在尝试如下操作时没有提供正确结构的道具的信息：

[...]
<TestComponent :props="'foo'" />
[...]

Vue 的文档中有如下说明：

目前不支持复杂类型和从其他文件导入类型。将来有可能支持类型导入。

---

有谁知道是否有解决方法来获得所需的行为或何时支持复杂类型？

Answer 1

在Vue 版本 < 3.3中，语法如下：

const props = defineProps<ITestComponentProps>();

仅支持：

• 类型文字
• 对同一文件中的接口或类型文字的引用

建议使用其他语法：

import {PropType} from 'vue'

const props=defineProps({
       person:{
          type:Object as PropType<Person>
       }
  })

因为这个语法：

• 适用于选项 API 以及组合 API，无论是否有脚本设置
• 是的，需要输入更多内容。
• 当传递错误的（基本）类型（即字符串而不是数字）时，会向您发出运行时警告。
• 也适用于导入的道具对象。

此评论归功于Linus borg