TypeScript - 如何从对象数组推断类型

Question

我正在使用 TypeScript 构建一个 React 表单组件，并且想要输入我的表单返回的数据。

我的组件接受一个名为“fields”的道具，其结构如下：

const fields = [
   {
      name: "title",
      default: "",
      data: undefined,
      size: 2
   },
   {
      name: "users",
      default: [],
      data: [{id: 1, ...}]
      size: 8
   },
]

我想找到一种方法来根据“字段”变量检索组件返回的数据类型。 所以，基本上，我想得到这样的东西：

type FormData = {
   title: string;
   users: Array<{id: number, ...}>
}

最好的解决方案是根据“数据”键推断不同的类型。 如果“数据”存在，则该字段将与数据具有相同的类型，否则为“默认”键的类型。 应忽略所有其他键。

我相信我应该使用 generics 来实现这一点，但我什至不确定这在 TS 中是否可行，我不得不承认我无法弄清楚......

有没有人已经遇到过这种情况并找到了类似问题的解决方案？

非常感谢！

Answer 1

基于给定的数组fields ，我们可以创建具有以下泛型类型的FormData类型，只要将fields变量初始化as const以阻止 TypeScript 扩大string文字。

const fields = [
  {
      name: "title",
      default: "",
      data: undefined,
      size: 2
  },
  {
      name: "users",
      default: [],
      data: [{id: 1}],
      size: 8
  },
] as const

type FormData<T extends readonly { name: st
  [E in T[number] as E["name"]]: E["data"] 
    ? E["default"]
    : E["data"]
}

type Result = FormData<typeof fields>
// type Result = {
//   title: "";
//   users: readonly [{
//       readonly id: 1;
//   }];
// }

这可能会或可能不会在您的组件的上下文中起作用。 但是您没有向我们展示组件本身。 这是基于您问题中提供的信息的解决方案。

操场