如何使用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泛型函数的类型，但这不能回答我的问题。 我知道我可以执行以下操作：

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

但是，我想分别声明函数的类型。 Typescript可以吗？

Answer 1

您必须在某个地方声明泛型类型才能使其正常工作。

类型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> = ()

希望这可以帮助。 快乐的编码。