如何为TanStack Table的Meta泛型正确映射React Hook Form类型？

问题描述 #

将React Hook Form的useForm返回对象传入TanStack Table的meta属性时，原类型扩展使用any导致后续丢失类型推断能力：

declare module '@tanstack/react-table' {
  interface TableMeta<TData extends RowData> {
    formMethods?: UseFormReturn<any>;
  }
}

示例场景中，formMethods拥有明确的表单值类型，但传入Table的meta后类型被降级为UseFormReturn<any> | undefined，无法获得准确的类型提示。

解决方案 #

1. 扩展TableMeta的泛型支持 #

修改模块扩展代码，给TableMeta新增一个可选泛型参数TForm，用于指定表单值的具体类型：

import { UseFormReturn } from 'react-hook-form';
import { RowData } from '@tanstack/react-table';

declare module '@tanstack/react-table' {
  // 新增TForm泛型参数，默认值设为unknown
  interface TableMeta<TData extends RowData, TForm = unknown> {
    formMethods?: UseFormReturn<TForm>;
  }
}

2. 使用时保留类型推断 #

定义表单值的类型（或直接复用useForm的泛型参数），在Table组件中显式指定泛型，或让TypeScript自动推断：

// 定义表单值类型
type FormValues = {
  phoneNumber: string;
  openingHours: {
    mo: string;
    tu: string;
    we: string;
    th: string;
    fr: string;
    sa: string;
    su: string;
  };
};

// 初始化formMethods，类型自动推断为UseFormReturn<FormValues>
const formMethods = useForm<FormValues>();

// 使用Table时，显式指定TForm为FormValues
<Table<RowData, FormValues>
  // ...其他必要props
  meta={{ formMethods }}
/>

此时从Table实例或meta中获取formMethods时，它的类型会保持为UseFormReturn<FormValues> | undefined，完全保留原有的类型推断能力。

轻量化替代方案（无需全局类型扩展） #

如果不想修改全局类型，可以在传入meta时直接断言类型：

<Table
  // ...其他props
  meta={{ formMethods } as { formMethods: typeof formMethods }}
/>

这种方式无需全局类型修改，但需要每次使用时手动处理类型，适合临时场景。

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