前言

在前端项目中，经常会需要写入行内样式，比如以下代码：

在输入 display 属性时， VS Code 自动进行了各类属性的代码提示。但是，即使你输入了示例以外的字符串也是不会报错，那么 display 的类型是怎么实现的呢？

尝试

首先进行最简单的尝试：

type Info = "name" | "age" | string

很容易就能想到这样的一个联合类型，让我们在编辑器中进行尝试：

可以看到 VS Code 并没有给出任何提示，应该是自动将 Info 类型识别为了字符串，鼠标移入 Info 查看，果然如此：

源码

既然找不到解决方案，就直接抄答案就好了。直接按住 Ctrl 点击 display 属性，跳转两次，便可看到它的原始类型定义：

  export type Display =
    | Globals
    | DataType.DisplayOutside
    | DataType.DisplayInside
    | DataType.DisplayInternal
    | DataType.DisplayLegacy
    | "contents"
    | "list-item"
    | "none"
    | (string & {});

很明显，类型提示的奥妙便在 string & {}，让我们自己尝试一下：

Ok，VS Code 成功给出了代码提示，Google 了一下 string & {}，看到一个 Github issue，里面有大量相关的讨论，感兴趣的可以自行观看。

泛型

让我们写一个简单的泛型来实现这样的效果：

type GetTipString<T extends string> = T | (string & {})

验证一下：

收工。