Let's consider these type definition for a react custom hook that has as params a mutation trigger and a mutation result of an api call of redux toolkit:

type UseCallToActionModalRendererParams<T extends (...args: any) => any> = {
    mutationTrigger: () => ReturnType<ReturnType<T>[0]>;
    mutationResult: ReturnType<T>[1];
};

type UseCallToActionModalRendererResult = {
    title: string;
};

type UseCallToActionModalRendererHook<T extends (...args: any) => any> = (
    params: UseCallToActionModalRendererParams<T>,
) => UseCallToActionModalRendererResult;

This doesn't work:

export const useCallToActionModalRenderer: UseCallToActionModalRendererHook = ({
    mutationTrigger,
    mutationResult,
}) => {

with the following error

Generic type 'UseCallToActionModalRendererHook' requires 1 type argument(s).ts(2314)
type UseCallToActionModalRendererHook<T extends (...args: any) => any> = (params: UseCallToActionModalRendererParams<T>) => UseCallToActionModalRendererResult

And this works:

export const useCallToActionModalRenderer = <T extends (...args: any) => any>({
    mutationTrigger,
    mutationResult,
}: UseCallToActionModalRendererParams<T>): UseCallToActionModalRendererResult => {

The custom hook is called with T set, for example, as this type , where useCancelDataMutation is a mutation of redux-toolkit.

It seems the same approach, with a definition or for full hook, or for input and outputs. But why first approach is failing?

Let's consider these type definition for a react custom hook that has as params a mutation trigger and a mutation result of an api call of redux toolkit:

type UseCallToActionModalRendererParams<T extends (...args: any) => any> = {
    mutationTrigger: () => ReturnType<ReturnType<T>[0]>;
    mutationResult: ReturnType<T>[1];
};

type UseCallToActionModalRendererResult = {
    title: string;
};

type UseCallToActionModalRendererHook<T extends (...args: any) => any> = (
    params: UseCallToActionModalRendererParams<T>,
) => UseCallToActionModalRendererResult;

This doesn't work:

export const useCallToActionModalRenderer: UseCallToActionModalRendererHook = ({
    mutationTrigger,
    mutationResult,
}) => {

with the following error

Generic type 'UseCallToActionModalRendererHook' requires 1 type argument(s).ts(2314)
type UseCallToActionModalRendererHook<T extends (...args: any) => any> = (params: UseCallToActionModalRendererParams<T>) => UseCallToActionModalRendererResult

And this works:

export const useCallToActionModalRenderer = <T extends (...args: any) => any>({
    mutationTrigger,
    mutationResult,
}: UseCallToActionModalRendererParams<T>): UseCallToActionModalRendererResult => {

The custom hook is called with T set, for example, as this type , where useCancelDataMutation is a mutation of redux-toolkit.

It seems the same approach, with a definition or for full hook, or for input and outputs. But why first approach is failing?

• reactjs
• typescript

1 Answer 1

But why first approach is failing?

Because you have to supply a type. You aren't supplying a type there.

From that type, the types of mutationTrigger and mutationResult within the body of useCallToActionModalRenderer are constrained, but there can be multiple distinct uses with different specific types.