Vetur: Cross file template type checking - check that components are passed props with the correct types

[octref]

When one has a Vue file:

<script>
export default {
  name: 'Foo',
  props: { bar: String }
}
</script>

Such templates should show error:

<foo :bar="5"></foo>

<foo :bar="myNumber"></foo>

Currently we have:

interface ComponentData<T> {
  props: Record<string, any>;
  on: ComponentListeners<T>;
  directives: any[];
}

I'm wondering if we could do something like this. For each imported Vue component, generate its corresponding type definition such as:

interface CProp1 {
  msg: string;
  [other: string]: any;
}
interface ComponentData1<T> {
  props: CProp1;
  on: ComponentListeners<T>
  directives: any[]
}
export declare const __vlsComponentHelper1: {
  <T>(vm: T, tag: string, data: ComponentData1<Record<string, any>> & ThisType<T>, children: any[]): any
}

Then the virtual file with this content would complain:

__vlsComponentHelper1(this, 'foo', { props: { msg: 5 }, on: {}, directives: [] }, []) // Type 'number' is not assignable to string

It should be easy to translate the props interface:

• If required: false is specified, translate to msg?: type. Otherwise translate to msg: type
• type is inferred from constructor types. For example String -> string. If uninferrable, use any.

@ktsn What do you think?

[ktsn]

Looks good for Vue 2. We can reuse component props type in Vue 3 as required is handled if I remember correctly.

[mesqueeb]

My preferred syntax would be close to the native PropType:

props: {
  userList: {
    type: Array as PropType<User[]>,
    default: () => []
  },
  category: {
    type: String as PropType<MY_ENUM>,
    required: true
  }
}

Having to define the prop types _outside_ of the actual place you write the props, it would be less ideal in my opinion.

Also anything that stays closest to regular Vue syntax seems best for me. 😉

[ktsn]

@mesqueeb We are talking about auto generated (probably virtual) type declaration for Vetur which the end users won't see / edit. I believe a simple interface type derived from Vue component's props option is enough to utlize it in template type checking.

[mesqueeb]

@ktsn Aha! I had originally posted my question in the VTI feedback thread, but was redirected here...

My question was:

"Will it be possible for VTI to catch TypeScript type errors by annotating types via eg. myProp: Object as PropType<MyType>?"

[ktsn]

Yes, it will be possible! We already have rough idea to achieve it.