typescript - 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>();
[...]

我现在期望的是某种错误消息或任何告诉我在尝试这样的事情时我没有以正确的结构提供 Prop 的信息:

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

在 Vue 的文档中说明如下:

Currently complex types and type imports from other files are not supported. It is possible to support type imports in the future.

---

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

Answer 1

语法如下:

const props = defineProps<ITestComponentProps>();

仅支持:

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

建议使用其他语法:

import {PropType} from 'vue'

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

因为这个语法:

• 在 Options API 和组合 API 中工作，无论是否设置脚本
• 要输入的内容有点多，是的。
• 在传递错误(基本)类型(即字符串而不是数字)时向您发出运行时警告。
• 也适用于导入的 Prop 对象。

感谢 Linus borg in this comment