typescript - 你如何使用 typescript 接口(interface)输入提示 Vue Prop ？

Question

这件事真的让我头撞墙。我记得在 Angular 工作时，TS 接口(interface)可用于键入提示参数。

我想对 Vue 中的 Prop 做同样的事情。

有什么想法吗？代码如下，但检查仅针对标准对象进行，因此传入任何对象都是有效的:

import Vue from 'vue';
import Person from './../models/Person';

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    person: {
        type: Object as () => Person
    },
  },
});

界面如下:

export default interface Person {
    firstName: string;
    lastName: string;
}

Answer 1

是的 - 结果表明您不能使用接口(interface)。当您考虑 PHP7 中的类型提示之类的事情时，事后看来是完全有道理的。

答案是将接口(interface)应用于一个类，并使用该类代替类型提示。对于抽象层，我担心必须将错误的类应用于类型提示是没有根据的，因为任何类都扩展或实现了 Person class 将是传递给 person 的有效值 Prop 。

export default interface NameInterface {
    firstName: string;
    lastName: string;
}

import NameInterface from './../interfaces/NameInterface';
export default class Person implements NameInterface {

    firstName: string;
    lastName: string;

    constructor( firstName: string, lastName: string ) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
}

<script lang="ts">
import Vue from 'vue';
import Person from './../models/Person';

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    person: {
        type: Person
    },
  },
});
</script>