typescript - 将 Object 转换为 KV 值数组

Question

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

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

在哪里 arr将被转换为类似于以下内容的类型强表示:

[
  ["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 的定义尤其是 选择 引用。我这样说是因为数组中的每个元组都包含正确的运行时数据，但是作为键值对的元组的第二个元素被键入为完整对象 T .
在对象分配中，我会使用 {[K in keyof T]: V } 映射每个 Prop 赋值类型，但我不确定数组的可比较语法是什么。我猜答案就在某个地方。

Typescript Playground

Answer 1

请注意，所需的 dictToArray函数类型可能与 Why doesn't Object.keys return a keyof type in TypeScript? 中提到的问题发生冲突。 ，其中 TypeScript 中的对象类型是开放的，并且值在运行时可以包含比编译器已知的更多的属性。这:

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

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

无论如何，我倾向于 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>;

我们正在制作 mapped type遍历每个键 K在 keyof T并生成 tuple [K, Pick<T, K>]为了它。如果 T看起来像 {x: 1, y: 2} , 这使得 {x: ["x", {x: 1}], y: ["y", {y: 2}]} ，它具有您想要的属性值，但仍嵌套在对象类型中...所以我们 index into此对象与 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" }]
]

除了编译器不知道 literal对象属性的值(您让编译器推断类型，以便将它们扩大到 number 和 string 而不是 1 、 2 或 "hi" )...呃，我跑题了。

我看到你想要这种类型:

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

这似乎代表了出现的条目的顺序。对象属性顺序在 JavaScript 中技术上是可观察的，尽管它的行为并不总是像人们期望的那样 ( Does JavaScript guarantee object property order?)。但在 TypeScript 类型中，对象属性顺序不应该是可观察的。类型 {foo: number, bar: number, baz: string}等价于类型 {bar: number, baz: string, foo: number} .没有你应该做的类型系统测试可以区分一个和另一个。有时可以从类型系统中提取订单信息，但这是一个糟糕的主意，因为它是不确定的 ( How to transform union type to tuple type)。
因此，没有原则性的方法可以要求编译器为您提供上述类型，而不是说，

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

或任何其他订购。在可以想象的范围内，我们可以制作 DictArray<T>给你所有可能的排序的联合，但这会非常糟糕，即使对于小案例也可能不是特别有用。所以除非你是 morbidly curious关于如何生成它，我不会打扰。

Playground link to code