Support TypeScript as in props

[brigand]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: MacOS
• Vetur version: Published around Sep 2 2020
• VS Code version: 1.48.2

Problem

This commit leaves no clear way to have a TypeScript type as the prop type while also having the property be optional.

Reproducible Case

Given the following...

interface Foo {
  bar: string
}

function optionalProp<T>(type: Vue.PropType<T>): Vue.PropOptions<T> {
    return { type, required: false };
}

You could define an optional prop as this:

// TheComponent.vue
props: {
  foo: { type: Object, required: false } as Vue.PropOptions<Foo>
}

Or this:

// TheComponent.vue
props: {
  foo: optionalProp<Foo>(Object)
}

However both of these cause a warning in vetur if the prop is omitted when using TheComponent.

<TheComponent> misses props: foo

In the first example, this is because the syntax tree for the node after foo: is { "type": "AsExpression", "expression": { "type": "ObjectExpression", … }, while the lint here expects it to be exactly an ObjectExpression.

In the second example, we have a CallExpression.

Neither of these are required props, and the warning applying by default seems a bit aggressive. It leads to the entire template block being yellow underlined in many cases.

As an approximation, it might be more useful to match positively on { "type": "Identifier", "text": /^[A-Z]/ } instead of matching negatively on an object literal, which catches Object, Array, conventionally named custom classes, etc. It wouldn't match localVariable, optionalProp<Foo>(Object), { type: String } as T, and so on.

[tobiasdalhof]

That's how I add type support to my props

props: {
  foo: {
    type: Object as () => FooInterface
  },
  bar: {
    type: Array as () => BarInterface[]
  }
}

[brigand]

Yeah, this all works fine for props that are required, like in your example. The issue is that the patterns for optional props with TypeScript are interpreted as required props by Vetur.