TypeScript React：从泛型推断组件Props的参数类型

要实现customValue的value参数根据对应列的属性类型自动推断，你需要调整类型定义，让ColumnSetting与具体的列键关联起来，而不是仅依赖整体的行数据类型T。

修改后的类型定义 #

import React from 'react';

// 新增列键泛型K，让value类型精准对应T中K属性的类型
type ColumnSetting<T, K extends keyof T> = {
  header: string;
  customValue?: (value: T[K], row: T) => React.ReactNode;
};

// 使用映射类型遍历T的每个键，为每个列绑定对应的ColumnSetting类型
type Props<T extends Record<string, unknown>> = {
  columns: {
    [K in keyof T]: ColumnSetting<T, K>;
  };
};

// 表格组件示例
const CustomTable = <T extends Record<string, unknown>>({ columns }: Props<T>) => {
  // 这里编写你的表格渲染逻辑
  return <table>{/* 渲染表头和行数据 */}</table>;
};

效果验证 #

在使用组件时，TypeScript会自动推断每个列customValue的value参数类型：

<CustomTable<{ title: string, percentage: number }>
  columns={{ 
    title: {
      header: 'Title'
    },
    percentage: { 
      header: 'Percentage', 
      // value被自动推断为number类型，类型检查生效
      customValue: (value) => `${value}%` 
    }
  }}
/>

• percentage列的value会被推断为number，如果尝试执行value + 'abc'这类不符合类型的操作，TypeScript会直接抛出错误。
• title列如果添加customValue，value会被推断为string类型。

原理说明 #

原来的Record<keyof T, ColumnSetting<T>>会让所有列的ColumnSetting仅关联整体的T类型，无法区分具体列对应的属性类型。改用映射类型{ [K in keyof T]: ColumnSetting<T, K> }后，每个列键K都会绑定到T[K]的具体类型，从而让TypeScript能够精准推断customValue的参数类型。

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