Frontend Academy · 课时

模板字面量类型

Q: 「模板字面量类型」这节课中我会学到什么？

将字符串字面量类型与模板字面量语法结合起来，推导出事件名称、CSS 属性字符串和 API 路由路径等类型。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将字符串字面量类型与模板字面量语法结合起来，推导出事件名称、CSS 属性字符串和 API 路由路径等类型。

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

什么是模板字面量类型

TypeScript 可以在类型层面根据模板字面量构建字符串类型。结合联合类型后，您可以表达数千个有效字符串，而不必逐一列出。

基本模板字面量类型

在类型位置使用反引号括起来的字符串，它们可以接受其他类型作为插值。

type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!';  // OK
const b: Greeting = 'Hi, Alice!';     // Error

组合联合类型

插入联合类型时，TypeScript 会创建所有组合的笛卡尔积。

type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';

type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)

推断事件名称

根据事件名称推导事件处理器名称，这是一个经典的实际应用场景。

type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'

type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }

字符串操作工具类型

TypeScript 内置了以下辅助工具：Uppercase<T>、Lowercase<T>、Capitalize<T>、Uncapitalize<T>。

type Hi = Capitalize<'hello'>;    // 'Hello'
type Yell = Uppercase<'hello'>;   // 'HELLO'
type Quiet = Lowercase<'HELLO'>;  // 'hello'
type Lower = Uncapitalize<'Hi'>;  // 'hi'

CSS 属性类型

表达类似 CSS 的字符串类型：像素值、十六进制颜色和百分比。

type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;

type Style = { padding: Px; color: Hex; width: Pct };

const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Error

使用模板字面量进行推断

infer 关键字可以提取字符串类型的各个部分，对于解析器和路由类型很有用。

type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;

type Result = ExtractName<'Hello, Alice!'>;  // 'Alice'

API 路由类型

类型安全的 API 路由：从字符串模式中提取路径参数。

type PathParams<T extends string> =
  T extends `${string}/:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
    : T extends `${string}/:${infer Param}`
    ? { [K in Param]: string }
    : {};

type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }

Tailwind 类名建议类型

将字符串属性限制为设计系统中已知的值。

type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'

function Box(props: { className: TwSpacing }) { /* ... */ }

限制与编译器性能

模板字面量的笛卡尔积可能会迅速膨胀（50 × 50 的联合类型会生成 2500 个字符串）。TypeScript 仍然可以完成编译，但推断会变慢。请保持可选字符集合较小。

区分字符串字面量类型

将模板字面量用作表达力更强的品牌标记形式——本质上仍是字符串，但受到约束。

快速检查

type X = `on${Capitalize<'click' | 'focus'>}` 的结果是什么？

回顾：模板字面量类型

使用带有联合类型插值的模板字面量构建字符串类型。笛卡尔积会迅速膨胀，因此请保持可选字符集合较小。使用首字母大写、全部大写、全部小写和取消首字母大写工具类型。结合 infer 提取字符串的各个部分。模板字面量类型非常适合表示事件名称、CSS 值、路由参数和设计系统类名。

常见问题解答

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

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

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

将字符串字面量类型与模板字面量语法结合起来，推导出事件名称、CSS 属性字符串和 API 路由路径等类型。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 Frontend Academy