[vue3] Props type inference breaks, if custom-validator is present

[MarcRoemmelt]

Version

3.0.4

Reproduction link

https://github.com./MarcRoemmelt/vue-lost-proptypes

Steps to reproduce

1. Clone project
2. Install dependencies
3. Check App.vue intellisense for props-typings in setup(props) or this.$props

What is expected?

Type inference for all props should work regardless of custom-validator

What is actually happening?

If a validator function is present in any prop, the type inference breaks. Interestingly, if the validator is an arrow-function it it works.

[yyx990803]

This is a known issue and is a limitation of TypeScript handling circular inference of ThisType (which is only present if using a non-arrow function).

There is currently no fix for this (will have to be upstream in TS) so using arrow function is the recommended workaround.

[kuanyui]

This issue still exists even if using an arrow function as the validator of a prop. (vue 3.0.7, typescript 4.2.3)

[JensDll]

@kuanyui You will still need to type the validators parameter:

size: {
  type: String,
  default: 'md',
  validator: (x: string) => { ... }
}

[kuanyui]

@kuanyui You will still need to type the validators parameter:

size: {
  type: String,
  default: 'md',
  validator: (x: string) => { ... }
}

@JensDll Wow magic it works! So fantastic! Thanks!