首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Typescript Pick数组未按预期工作

Typescript是一种静态类型的编程语言,它是JavaScript的超集,可以在编译时进行类型检查。Pick是Typescript中的一个内置类型操作符,用于从给定类型中选择指定的属性。

当使用Pick操作符选择一个数组时,它不会按预期工作,因为Pick操作符是用于选择对象的属性,而不是数组的元素。如果要选择数组的元素,可以使用索引类型操作符keyof和映射类型操作符。

以下是解决这个问题的一种方法:

代码语言:txt
复制
type PickArray<T, K extends keyof T> = {
  [P in K]: T[P];
};

const pickArray = <T, K extends keyof T>(arr: T[], keys: K[]): PickArray<T, K>[] => {
  return arr.map(item => {
    const pickedItem: PickArray<T, K> = {} as PickArray<T, K>;
    keys.forEach(key => {
      pickedItem[key] = item[key];
    });
    return pickedItem;
  });
};

// 示例使用
interface Person {
  name: string;
  age: number;
  gender: string;
}

const people: Person[] = [
  { name: 'Alice', age: 25, gender: 'female' },
  { name: 'Bob', age: 30, gender: 'male' },
  { name: 'Charlie', age: 35, gender: 'male' },
];

const pickedPeople = pickArray(people, ['name', 'age']);
console.log(pickedPeople);

上述代码中,我们定义了一个PickArray类型,它接受一个泛型T和一个泛型K,其中T表示数组中元素的类型,K表示要选择的属性的键。然后,我们定义了一个pickArray函数,它接受一个数组和一个属性键的数组,并返回一个新的数组,其中每个元素只包含指定的属性。

在示例中,我们定义了一个Person接口表示人的属性,然后创建了一个包含多个人的数组。我们使用pickArray函数选择了每个人的nameage属性,并将结果打印到控制台上。

这是一个解决Typescript Pick数组未按预期工作的方法,它可以选择数组中的元素的指定属性。对于更复杂的需求,可以根据具体情况进行调整和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Typescript 中,这些类型工具真好用

你是否曾经用 TypeScript 写代码,然后意识到这个包没有导出我需要的类型,例如下面这段代码提示 Content 在 @example 中不存在: import {getContent, Content...这将导致我们的输入不能像预期的那样工作,因为 React 不会意识到状态的变化,因此不会呈现变化。 我们需要做的是用一个新对象调用 setEvent。...那你可能突然会问:为什么 TypeScript 没有捕捉到这个错误呢? 从技术上讲,你可以用 useState 改变对象。...我们仍然可以改变嵌套的属性和数组而不会出现错误: export function EditEvent() { const [event, setEvent] = useState<Readonly<...或者,如果我们只希望某些键被允许包含在我们的 updateEvent 函数中,我们可以使用 Pick 类型工具来指定允许的键: function updateEvent(newEvent: Pick<Event

20930

TypeScript 系列之函数

这其实就是 JavaScript 中的闭包,但是闭包是如何工作的,以及使用闭包的好处和坏处并不在本文的讨论范围之内,不过闭包仍然是非常重要的,不论在 JavaScript 还是 TypeScript 中都非常有用...这可以帮助减少在维护代码类型完备时的代码量和工作量。 可选参数和参数默认值 在 TypeScript 中,所有参数都被假定是必须的。...编译器会自动创建一个数组赋值给 ... 后面的变量名,你可以在函数体中使用该变量。......this 的工作机制是众所周知的难以理解,尤其是把函数作为参数或者返回值的时候。...我们可以通过一些技巧来确保返回的函数在执行时 this 是我们预期之内的,不论后期该函数是如何被调用的,this 总是指向 deck 对象。

1.3K51
  • 掌握 TypeScript:20 个提高代码质量的最佳实践

    这意味着,如果你声明一个变量为字符串类型,TypeScript 将确保分配给该变量的值确实是字符串而不是数字,例如。这有助于您及早发现错误,并确保您的代码按照预期工作。...通过遵循这个最佳实践,你将能够及早发现错误,并确保你的代码按照预期工作,从而为你节省时间和不必要的麻烦。...最佳实践 14:“只读”和“只读数组” 当在 TypeScript 中处理数据时,你可能希望确保某些值无法更改。这就是“只读”和“只读数组”的用武之地。...会报错,因为“point.x”是只读的 “只读数组”与“只读”类似,但是用于数组。...它使一个数组变成只读状态,在创建后不能被修改。

    4.1K30

    类型体操:探究 TypeScript 内置高级类型

    TypeScript 类型编程 TypeScript 的类型系统,最基本的是简单对应 JavaScript 的 基本类型,比如 string、number、boolean 等,然后是新增的 tuple、...这里会有一个问题,就是函数声明支持不同类型的重复编写问题,比如我的一个函数要接收一个数组,然后从中取中一个元素。 一旦我们传入的数组类型不同,都要写多一个 type 别名,未免太繁琐。...Pick Pick 的作用是,从 T 类型(对象类型)中,提取出 K(联合类型)圈定的 key,返回一个新的对象类型。...看看 Pick 的实现: /** * From T, pick a set of properties whose keys are in the union K */ type Pick<T, K...更多类型体操学习 还有更多的类型编程的技巧因为篇幅原因就不说了,比如还有: as 运算符可以做类型索引的重映射; 通过数组的 "length" 可以实现数字运算; 通过递归实现循环逻辑; 一些特殊的类型

    83810

    typescript 高级技巧

    以下文章千年山月行,作者山月行 用了一段时间的 typescript 之后,深感中大型项目中 typescript 的必要性,它能够提前在编译期避免许多 bug,如很恶心的拼写问题。...以下是我在工作中总结到的比较实用的 typescript 技巧。 01 keyof keyof 与 Object.keys 略有相似,只不过 keyof 取 interface 的键。...既然了解了 keyof,可以使用它对属性做一些扩展, 如实现 Partial 和 PickPick 一般用在 _.pick 中 type Partial = { [P in keyof T...;} const a: A = { a: 3, b: 4} 08 Record & Dictionary & Many 这几个语法糖是从 lodash 的 types 源码中学到的,平时工作中的使用频率还挺高...或者编辑 .vs-code/settings.json { "typescript.tsdk": "node_modules/typescript/lib"} 11 Typescript Roadmap

    1.1K20

    《现代Typescript高级教程》泛型和类型体操

    现代JavaScript高级小册 深入浅出Dart 现代TypeScript高级小册 泛型和类型体操 泛型和类型体操(Type Gymnastics)是 TypeScript 中高级类型系统的重要组成部分...Pick PickTypeScript 中的另一个内置泛型函数,它可以从给定类型 T 中选择指定的属性 K 组成一个新的类型。...console.log(nameAndAge); // 输出: { name: 'John', age: 25 } 在上面的示例中,pickProperties 函数接受一个泛型参数 T 和一个属性数组...通过使用 Pick,我们将从给定对象 obj 中选择指定的属性 keys,并创建一个新的对象。...这个例子结合了泛型、内置泛型函数 Pick、keyof 操作符和 extends 关键字,展示了如何在 TypeScript 中处理复杂的类型操作和转换。

    33930

    TypeScript: 请停止使用 any

    我们看到的大多数用法都表明我们正在处理 TypeScript 中的基本类型。在文档中我们可能会找到: (…)来不使用 TypeScript 或第3方库编写的代码的值。...return convertedResponse } else { throw Error.new("Invalid response" } } 添加类型时,我必须编写大量代码,any工作量较少...可能不是,如果编写的代码没有类型,则我们可能需要添加防御性代码,以确保参数和变量具有正确的类型,以使程序能够按预期执行。...我可能会为此重构几个小时 我们总是可以修改和适应新的类型定义, TypeScript 为此提供了一组实用功能。我们可以 Pick 习惯从先前定义的类型中选择所需的属性。...User = { id: number; firstName: string; lastName: string; age: number; } type UserParams = Pick

    1.1K21

    TypeScript 类型体操 - 基础操作

    比如数组长度不确定、字符串长度不确定、索引类型层数不确定等。...# 数值计算 TypeScript 类型系统中没有加减乘除运算符,但是可以通过构造不同的数组然后取 length 的方式来完成数值计算,把数值的加减乘除转化为对数组的提取和构造。...Pick 是 ts 提供的内置高级类型,就是取出某个 Key 构造新的索引类型: type Pick = { [P in K]: T[P]; }; 可选的意思是这个索引可能没有...,没有的时候,那 Pick 就是空的,所以 {} extends Pick 就能过滤出可选索引。...元组类型也是数组类型,但 length 是数字字面量,而数组的 length 是 number。可以用来判断元组类型。 函数参数处会发生逆变,可以用来实现联合类型转交叉类型。

    1.9K60

    卧槽!Lodash凉了,这个库竟比它还好用...

    Typescript编写:使用起来更安全,不用担心变量类型问题; 全面支持es6+的新特性:它去除了lodash身上一些过时的方法(这些方法能够使用es6+新特性快速简单实现); 方法更全面:包含数组相关...a : b) // => ra _.objectify( gods, g => g.name.toLowerCase(), g => _.pick(g, ['power', 'rank...1000 }, api.users.list) // exponential backoff await retry({ backoff: i => 10**i }, api.users.list) pick...方法 pick 用来从对象中选取所需的属性 import { pick } from 'radash' const fish = { name: 'Bass', weight: 8, source...点击链接打开Playground页面,在编辑器里输入内容,点击 run 按钮,即可得出结果 Radash 是一个全新 JS 工具库,大小只有 Lodash 的五分之一,而且全面使用Typescript编写

    53710
    领券