问题:带有 TypeScript 的 Vue 道具类型

当 prop 类型为 Number、String 或 Boolean 时,它会立即给出正确的类型:

但是当 prop 类型为 Object 时,它将是 any 类型:

当我将 Object 转换为返回您想要的接口的函数时,它也会被赋予正确的类型:

我在 options.d.ts 中找到了道具类型声明

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

但我不知道它是什么意思,它是如何推断类型的?

解答

这就是所谓的_构造函数类型_。

更严格地说,这个属性可以以下列不同的方式出现:

• 作为泛型函数(): T返回指定类型T;

• 作为泛型构造函数new (...args): T & object,使用object类型的附加属性创建指定类型T的对象。

Object类型满足第二个变体,即它是一个具有一些构造函数属性的类。它具有以下定义(来自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
}

请注意,这是可能的最通用的构造函数,因此它可能会潜在地返回 any 可能的值。所以转译器准确地告诉你——“你有一个类,它的构造函数返回any”。

似乎您可以只使用User作为属性类型。因为它也是一个类,我想它会有new (...args) => User的签名,所以它会准确地推断出你需要的类型。

upd:错过了问题中的接口定义。好吧,如果没有理由将其改为类,那么正确的类型(和用法)似乎是函数:() => User,而不是Object。