Suppose I have an interface with a prop that accepts string literals like this:
interface IProps {
icon?: "success" | "warning" | "error" | "info";
...
}
The icon is then picked from a dictionary. Let's say I also want to accept a custom icon, I'd add the React.ReactNode type to the union:
interface IProps {
icon?: "success" | "warning" | "error" | "info" | React.ReactNode;
...
}
After adding it, the type of the icon prop is cut only to React.ReactNode and I lose all the help from the editor (for example when passing an icon prop to the component).
Is there a way to type it better, so the typing also keeps the string literals?
The reason that that's happening is that React.ReactNode is a union which includes string. As a result any string is now legal, and so as far as the type information is concerned there's nothing special about "success", "warning", etc.
I do know a trick which will confuse typescript enough that it continues to give editor hints for the individual strings. Rather than creating a union with string, create it with (string & {}). Every string will match with (string & {}), but typescript doesn't notice that the types "success", "warning", etc are made obsolete by it.
For example:
type Example = "foo" | (string & {});
const test: Example = // when i type here, vscode gives me a hint for "foo", but any string is legal
So to do the same in your case, you will need to create a union that has all the stuff in React.ReactNode, minus string, and plus (string & {}). The following should do the trick:
interface IProps {
icon?: "success" | "warning" | "error" | "info" | Exclude<React.ReactNode, string> | (string & {})
...
}