如何在 Typescript 中创建具有外部声明类型的泛型函数？

Question

我有以下功能（它是一个 React 钩子）：

type HandleEditFn = (name: string) => (data: any) => React.MouseEventHandler;

type useFormToggleHook = (params: {
    forms: {
        [propName: string]: React.ReactType;
    };
    formPropsFn?: (data: any) => object;
    refetch?: any;
}) => [...];

export const useFormToggle: useFormToggleHook = ({
    ...
}) {

    const handleEdit : HandleEditFn = name => data => e => {
        ...
    }

    return [handleEdit];

}

现在，我想让这个函数通用；因此，调用此钩子的组件可以执行以下操作：

const [handleEdit] = useFormToggle<UserData>(...);

所以，我在类型中添加了通用语法：

type HandleEditFn<T> = (name: string) => (data: T) => React.MouseEventHandler;

type useFormToggleHook<T> = (params: {
    forms: {
        [propName: string]: React.ReactType;
    };
    formPropsFn?: (data: T) => object;
    refetch?: any;
}) => [HandleEditFn<T>, ...];

// Type here doesn't work
export const useFormToggle: useFormToggleHook<T> = ({
    ...
}) {

    // Type is required here!
    const handleEdit : HandleEditFn<T> = name => data => e => {
        ...
    }

    return [handleEdit, ...];

}

当我为useFormToggle 函数添加useFormToggleHook<T> 时，我收到T 不是有效类型的错误。

---

我已阅读以下 Stackoverflow 帖子：TypeScript Type of generic function 但这并没有回答我的问题。我知道我可以做到以下几点：

export const useFormToggle : <T>(params: {
    forms: {
        [propName: string]: React.ReactType;
    },
    formPropsFn?: (data: any) => object;
    refetch?: any;
}) = ({ ... }) => ...

但是，我想单独声明函数的类型。打字稿可以做到这一点吗？

Answer 1

您必须在某处声明您的泛型类型才能使其工作。

type HandleEditFn 使 HandleEditFn 成为泛型，传递给它的任何东西都是 T。

您的问题是，您没有将实际类型传递给 HandleEditFn：

 const handleEdit : HandleEditFn<T> = name => data => e => {}

因为 T 不是在某处声明的类型。

要使其工作并在HandleEditFn 中声明 T，您必须这样称呼它：

const handleEdit : HandleEditFn<string> = name => data => e => {}

例如，这将创建数据字符串，但您可以传递任何类型或接口来定义 T 并将其用作数据。

同样适用于 useFormToggleHook：

export const useFormToggle: useFormToggleHook<string> = ()

希望这会有所帮助。编码愉快。