vue.js - Deklarer TypeScript-grensesnitt Props i Vuejs klassekomponent

Jeg ser etter å erklære et TypeScript-grensesnitt Props i en Vuejs klassekomponent slik vi kan gjøre med en React-komponent.

Det ser slik ut:

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

Er det en måte å oppnå dette på?

Svar #1

Nå kan du bruke {type: Object as() => User} inni en Prop() dekoratør slik:

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

}

Svar #2

I tillegg er det nå mulig å bruke Typescript-typen 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);
    }

}

Relaterte artikler