React TypeScript联合ReactNode后丢失字符串字面量类型提示如何解决

问题原因 #

你的类型定义失去字符串字面量提示的核心原因是：React.ReactNode本身包含了string类型，TypeScript做类型计算时会把所有字符串字面量自动归到React.ReactNode的子类型中，最终类型会被收拢为React.ReactNode，原本的字面量信息就丢失了。

最优解决方案 #

我们可以通过类型运算把字符串部分从React.ReactNode中剥离，再和你需要的内置图标字面量联合，既保留自定义图标能力，也不会丢失字面量提示：

// 先定义内置图标字面量类型
type BuiltinIcon = "success" | "warning" | "error" | "info";
// 从ReactNode中排除string类型，再和内置字面量联合
type IconProp = BuiltinIcon | Exclude<React.ReactNode, string>;

interface IProps {
  icon?: IconProp;
  // 其他属性定义
}

通用兼容方案（如果需要支持任意字符串同时保留内置提示） #

如果你后续需要支持传入任意字符串作为图标名，同时还要保留内置图标的提示，可以用带占位符属性的联合类型技巧：

// 通用字面量联合保留提示工具类型
type LiteralUnion<LiteralType, BaseType = string> = LiteralType | (BaseType & { _isCustom?: never });

type IconProp = LiteralUnion<"success" | "warning" | "error" | "info", React.ReactNode>;

interface IProps {
  icon?: IconProp;
  // 其他属性定义
}

这个方案的原理是给基础类型加一个不存在的可选属性，打断TypeScript的类型收拢逻辑，让字面量类型始终可以被编辑器识别到。

内容的提问来源于stack exchange，提问作者thelukaszns