在Vuejs类组件中声明Typescript接口Props [英] Declare typescript interface Props in Vuejs class Component

问题描述

我正在寻找在Vuejs类Component中声明Typescript接口Props的方法，就像我们可以使用React Component一样.

I'm looking for to declare a typescript interface Props in Vuejs class Component like we can do with React Component.

它看起来像这样:

import {Component, Prop, Vue} from 'vue-property-decorator'

export class Props extends Vue
{
  classElement :string
}

@Component
export default class Menu extends Vue<Props>
{
    public props :Props;

    constructor(props)
    {
        super(props);
        console.log(props); // return undefined 
    }

    mounted()
    {
      console.log(this.props.classElement); // return undefined
    }
}

有没有办法做到这一点?

Is there a way to achieve this?

推荐答案

现在您可以使用 {type:Object as()=>用户} 放在 Prop()装饰器中，如下所示:

Now you can use {type: Object as () => User} inside a Prop() decorator like this:

import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'

import User from './models/user';

@Component()
export default class Menu extends Vue
{    

    @Prop({type: Object as () => User})
    public user!: User // notice the bang saying to compiler not to warn about no initial value

    mounted(){
      console.log(this.user);
    }

}

这篇关于在Vuejs类组件中声明Typescript接口Props的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！