TypeScript 模板字面量类型

模板字面量类型基于字符串字面量类型构建，支持通过插值生成新的字符串类型。

这让 TypeScript 能够对字符串进行更精确的类型检查，适用于事件名、路径、类名等场景。

为什么需要模板字面量类型

日常开发里，格式化字符串几乎随处可见，比如事件名（onClick）、API 路径（get:/users），以及 CSS 类名（btn-primary-md）这类写法，基本都绕不开。

使用普通的 string 类型无法精确描述这些格式，而模板字面量类型让我们可以精确地定义这些字符串的类型。

这大大增强了 TypeScript 的类型安全性，减少了运行时错误。

概念说明：模板字面量类型是借助反引号（`` ` ``）以及 ${} 这种插值写法来声明字符串类型的。它的形式看上去和 Ja vaScript 里的模板字符串很像，但作用并不在运行时，而是在类型层面发挥作用。

基本语法

模板字面量类型使用反引号和插值来定义类型。

实例

// 定义基础字符串字面量类型
type World = "world";
// 使用模板字面量类型
// `Hello ${World}` 相当于 "Hello world"
type Greeting = `Hello ${World}`;
// 只能赋值符合类型定义的字符串
var greeting: Greeting = "Hello world";
console.log("问候: " + greeting);

运行结果：

问候: Hello world

说明：模板字面量类型会将插值的位置替换为实际的字符串，生成新的字面量类型。

内置工具类型

TypeScript 提供了四个内置的工具类型来处理字符串大小写。

实例

// Uppercase：将字符串转为大写
type UpperHello = Uppercase;  // "HELLO"
// Lowercase：将字符串转为小写
type LowerHELLO = Lowercase;  // "hello"
// Capitalize：将字符串首字母大写
type CapitalizedHello = Capitalize;  // "Hello"
// Uncapitalize：将字符串首字母小写
type UncapitalizedHello = Uncapitalize;  // "hello"
console.log("Uppercase: " + UpperHello);
console.log("Lowercase: " + LowerHELLO);
console.log("Capitalize: " + CapitalizedHello);
console.log("Uncapitalize: " + UncapitalizedHello);

运行结果：

Uppercase: HELLO
Lowercase: hello
Capitalize: Hello
Uncapitalize: hello

应用场景：这些工具类型在处理事件名、方法名等需要统一格式的场景非常有用。

事件类型

使用模板字面量类型可以精确地定义事件名称的类型。

实例

// 构建事件名类型
// `on${Capitalize}` 生成以 "on" 开头，首字母大写的字符串
type EventName = `on${Capitalize}`;
// `handle${Capitalize}` 生成以 "handle" 开头，首字母大写的字符串
type Handler = `handle${Capitalize}`;
// 只能赋值符合格式的字符串
var clickEvent: EventName = "onClick";
var focusEvent: EventName = "onFocus";
var handler: Handler = "handleSubmit";
console.log("事件: " + clickEvent);
console.log("处理器: " + handler);

运行结果：

事件: onClick
处理器: handleSubmit

优势：使用模板字面量类型后，像 "onclick"（小写）这样的错误格式会被 TypeScript 拒绝。

路径类型

使用模板字面量类型可以精确地定义 API 路径的类型。

实例

// 定义 HTTP 方法类型
type HttpMethod = "get" | "post" | "put" | "delete";
// 定义路径格式
type ApiEndpoint = `/${string}`;  // 以斜杠开头的字符串
// 组合成完整的 API 路径类型
type ApiPath = `${HttpMethod}${ApiEndpoint}`;
// 只能赋值符合格式的路径
var getUsers: ApiPath = "/get/users";
var createUser: ApiPath = "/post/users";
console.log("路径: " + getUsers);
console.log("路径: " + createUser);

运行结果：

路径: /get/users
路径: /post/users

类型安全：像 "/users"（没有方法前缀）这样的路径会被 TypeScript 报错。

复杂示例

模板字面量类型可以组合多个联合类型，生成所有可能的组合。

实例

// 带数字的模板类型
// ${number} 匹配任意数字
type Row = `row${number}`;
type Row10 = Row;  // row0, row1, row2... 直到 row9...
// 组合多个类型
type Variant = "primary" | "secondary";
type Size = "sm" | "md" | "lg";
// 这会生成 6 种组合：btn-primary-sm, btn-primary-md, btn-primary-lg...
type ClassName = `btn-${Variant}-${Size}`;
// 只能赋值生成的 6 种组合之一
var className: ClassName = "btn-primary-md";
console.log("类名: " + className);

运行结果：

类名: btn-primary-md

组合爆炸：模板字面量类型会自动展开所有组合。如果联合类型有很多选项，生成的类型可能会非常庞大。

自定义工具类型

可以创建自己的模板字面量工具类型。

实例

// 添加前缀的工具类型
// T 是任意字符串，P 是要添加的前缀
type Prefix = `${P}${Capitalize}`;
// 添加后缀的工具类型
// T 是任意字符串，S 是要添加的后缀
type Suffix = `${Capitalize}${S}`;
// 使用自定义工具类型
type HandlerName = Prefix;
type ButtonId = Suffix;
var handler: HandlerName = "onClick";
var id: ButtonId = "SubmitBtn";
console.log("处理器: " + handler);
console.log("ID: " + id);

运行结果：

处理器: onClick
ID: SubmitBtn

泛型模板：模板字面量类型可以与泛型结合，创建可复用的工具类型。

注意事项

• 插值类型：模板中的 ${} 可以是具体字符串、联合类型、string、number 等
• 组合数量：组合多个联合类型时，生成的类型可能非常大
• 大小写处理：使用内置工具类型处理字符串大小写

最佳实践：使用模板字面量类型处理事件名、路径、类名等有固定格式的字符串，可以获得更好的类型安全。

总结

模板字面量类型是 TypeScript 强大的类型系统的一部分。

• 模板语法：使用 ${T} 插值构建类型
• 内置工具：Uppercase、Lowercase、Capitalize、Uncapitalize
• 应用场景：事件名、API 路径、CSS 类名等
• 自定义：创建可复用的工具类型

建议：在需要格式化字符串的场景，优先使用模板字面量类型来获得编译期的类型检查。