TypeScript中能否使用字符串字面量类型实现兼容自定义值的语法糖

原有写法问题说明 #

• 第一种写法：

type fooType = string | 'suggestions-1' | 'suggestions-2';

该写法无法触发预设提示的原因是：TypeScript 中所有字符串字面量类型都是基础类型string的子类型，当联合类型中直接出现裸string时，整个类型会被自动折叠为string，IDE 无法识别到需要提示的字面量成员。

• 第二种写法：

type fooType = String | 'suggestions-1' | 'suggestions-2';

该写法虽然能弹出字面量提示，但存在类型兼容问题：首字母大写的String是 JavaScript 字符串包装对象类型，和日常使用的基础类型string并不等价，会导致部分场景下普通字符串赋值报类型错误，无法满足实际使用需求。

正确实现方案 #

使用string & {}和预设字面量做联合类型即可，兼容 TypeScript 4.1 及以上版本：

type FooType = 'suggestions-1' | 'suggestions-2' | (string & {});

实现原理 #

• 联合类型中没有直接写入裸string，不会触发类型自动折叠，IDE 会优先识别前置的字面量成员，输入时自动弹出预设字符串的提示
• string & {}和基础类型string完全等价兼容，用户传入任意自定义字符串都不会触发类型报错，同时不会影响预设值的提示效果

使用示例 #

// 赋值预设值时会弹出输入提示
const a: FooType = 'suggestions-1';
// 赋值自定义字符串无类型报错
const b: FooType = 'any-custom-string-value';

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