如何重载React Hook返回的回调函数，严格匹配InputType的输入要求

问题原因 #

你当前的实现存在两个核心问题：

• 回调内部声明的InputType泛型和Hook外层的InputType泛型是完全独立的两个类型，没有关联
• 你定义的函数重载没有和返回的回调绑定，自然不会生效

实现代码 #

我们可以直接基于Hook的外层泛型InputType定义返回函数的类型，通过条件类型做分支判断，再给useCallback返回的回调做类型断言即可实现需求：

import { useCallback, useState } from "react";

function useSomeFnHook<InputType = undefined>() {
  const [reactiveVar, setReactiveVar] = useState("");
  
  // 定义返回函数的类型：根据InputType类型判断参数要求
  type SomeFnAsync = InputType extends undefined 
    ? () => Promise<void> 
    : (input: InputType) => Promise<void>;

  const someFnAsync = useCallback(
    // 内部参数用unknown兼容两种情况，运行时可自行补充参数校验逻辑
    async (input?: unknown) => {
      // 你的业务逻辑实现
    },
    [reactiveVar]
    // 把回调断言为我们定义好的严格类型
  ) as SomeFnAsync;

  return someFnAsync;
}

效果验证 #

// 场景1：不指定泛型
const fnWithoutInput = useSomeFnHook();
fnWithoutInput(); // 类型校验正常
fnWithoutInput(123); // 触发类型报错：预期0个参数，实际收到1个

// 场景2：指定泛型为string
const fnWithStringInput = useSomeFnHook<string>();
fnWithStringInput("test"); // 类型校验正常
fnWithStringInput(); // 触发类型报错：预期1个参数，实际收到0个
fnWithStringInput(123); // 触发类型报错：参数类型number无法赋值给string

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