ts 如何表示 string + string literal 的联合类型？

问题

当我们有一个类型Color，其能接受如#123456这样普通的string，你又希望编辑器能提示你诸如red、blue这样特定的string literal时：

// 不合理
type Color = 'red' | 'blue' | string

上述写法不合理，Color类型会被编译器缩减为string，失去智能提示。

解决方案

下面的写法，编辑器能正确地提示我们 red 或 blue，也能接受普通的字符串如#123456

// https://azukiazusa.dev/blog/shorts/4Tq3csJ5BwAXPR4OBuJvIo/
// 能达到目的
type Color = 'red' | 'blue' | (string & {})

存在的不足及优化

但上面的写法仍然存在不足¹：这样的Color能接受任何字符串，即使笔误写成bluu或者invalid-color，编辑器/编译器也不能给我们任何提示。

因此，在一些条件允许的情况下，我们可以写出更严格的类型：

// 当然，如果你认为不必要这么严格，或者还不够严格
// 可以按自己需求/喜好来调整，此处只作示例
type Color = 'red' | 'blue' | `#${string}` | `rgb(${string})`

效果展示