Extending a type for a custom hook

Issue

I have created a custom hook like this:

export const useCreateAccount: UseCreateAccountOutputs = () => {
     ...

     return { error, loading, createAccount };
};

And I can correctly create the type like this:

type CreateAccountFn = () => Promise<void>;
type UseCreateAccountOutputs = () => {
    loading: boolean;
    error: string | null;
    createAccount: CreateAccountFn;
};

However, I've created multiple custom hooks and don't want to repeat this all the time:

loading: boolean;
error: string | null;

I want to be able to create a type that extends this type:

export type CustomGraphqlHookOutputs = () => {
    loading: boolean;
    error: string | null;
};

How can I get this to work? I have tried this:

type UseCreateAccountOutputs = CustomGraphqlHookOutputs &
    (() => {
        createAccount: CreateAccountFn;
    });

And this:

type UseCreateAccountOutputs = () => {
    ...CustomGraphqlHookOutputs,
    createAccount: CreateAccountFn;
};

But neither work. Can someone let me know what I'm doing wrong?

Solution

Issue

I don't think you want CustomGraphqlHookOutputs to be a function, you want it to be the return type of the function, not the type of being a function.

In other words, instead of

export const useCreateAccount: UseCreateAccountOutputs = () => {
   ...

   return { error, loading, createAccount };
};

You want

export const useCreateAccount = (): UseCreateAccountOutputs => {
   ...

   return { error, loading, createAccount };
};

Notice where the UseCreateAccountOutputs type is moved to. Instead of typing the useCreateAccount hook it's now typing the hook's return value.

Solution

I suggest:

type CreateAccountFn = () => Promise<void>;

type CustomGraphqlHookOutputs = {
  loading: boolean;
  error: string | null;
};

type UseCreateAccountOutputs = CustomGraphqlHookOutputs & {
  createAccount: CreateAccountFn;
};

...

const useCreateAccount = (): UseCreateAccountOutputs => {
  ...

  return { error, loading, createAccount };
};

Answered By - Drew Reese