0Pricing
TypeScript Academy · 课时

模板字面量类型：字符串模式

将字符串联合类型组合为模式类型

模板字面量类型：字符串模式 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

模板字面量类型在类型层面使用反引号语法，通过组合其他字符串类型来构造字符串类型。

模板字面量类型基础

使用模板语法组合字符串字面量类型。
type Greeting = `Hello, ${string}`;
const g: Greeting = 'Hello, World'; // OK
// const bad: Greeting = 'Hi there'; // Error

组合联合类型

当联合类型用于模板字面量时，TypeScript 会生成所有组合。
type Color = 'red' | 'green' | 'blue';
type Size = 'sm' | 'lg';
type ColorSize = `${Color}-${Size}`;
// 'red-sm' | 'red-lg' | 'green-sm' | ...

事件名称模式

一种常见用法是从实体生成带类型的事件名称。
type Entity = 'user' | 'product';
type EventName = `on${Capitalize<Entity>}Created`;
// 'onUserCreated' | 'onProductCreated'

Capitalize 和其他内置类型

TypeScript 提供 Capitalize、Uncapitalize、Uppercase、Lowercase 作为内置字符串操作类型。
type T = Capitalize<'hello world'>; // 'Hello world'
type U = Uppercase<'hello'>;        // 'HELLO'
type L = Lowercase<'WORLD'>;        // 'world'

生成获取器的模式

使用模板字面量类型和映射类型生成获取器方法名称。
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

带类型的路由参数

从 URL 模式字符串中提取带类型的路由参数。
type RouteParams<T extends string> =
  T extends `${infer _Start}:${infer Param}/${infer Rest}`
    ? Param | RouteParams<Rest>
    : T extends `${infer _Start}:${infer Param}`
    ? Param
    : never;

CSS 属性命名

生成带类型的 CSS 自定义属性名称。
type CSSVar = `--${string}`;
const color: CSSVar = '--primary-color'; // OK

函数参数中的模板字面量类型

使用模板字面量类型约束字符串参数。
function emit<E extends `on${string}`>(event: E): void {
  console.log('Emitting:', event);
}
emit('onClick'); // OK
// emit('click'); // Error — must start with 'on'

使用 infer 提取组成部分

在模板字面量中使用 infer，在类型层面提取子字符串。
type GetSuffix<T extends string> =
  T extends `${infer _Prefix}_${infer Suffix}` ? Suffix : never;
type S = GetSuffix<'user_created'>; // 'created'

与 Record 的交叉

将模板字面量类型与 Record 结合，创建带类型的事件处理器映射。
type Handlers<T extends string> = Record<`on${Capitalize<T>}`, () => void>;

快速检查

`type R = `${string | number}-id`` 的结果是什么？

回顾

模板字面量类型使用反引号语法，通过组合来构造字符串类型。它们可以对联合类型进行分发，与 Capitalize/Uppercase 辅助类型配合使用，并支持事件名称、路由参数和 CSS 变量等强大模式。

常见问题解答

「模板字面量类型：字符串模式」课时是免费的吗？

是的 — 「模板字面量类型：字符串模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「模板字面量类型：字符串模式」这节课中我会学到什么？

将字符串联合类型组合为模式类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「模板字面量类型：字符串模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 映射类型：转换对象类型
  2. 映射类型中的修饰符：readonly 与 ?
  3. 模板字面量类型：字符串模式
  4. 使用 as 在映射类型中重新映射键
← 返回 TypeScript Academy