重载反应回调

Question

我正在尝试严格键入钩子的返回回调。

• 如果未指定 InputType，则在调用函数时不需要输入，如果提供了任何输入，则应报错。
• 如果指定了InputType，它应该期望输入类型，如果不是指定的类型，则会报错。

例子

 // overload attempts
 async function someFnAsyncCB(): void;
 async function someFnAsyncCB<InputType>(input: InputType): void;

function useSomeFnHook<InputType = undefined>() {
 const [reactiveVar, setReactiveVar] = useState("");
 // ...
 const someFnAsync = useCallback(
  async function someFnAsyncCB<InputType>(input?: InputType): void {
   // ...
  },
  [reactiveVar, etc],
 );
 return someFnAsync;
}

我的实现工作除了当 someFnAsync 没有使用输入调用但 InputType 被指定为未定义以外的其他类型时。 Typescript 应该抱怨我没有提供输入值。

我尝试重载函数，但 Typescript 没有将新的重载函数与原始函数关联。

我将如何实现我的初始目标？

Answer 1

当您不需要泛型类型时，您正在使用泛型类型。

替换

async function someFnAsyncCB<InputType>(input: InputType): void;

与

async function someFnAsyncCB(input: InputType): void;

修改后的钩子将如下所示：

function useSomeFnHook<InputType = undefined>() {
 const [reactiveVar, setReactiveVar] = useState("");
 // ...
 const someFnAsync = useCallback(
                              // No <Generic>
  async function someFnAsyncCB(input?: InputType): void {
   // ...
  },
  [reactiveVar, etc],
 );
 return someFnAsync;
}

关于泛型的文档：https://www.typescriptlang.org/docs/handbook/2/generics.html