TypeScript 模板字面量类型怎么用

你可能已经用过TypeScript里的字符串模板，比如用const name = "小明"; const greeting = 你好，${name};拼出一句问候语。但你知道吗？TypeScript还有一种“模板字面量类型”，能像拼字符串那样，把变量的类型组合成新的类型，帮你提前揪出代码里的拼写错误。

先搞懂基础：它不是字符串，是类型模板

想象你开了一家水果店，要给不同水果的销售状态做类型约束。如果只用普通的字符串类型，你得写 "苹果-在售" | "香蕉-在售" | "苹果-售罄" | "香蕉-售罄"，一旦加了草莓，就得手动补全所有组合，不仅麻烦还容易漏。

用模板字面量类型就简单多了。你可以定义一个基础类型的模板，让TypeScript自动生成所有可能的组合：

`typescript

type Fruit = "苹果" | "香蕉";

type Status = "在售" | "售罄";

type FruitStatus = ${Fruit}-${Status};

// 自动生成的类型是 "苹果-在售" | "苹果-售罄" | "香蕉-在售" | "香蕉-售罄"

`

这样，只要你改Fruit或Status里的内容，新的组合类型会自动更新，根本不用手动补。

生活化例子：给店铺地址做类型校验

平时写代码时，经常需要约束变量的格式，比如店铺地址得是“省份-城市”的形式。如果用普通类型，很容易写成“广东省 广州”（用空格代替横杠），导致后续接口调用失败。

用模板字面量类型就能精准约束格式：

`typescript

type Province = "广东" | "浙江";

type City = "广州" | "杭州";

type ShopAddress = ${Province}-${City};

// 正确写法，TypeScript不会报错

const myShop: ShopAddress = "广东-广州";

// 错误写法，因为不符合“省份-城市”的格式，TypeScript会直接提示

const wrongShop: ShopAddress = "广东 广州";

`

就像快递地址必须是“省-市”的格式，少了横杠或写错内容，TypeScript会立刻告诉你“格式不对”，比你自己手动检查靠谱多了。

进阶用法：把类型转成大写

如果你的业务里需要把状态值改成大写，比如把"在售"变成"ON_SALE"，用模板字面量类型的Uppercase工具类型就能轻松实现，不用手动写一大堆转换规则：

`typescript

type Status = "在售" | "售罄";

type UpperStatus = Uppercase<Status>;

// 自动生成 "在售" | "售罄" 的大写形式 "ON_SALE" | "SOLD_OUT"

`

再组合一下，就能生成“大写水果-大写状态”的类型，比如"APPLE-ON_SALE"，不管业务怎么改，只要基础类型对，组合出来的格式就不会错。

很多人觉得模板字面量类型是“高级功能”，其实它就是让你像拼句子一样拼类型，把重复的类型组合交给TypeScript做，既能减少写代码的工作量，又能提前避免很多低级错误。只要多试试用它解决日常的类型约束问题，慢慢就能发现它的用处。