TypeScript字面量类型联合string后丢失智能提示如何解决

直接联合PREDEFINED_COLORS | string时，TypeScript会因为字面量类型是string的子类型，自动将整个联合类型折叠为string，最终丢失预定义值的智能补全提示，以下是可直接落地的变通方案：

• 方案1：通用无约束方案（TS 4.1+ 推荐）
  利用string & {}绕过TS的类型折叠逻辑，写法最轻量，无额外类型约束，保留全部提示效果：

  type PREDEFINED_COLORS = 'success' | 'error' | 'info';
  
  type Props = {
    // string & {} 本质仍兼容所有字符串值，仅用于阻止类型折叠
    color: PREDEFINED_COLORS | (string & {});
  }
  

  该写法不会改变类型的兼容逻辑：所有合法字符串、预定义颜色值都能正常通过类型校验，输入时会优先弹出三个预定义值的补全提示。

• 方案2：十六进制颜色格式约束方案
  如果希望自定义颜色仅接受十六进制格式，可以搭配模板字面量类型做基础格式校验，同时保留预定义值提示：

  type PREDEFINED_COLORS = 'success' | 'error' | 'info';
  // 匹配以#开头的十六进制颜色值，支持3位、6位、8位（带透明度）写法
  type HexColor = `#${string}`;
  
  type Props = {
    color: PREDEFINED_COLORS | HexColor;
  }
  

  该写法下，不符合十六进制格式的自定义字符串会直接抛出类型错误，适合对输入格式有明确要求的组件场景。

避坑提示：不要直接使用PREDEFINED_COLORS | string的原始写法，TS的类型收敛规则会直接将该联合类型识别为纯string，所有预定义值的补全提示都会完全失效。

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