Export Prop type in main types file (vue/types/index.d.ts)

[ferdaber]

What problem does this feature solve?

When attempting to declare a type for a complex object-type prop for a component, it's difficult to understand (without knowing exactly how the Props typing works) how to cast that specific prop to the interface you create.

The best way of doing it currently is to do this:

import Vue from 'vue'
import { Prop } from 'vue/types/options'

interface FooBar {
  foo: string,
  bar: string
}

export default Vue.extend({
  props: {
    foobar: Object as (() => FooBar)
  }
})

What does the proposed API look like?

It would be nice to expose the Prop generic type in vue/types/options.d.ts in the default types export so that we can simply use this:

import Vue, { Prop } from 'vue'

// boilerplate
  props: {
    foobar: Object as Props<FooBar>
}

This also extends to complex callback types if need be so that whenever the regular prop types via the primitive type constructors don't work, we can create an interface and cast it as Prop<ICustomType> and it just works.

[sandangel]

Did you tried vue-property-decorator?

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

interface FooBar {
  foo: string,
  bar: string
}

@Component
export default class App extends Vue {
  @Prop() foobar: FooBar;
}

[ktsn]

I like the idea. Prop type would hide the internal detail of type declaration and looks more intuitive syntax.

@sandangel This proposal is not related with decorators. It would help us declare props type easier with canonical API.

[ferdaber]

I can do a PR if it's easier since this would be a very simple change.

[yyx990803]

@ferdaber yes please.