Typescript Pick<> 类型失败 : Argument of type '"foo "' is not assignable to parameter of type ' Pick<Bar, "foo">'

标签 typescript typescript2.0

我有一个用例,我认为它非常适合 Typescript 的 Pick类型。

这是一个简化的例子:

interface CreditCard {
  name: string;
  year: number;
  expired: boolean;
}

function setValue(key: keyof CreditCard, value: Pick<CreditCard, typeof key>) {
  // do stuff...
}

但是,当我尝试调用这个函数时:

setValue("name", "rick");

Typescript (2.3.4) 出现以下错误:

error TS2345: Argument of type '"rick"' is not assignable to parameter of type 'Pick<CreditCard, "name" | "year" | "expired">'.

此外,我没有有一个 CreditCard 的实例可以作为参数传入,因此更改函数以获取 CreditCard作为第三个参数在我的用例中是不可能的。

最佳答案

Pick<Obj, Props>创建一个看起来像 Obj 的类型仅具有 Props 指定的属性,而您的示例试图使用它来获取单个属性的类型,而应该像这样完成:CreditCard[KeyType]

您的 setValue 函数应如下所示:

function setValue<K extends keyof CreditCard>(key: K, value: CreditCard[K]) {
  // do stuff...
}

您为 CreditCard 的一个或多个键设置了一个通用类型 K,它是一个字符串文字类型。 .然后使用该类型从 CreditCard 中获取属性的类型.当调用该函数时,类型系统将缩小 K尽可能地使用它来找出 value 的特定类型争论。

关于Typescript Pick<> 类型失败 : Argument of type '"foo "' is not assignable to parameter of type ' Pick<Bar, "foo">',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44678263/

相关文章:

reactjs - 如何使用 TypeScript 和 React-Router 4、5 或 6 重写 protected /私有(private)路由?

typescript - 如何在 TypeScript 中合并两个枚举

node.js - 如何将 TypeScript 中的 ExpressJS 部署到 Azure?

javascript - SAP Cloud SDK for JavaScript 的 AttachmentService 问题

javascript - 单击 mat-button 隐藏一个组件并显示其他一个 Angular 9

angular - 异步/等待 __generator 未定义

typescript - 在 TypeScript 中使用 is 运算符的原因是什么?

c# - 类型 null 不可分配给类型 IJobDetails(这是我的接口(interface))

html - 如何以 Angular 动态设置 sibling 的最大宽度

angular - 使用 ComponentResolver 动态创建 Angular 2 组件时传递输入