TypeScript：如何使用泛型输入 react-query useMutation onError？

Question

考虑一个自定义的useSignUp 钩子，其中mutate() 函数需要一些字段（在此示例中为name 和email）：

export default function App() {
  const name = "David";
  const email = "david@gmail.com";
  const signupMutation = useSignUp();

  return (
    <button
      onClick={() => {
        signupMutation.mutate(
          { name, email },
          {
            onSuccess: (result) => {
              ...
            },
            onError: (result) => {
              // Wanted: result of type ErrorResult<"name" | "email">
            }
          }
        );
      }}
    >
      Sign Up
    </button>
  );
}

在这种情况下，我希望onError 的结果为ErrorResponse<"name" | "email"> 类型。但是，我得到了ErrorResponse<string>。

这是为什么呢？我如何指示 TypeScript 根据传递的数据推断特定类型（即"name" | "email"，而不是string）？

这是我输入useSignUp的方式：

type SuccessResponse = {
  userId: string;
};

type ErrorResponse<T> = {
  userId?: string;
  formErrors?: Array<{
    field: T;
    type: string;
  }>;
};

export const useSignUp = <T extends string>() => {
  return useMutation<SuccessResponse, ErrorResponse<T>, Record<T, string>>(
    (data) => {
      return new Promise((resolve, reject) => {
        // Some logic here to either return a success or an error response
        if (Math.random() > 0.5) {
          resolve({
            userId: "1234"
          });
        } else {
          reject({
            formErrors: [
              {
                field: "email", // I want TypeScript to complain if it's neither "name" nor "email"
                type: "ALREADY_EXISTS"
              }
            ]
          });
        }
      });
    }
  );
};

Answer 1

你已经声明了一个带有通用错误字段的钩子，如果你不提供参数，它默认为一个字符串：

export const useSignUp = <T extends string>() => {
  return useMutation<SuccessResponse, ErrorResponse<T>, Record<T, string>>(...)
}

所以一定要覆盖它：

type Field = 'name' | 'email';

// ...

useSignUp<Field>();

如果要根据提交的值键入错误：

const mutatedValues = {
  name: "David",
  email: "david@gmail.com"
};
const signupMutation = useSignUp<keyof typeof mutatedValues>();

onError: (result) => {
  result.formErrors?.forEach((e) => {
    const { field } = e; // field is 'name' | 'email'
  });
}