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;
//   }];
// }

這可能會或可能不會在您的組件的上下文中起作用。 但是您沒有向我們展示組件本身。 這是基於您問題中提供的信息的解決方案。

操場