如何为UseMutationOptions第三个泛型传入元组类型？

React Query的UseMutationOptions第三个泛型参数对应mutationFn的入参类型，但要注意**mutationFn本质上只能接受单个参数**。如果你想传递多个参数，有两种常见处理方式：

1. 元组类型方案（对应你的useTest2需求） #

当你写mutationFn: (a: string, b: string[]) => testFn(a, b)时，TypeScript会把这两个参数解析为元组的解构，所以对应的泛型类型应该是元组[string, string[]]。修改后的useTest2代码如下：

const testFn = async (a: string, b: string[]) => { return 1 }

export const useTest2 = (
  options?: UseMutationOptions<number, Error, [string, string[]]>,
) =>
  useMutation({
    mutationFn: (a: string, b: string[]) => testFn(a, b),
    ...options,
  });

调用这个hook的mutate方法时，需要传入元组形式的参数：

const { mutate } = useTest2();
mutate(['testStr', ['arrItem1', 'arrItem2']]);

2. 对象类型方案（你的useTest实现） #

这种方式是把多个参数包裹成一个对象，泛型指定为对应的对象类型，优点是参数语义更清晰，调用时不用记忆参数顺序：

type MutationFnParams = {
  a: string,
  b: string[]
}

export const useTest = (
  options?: UseMutationOptions<number, Error, MutationFnParams>,
) =>
  useMutation({
    mutationFn: ({ a, b }: MutationFnParams) => testFn(a, b),
    ...options,
  });

调用时传入对象：

const { mutate } = useTest();
mutate({ a: 'testStr', b: ['arrItem1', 'arrItem2'] });

补充说明 #

• TypeScript具备自动类型推断能力，即使不手动指定UseMutationOptions的第三个泛型，它也能根据mutationFn的参数自动推导类型，但手动指定可以让代码更清晰，提前发现类型错误。
• 两种方案都可行，选择哪种取决于团队代码风格和参数的语义清晰度。

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