TypeScript React组件属性方法返回类型作为其他属性参数类型

你当前类型推断失效的核心原因有两点：

• 泛型作用域设置错误：你将V extends SortableValue定义在TableColumn和Table的根泛型上，这个泛型参数是所有列共享的，TypeScript无法将单个列内部的field/valueGetter类型和同列的valueFormatter参数做绑定，最终V会被拓宽为所有可能值的联合类型SortableValue。
• 类型关联缺失：TableColumnWithDataField中的valueFormatter第一个参数V，没有和所选field对应的数据源字段类型做映射，TypeScript无法感知你具体选了哪个字段，自然拿不到对应字段的精确类型。

核心思路是把泛型判断下沉到单个列的类型分支中，用条件类型+infer关键字做同列配置的类型关联，不要在最外层设置所有列共享的值泛型。
完整可运行的类型代码如下：

import React, { ReactNode } from 'react';

export type PickByType<T, V> = {
    [P in keyof T as T[P] extends V ? P : never]: T[P]
};

type SortDirection = 'asc' | 'desc';
type SortableValue = string | number | boolean | null | undefined | Date;

type ValueGetter<D extends object, R extends SortableValue> = (row: D) => R;
type ValueFormatter<V extends SortableValue, D extends object> = (value: V, row: D) => string;
type RenderCell<V extends object, D extends object> = (values: V, row: D) => ReactNode;

// 工具类型：提取单个列对应的实际值类型
type ColumnValue<D extends object, C> = 
  C extends { valueGetter: (row: D) => infer V } ? V
  : C extends { field: keyof D } ? D[C['field']]
  : never;

// 三类列定义，自动关联同列valueFormatter的参数类型
type TableColumn<D extends object, Values = Record<string, SortableValue>> = 
  | {
      label: ReactNode,
      field: keyof PickByType<D, SortableValue>,
      valueGetter?: never,  
      valueFormatter?: (value: ColumnValue<D, this>, row: D) => string,
      renderCell?: RenderCell<Values, D>,
      sortable?: boolean,
    }
  | {
      label: ReactNode,
      field: string,
      valueGetter: ValueGetter<D, infer V extends SortableValue>,
      valueFormatter?: (value: V, row: D) => string,
      renderCell?: RenderCell<Values, D>,
      sortable?: boolean,
    }
  | {
      label: ReactNode,
      field?: never,
      valueGetter?: never,
      valueFormatter?: never,
      renderCell: RenderCell<Values, D>,
      sortable?: never,
    };

// 附加问题1实现：聚合所有列的值类型
type AggregateRowValues<D extends object, TC extends readonly TableColumn<D>[]> = {
  [C in TC[number] as C['field'] extends PropertyKey ? C['field'] : never]: ColumnValue<D, C>
};

// 附加问题2实现：提取所有支持排序的列field
type ValidSortField<D extends object, TC extends readonly TableColumn<D>[]> = {
  [C in TC[number]]: C['sortable'] extends true ? C['field'] : never
}[number];

export type TableProps<D extends object, TC extends readonly TableColumn<D, AggregateRowValues<D, TC>>[]> = {
    data: D[],
    columns: TC,  
    sortDefaultColumn?: ValidSortField<D, TC>,
    sortDefaultDirection?: SortDirection,
};

const Table = <D extends object, const TC extends readonly TableColumn<D, AggregateRowValues<D, TC>>[]>(props: TableProps<D, TC>): null =>
{
  console.log(props);
  return null;
};

用你提供的使用示例测试，所有类型推断都符合预期：

• 绑定date字段的列，valueFormatter第一个参数自动推断为Date | undefined，和数据源字段类型完全匹配，可以直接调用日期方法不会报类型错误。
• 自定义custom计算列，valueFormatter第一个参数自动推断为string，和valueGetter的返回值类型完全一致。
• 所有列的renderCell第一个参数自动聚合为{ date: Date | undefined; custom: string }，以列的field为键，对应值为列实际类型，满足附加问题1的要求。
• 只有标记了sortable: true的列的field值可以传给sortDefaultColumn，传入其他值会直接报类型错误，满足附加问题2的要求。

• 移除了原定义中TableColumn根上的共享泛型V，在单个列的类型分支内用infer提取valueGetter返回值、field对应字段类型，直接绑定到同列的valueFormatter参数上，从根源解决类型拓宽问题。
• 新增ColumnValue工具类型，统一提取单个列的实际值类型，减少重复的条件判断逻辑。
• 新增AggregateRowValues工具类型，遍历传入的列配置数组生成值聚合类型，传入所有列的renderCell作为第一个参数类型。
• 新增ValidSortField工具类型，遍历列配置只提取可排序列的field，作为默认排序列的合法值范围。
• 组件泛型用const修饰，固定传入columns的字面量类型，避免TypeScript将对象类型拓宽丢失精确的字段信息。

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