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

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]

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

[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. 😉