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?

CodePudding user response：

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 & {})
  ...
}