Question

我正在寻找声明一个typescript接口Props in Vuejs class Component就像我们可以用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

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

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库的所有功能。我建议你使用官方class decorator。

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

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

因为组件接受一个对象，你可以为这个对象定义一个接口，并将其传递给它。

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

在Vuejs类Component中声明typescript接口Props

3 个答案: