【问题标题】:Vue props type with TypeScript使用 TypeScript 的 Vue 道具类型
【发布时间】:2018-12-10 06:32:48
【问题描述】:

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

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

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

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

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

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

【问题讨论】:

  • 你在required中有错字

标签: typescript vue.js


【解决方案1】:

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

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

  • 作为泛型函数(): T返回指定类型T
  • 作为泛型构造函数new (...args): T &amp; 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”。

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


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

【讨论】:

  • 想了很多,但我仍然有一个问题:它如何推断出我需要的类型?还有一个问题,当我将对象转换为接口时,Object as User 会出错。 “ObjectConstructor”类型无法转换为“User”类型。 “ObjectConstructor”类型中缺少属性“id”。 这让我很奇怪。为什么?再想想。
  • 您不必投射Object as User。如果可以创建class User 而不是interface User(即如果它不会有很大的开销——我认为不会),你可以只写propA: {type: User},而不使用Object .我想我稍后会更新我的答案,以提供更详细的说明。
  • 也许我首先理解的是,如果道具类型是函数,根据type Prop&lt;T&gt; = { (): T } | { new (...args: any[]) =&gt; T &amp; object },它将创建属性为函数返回值的对象。在问题中,属性是用户,是吗?
  • 对。你有() =&gt; User 类型的对象,正如你在as 关键字中明确指出的那样。它适合第一个模板:{ () =&gt; T }(因为函数只是一个带有调用签名的对象);与T = User。所以,Prop&lt;T&gt; 推断为Prop&lt;User&gt;
猜你喜欢
  • 2019-01-29
  • 1970-01-01
  • 1970-01-01
  • 2021-03-18
  • 1970-01-01
  • 2021-06-29
  • 2018-08-20
  • 2019-11-10
  • 2021-02-01
相关资源
最近更新 更多