Question

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

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

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

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

如果您使用类而不是Vue.extend，则可以使用@Prop()装饰器（来自vue-property-decorator）来将接口用作类型参数。

通过OP的界面：

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

类声明将变为：

import {Component, Prop, Vue} from 'vue-property-decorator';
import Person from './../models/Person';

@Component
export default class HelloWorld extends vue {
    @Prop() person : Person;
}

（Source on GitHub）

您也可以使用PropType<FooBar>代替Object as () => FooBar（请参阅本medium article的结尾），但是它与OP中提到的问题相同。

Answer 2

是的-事实证明您不能使用界面。在考虑诸如PHP7中的类型提示之类的事情时，事后看来完全有意义。

答案是将接口应用于类，并使用该类来提示类型。对于抽象层，我担心不必对类型提示应用错误的类是没有根据的，因为任何扩展或实现Person类的类都是传递给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>

如何使用打字稿界面输入提示Vue道具？

2 个答案: