你如何使用 typescript 接口输入提示 Vue 道具？

Question

真的把我的头撞在墙上。我记得在 Angular 工作时，TS 接口可用于键入提示参数。

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

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

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

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

export default({
  name: 'HelloWorld',
  props: {
    person: {
        type: Object as ()=> Person
    },
  },
});
</script>

Answer 2

是的 - 结果你不能使用接口。当您考虑 PHP7 中的类型提示之类的事情时，事后看来这是完全有意义的。

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

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>