在Vuejs类组件中声明Typescript接口Props

Question

我正在寻找在Vuejs类Component中声明一个Typescript接口Props的方法，就像我们可以对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
    }
}

有没有办法做到这一点？

Answer 1

现在，您可以像这样{type: Object as () => User}在Prop（）装饰器内部 使用：

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);
    }

}

Answer 2

此外，现在可以使用 Typescript 类型 PropType。

import Vue, { PropType } 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 PropType<User>})
    public user!: User // notice the bang saying to compiler not to warn about no initial value

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

}

Answer 3

是的，使用 typescript 时可以使用基本 javascript vue 库的所有功能。我建议你使用官方的类装饰器。

定义一个 prop 可以通过简单地将其作为参数添加到类装饰器中来完成，如下所示：

@Component({
  props: {
    classElement: String
  }
})
export default class Menu extends Vue
{
    mounted()
    {
      console.log(this.classElement);
    }
}

因为组件接受一个对象，所以您可以为该对象定义一个接口并将其传递进去。

或者，您可以使用vue-property-decorator来获得更像角度的语法。