javascript - 具有不同类型数量的 typescript 接口(interface)

Question

我有一个像这样的自定义钩子(Hook)，我想让请求参数可选并且需要响应:

function useRequest<T, S = any>(api: (input?: S) => Promise<T>) {
  const [response, setResponse] = useState<T | null>(null);

  const fetchData = useCallback(
    (input?: S) => {
      api(input)
        .then((data) => {
          setResponse(data as T);
        })
    },
    [api],
  );
  return { response, fetchData };
}

基本上我想打电话useRequest像这样:

function A()
{
  //return a promise
}
function B(p1: boolean) {
  //return a promise
}

useRequest<ResponseA>(A)
useRequest<ResponseB, boolean>(B)

但我不能使用第二个，因为 boolean与 boolean | undefined 不兼容。

Answer 1

您不必将自己限制为只有一个参数，使用tuples in rest parameters您可以捕获参数的类型并将它们展开回新函数。这样做的效果是保留了函数的数量:

import { useState, useCallback} from 'react'

function useRequest<T, P extends any[]>(api: (...params: P) => Promise<T>) {
  const [response, setResponse] = useState<T | null>(null);

  const fetchData = useCallback(
    (...params: P) => {
      api(...params)
        .then((data) => {
          setResponse(data as T);
        })
    },
    [api],
  );
  return { response, fetchData };
}


type ResponseA = { a: string }
type ResponseB = { b: string }
declare function A(): Promise<ResponseA>;
declare function B(p1: boolean): Promise<ResponseB>;

useRequest(A)
useRequest(B)

Playground Link