时间戳

首页 > 解决方案 > 将 Object 转换为 KV 值数组

typescript - 将 Object 转换为 KV 值数组

问题描述

我想将对象转换为键/值对数组。例如：

const dict = { foo: 1, bar: 2, baz: "hi" };
const arr = dictToArray(dict);

Wherearr将被转换为类似于以下内容的类型强表示：

[
  ["foo", { foo: 1 }],
  ["bar", { bar: 2 }],
  ["baz", { baz: "hi" }]
]

从运行时的角度来看，这很简单，但我正在努力让打字顺风顺水。我的转换实现是：

export function dictToArray<T extends NonNullable<{}>>(obj: T): DictArray<T> {
  const out: any = [];

  for (const key of Object.keys(obj)) {
    out.push([key, { [key]: obj[key as keyof T] }]);
  }

  return out as DictArray<T>;
}

实用功能/类型在哪里：

export type DictArray<T> = [keyof T, Pick<T, keyof T>][];

我认为失败的是定义，DictArray特别是Pick参考。我这样说是因为数组中的每个元组都包含正确的运行时数据，但是作为键值对的元组的第二个元素被键入为完整的对象T。

在对象分配中，我会用一种{[K in keyof T]: V }分配类型映射每个道具，但我不确定数组的可比较语法是什么。我猜答案就在某个地方。

打字稿游乐场

标签： typescripttypescript-typingstypescript-generics

解决方案

请注意，所需的函数类型可能会与为什么 Object.keys 在 TypeScript 中不返回 keyof 类型中dictToArray提到的问题发生冲突？，其中 TypeScript 中的对象类型是开放的，并且值在运行时可以包含比编译器已知的更多的属性。这个：

function keys<T extends object>(obj: T) {
  return Object.keys(obj) as Array<keyof T>;
}

当你向它传递一个对象字面量时会正常工作，但如果你向它传递一个已经扩展了额外属性的类或接口的实例，则可能会产生意想不到的结果。只要您意识到这个问题并愿意面对出现的后果，那就太好了。

无论如何，我在这里dictToArray()打字的倾向是这样的：

type DictArray<T extends object> = 
  Array<{ [K in keyof T]: [K, Pick<T, K>] }[keyof T]>;

 declare function dictToArray<T extends object>(obj: T): DictArray<T>;

我们正在制作一个映射类型，它遍历每个键K并为其keyof T生成元组 [K, Pick<T, K>]。如果T看起来像{x: 1, y: 2}，这会产生类似的东西{x: ["x", {x: 1}], y: ["y", {y: 2}]}，它具有您想要的属性值，但仍然嵌套在对象类型中......所以我们索引这个对象keyof T以获得所需的union ["x", {x: 1}] | ["y", {y: 2}]。

您可以验证这是否为您提供了合理的类型：

const arr = dictToArray(dict);
/* const arr: DictArray<{
    foo: number;
    bar: number;
    baz: string;
}> */

哦，好吧，这实际上并没有显示太多。让我们强制编译器扩展它：

type ExpandRecursively<T> = 
  T extends object ? { [K in keyof T]: ExpandRecursively<T[K]> } : T;
type ArrType = ExpandRecursively<typeof arr>;
/* type ArrType = (
  ["foo", { foo: number; }] | 
  ["bar", { bar: number; }] | 
  ["baz", { baz: string; }]
  )[] */

因此，您可以看到它arr的类型是强类型元组的数组。万岁！

哦，等等，我看到你想要这种类型：

[
  ["foo", { foo: 1 }],
  ["bar", { bar: 2 }],
  ["baz", { baz: "hi" }]
]

其中，除了编译器不知道对象属性的字面值这一事实（您让编译器推断类型，因此它们被扩大到number与,或string相对）......呃，我离题了。12"hi"

我看到你想要这种类型：

[
  ["foo", { foo: number }],
  ["bar", { bar: number }],
  ["baz", { baz: string }]
]

这似乎代表了出现的条目的顺序。对象属性顺序在 JavaScript 中技术上是可观察的，尽管它并不总是按照人们期望的方式运行（JavaScript 是否保证对象属性顺序？）。但是在 TypeScript 类型中，对象属性顺序不应该是 observable。type等价于type {foo: number, bar: number, baz: string}。没有你应该做的类型系统测试可以区分一个和另一个。有时可以从类型系统中提取顺序信息，但这是一个糟糕的主意，因为它是不确定的（如何将联合类型转换为元组类型）。{bar: number, baz: string, foo: number}

因此，没有原则性的方法可以要求编译器为您提供上述类型，而不是说，

[
  ["foo", { foo: number }],
  ["baz", { baz: string }],
  ["bar", { bar: number }]
]

或任何其他订购。在可以想象的范围内，我们可以DictArray<T>为您提供所有可能排序的并集，但这会非常糟糕，即使对于小案例也可能不是特别有用。因此，除非您对如何生成它有病态的好奇，否则我不会打扰。

Playground 代码链接

推荐阅读