TypeScript无法通过泛型键推断对象值类型问题求助

问题分析 #

你当前的GridColumn类型定义中，field和renderCell的参数类型没有强绑定到RowData的具体键上。TypeScript在处理columns数组时，会将所有field对应的RowData值类型合并为联合类型，导致renderCell的cellValue被推断成number | { label: number }，而非对应字段的具体类型。

解决方案 #

修改GridColumn的类型定义，将其改为基于RowData所有键的联合类型，让每个列的field和renderCell参数类型严格绑定：

import React from 'react';

// 重新定义GridColumn为联合类型，每个成员对应RowData的一个键
export type GridColumn<RowData extends object> = {
  [K in keyof RowData]: {
    field: K;
    renderCell?: (cellValue: NonNullable<RowData[K]>) => React.ReactNode;
  };
}[keyof RowData];

export type TableProps<RowData extends object> = {
  columns: GridColumn<RowData>[];
  rows: RowData[];
};

export const useTable = <RowData extends object>(props: TableProps<RowData>) => {
  // 你的Hook逻辑实现
};

使用示例 #

调整类型后，TypeScript会正确推断每个renderCell的参数类型：

const tableHook = useTable({
  columns: [
    {
      field: "age",
    },
    {
      field: "age2",
      // cellValue现在被正确推断为{ label: number }
      renderCell: (cellValue) => <span>{cellValue.label}</span>
    },
  ],
  rows: [
    {
      age: 11,
      age2: { label: 11 },
    },
    {
      age: 22,
      age2: { label: 22 },
    },
  ]
});

原理说明 #

这种定义方式让GridColumn<RowData>成为由RowData每个键对应的列类型组成的联合类型。当你定义columns数组时，TypeScript会为每个元素推断出具体的联合成员，从而确保renderCell的参数类型严格匹配field所指向的RowData键的类型，避免了联合类型的错误推断。

内容的提问来源于stack exchange，提问作者Oleh_Petryk_UA