如何使用typescript接口输入提示Vue props?

qfe3c7zg  于 12个月前  发布在  Vue.js
关注(0)|答案(3)|浏览(96)

我记得在Angular中工作时,TS接口可以用来输入提示参数。
我想对Vue中的 prop 做同样的事情。
代码如下,但检查只针对标准Object,因此传入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;
}

xuo3flqw

xuo3flqw1#

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

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

字符串

pobjuy32

pobjuy322#

是的-所以你不能使用接口。当你考虑PHP7中的类型暗示时,事后看来完全有意义。
答案是将接口应用于类,而类型提示则使用该类。对于抽象层,我担心必须将错误的类应用于类型提示是没有根据的,因为任何扩展或实现Person类的类都将是传递给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>
eoigrqb6

eoigrqb63#

如果你使用的是类而不是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;
}


(来源于GitHub)
你也可以用PropType<FooBar>来代替Object as () => FooBar(见medium articlearchived version的结尾),但它有与OP提到的相同的问题。
警告:存档的URL被卡在刷新循环中,除非你disable javascript

相关问题