[Toast]: Infer available toast types in showToast function

[anuraghazra]

https://stackoverflow.com/questions/51448291/how-to-create-a-generic-react-component-with-a-typed-context-provider

[anuraghazra]

After extensive experimentation and trying lot of things I concluded that getting the available toastTypes union is not possible in showToast function and here's why :-

On a surface level this looks pretty easy to do.
In <ToastProvider> we have the toastTypes prop and we pass available toasts in there like so

And it looks straight forward and we might do this just by infering the Union types from toastTypes with const assertion or just getting the keys with keyof.

But that actually does not work since the actual showToast methods definitions are already defined while creating the ContextProvider, in here:

interface ToastContextState extends ToastStateReturn {
  toastTypes: ToastTypes;
}

const ToastContext = React.createContext<ToastContextState | undefined>(
  undefined,
);

And thus it is not possible to get the union types from the toastTypes because it is a Record. so showToast method would always infer the {type} prop as "string" and there is no way to infer that.

export type ToastTypes = Record<
  string,
  React.FC<
    Pick<Toast, "content" | "id" | "isVisible"> & {
      hideToast: ToastStateReturn["hideToast"];
    }
  >
>;

I also tried using Generic functions too but that did not worked as well, because

• ReturnType<> could not infer the types of a generic function, it will just return unknown as the type
• And the ToastContextState is already defined so it would have no effect.

What i did is passed the Generic from ToastProvider -> useToastState -> showToast
If we just hardcode the union types in the useToastState it works as expected but would not work if ToastProvider passes it because the types of <ToastContextProvider value={{ ...state, toastTypes }}> are already defined.

Useful links and resources

• https://medium.com/@nicolas.schabram/thanks-for-the-article-that-was-helpful-861454c1d06f
• https://stackoverflow.com/questions/51448291/how-to-create-a-generic-react-component-with-a-typed-context-provider
• Using ReturnType with generic function parameters and generic property access microsoft/TypeScript#26856

Thus i'm closing this issue as wontfix.