TypeScript中`string & {}`的作用是什么？与普通string有何区别？

问题描述 #

我在为CSS属性gridTemplateColumns添加类型提示时，在React依赖库csstype中发现了如下属性定义：

gridTemplateColumns?: Property.GridTemplateColumns<TLength> | undefined;

该属性属于以下接口，其中声明了TLength和TTime：

export interface StandardLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {

我不清楚string & {}的设计意图是什么，它和普通的string类型有什么区别？

解答 #

简单说，string & {}是TypeScript里一种品牌化（branded）字符串类型，和普通string的核心区别在于：

• 普通string可以接受任意字符串值，而string & {}不能直接用普通字符串赋值，必须是符合特定格式的字符串（比如CSS里的"10px"、"2rem"这类合法长度/时间值），或是通过类型兼容的方式传入的值。
• 它本质上还是字符串类型，所有字符串的方法（比如slice、toLowerCase）都能正常使用，但TypeScript会将它和普通string视为不同类型，以此做类型校验，避免传入无效的字符串值。

在csstype里这么设计的目的很明确：

• 既要支持所有合法的CSS长度/时间字符串，又要限制开发者不能随意传入无关字符串（比如"abc"）；同时还保留了类型扩展的可能性——如果你需要自定义CSS单位，可以通过扩展这个类型实现，不会破坏原有类型的校验逻辑。

举个直观的例子：

// 这行代码会报错，普通字符串无法直接赋值给string & {}类型
const invalidLen: string & {} = "hello";

// 这行代码合法，符合CSS格式的字符串可以通过类型断言赋值
const validLen: string & {} = "100px" as string & {};

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