Vue props type with TypeScript

Question

When a prop type is Number, String or Boolean, it will given the corrent type promty:

but when prop type is Object, it will be an any type:

and when i cast the Object to a function that returns the interface you’d like, it will be given the corrent type also:

I find the prop type declaration in options.d.ts

export type Prop<T> = { (): T } | { new (...args: any[]) => T & object }

But i do not know what mean is it, and how does it infer the type?

Answer 1

This is so-called constructor type.

More strictly, this property can appear in following different ways:

• as a generic function (): T returning the specified type T;
• as a generic constructor new (...args): T & object, creating the object of specified type T with additional properties from type object.

The Object type satisfies the second variant, i.e. it's a class with some constructor property. It has the following definition (from lib.es5.d.ts):

interface Object {
  /** The initial value of Object.prototype.constructor is the standard built-in Object constructor. */
  constructor: Function;
  // some more properties here
}

Note that this is the most general constructor possible, and so it could potentionally return any possible value. So the transpiler tells you exactly that - "you have a class whose constructor returns any".

Seems that you could just use User as property type. Since it's a class too, I suppose, it will have the signature of new (...args) => User, so it would infer exactly the type you need.

---

upd: missed the interface definition in the question. Well, if there's no reason to make it a class instead, the proper typing (and usage) seems to be the function: () => User, not Object.