如何在TypeScript中实现字符串字面量与string类型的联合使用

问题原因 #

TypeScript默认会对联合类型做简化：当联合类型中同时包含字符串字面量和顶层string类型时，所有字符串字面量都会被父类型string吸收，最终整个类型会被简化为string | undefined，因此丢失了预设字面量的智能提示。

通用解决方案（兼容所有TS版本） #

将任意字符串部分替换为string & {}即可规避类型吸收逻辑，该写法的取值范围和普通string完全一致，但不会触发TS的联合类型简化：

// 定义自定义颜色类型
type PresetColor = 'textPrimary' | 'textSecondary' | (string & {})

// 业务中使用
interface ComponentProps {
  color?: PresetColor
}

替代方案（TS 4.4及以上版本可用） #

你也可以用模板字面量类型${string}代替string & {}，实现效果完全相同：

type PresetColor = 'textPrimary' | 'textSecondary' | `${string}`

效果验证 #

const test1: ComponentProps = { color: 'textPrimary' } // 正常，编辑器会主动提示预设值
const test2: ComponentProps = { color: '#1890ff' } // 正常，支持传入任意自定义字符串
const test3: ComponentProps = { color: undefined } // 正常，可选属性允许为空

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