TypeScript Academy · 课时

模板字面量类型基础

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

使用联合类型和占位符构建字符串类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用联合类型和占位符构建字符串类型。

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

类型层面的字符串

模板字面量类型通过组合其他字符串类型来构建新的字符串字面量类型。它使用与运行时模板字符串相同的反引号和占位符语法，但完全在类型层面运行。

简单的模板字面量类型

假设有一个类型别名 Greeting，它被定义为一个模板字面量：其中包含文本 Hello, ，后面跟着类型 Name 的占位符。如果 Name 是字面量 'Ada'，那么 Greeting 就是字面量类型 'Hello, Ada'。

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

占位符可以嵌入其他类型

占位符中可以放入任何类似字符串的类型：字面量、类型参数或联合类型。TypeScript 会将其替换到周围的文本中，形成新的字面量类型。

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

组合联合类型会增加变体

当占位符包含联合类型时，模板会遍历其中的每个成员进行展开。将 'a' | 'b' 与固定后缀组合后，会生成每种组合对应的联合类型。

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

多个占位符会相互组合

两个联合类型占位符会形成笛卡尔积。通过分隔符将尺寸 'sm' | 'lg' 与颜色 'red' | 'blue' 组合后，会得到四种字面量类型。

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

这有什么用

模板字面量类型可以精确描述一系列字符串，例如 CSS 类名、事件名称和路由路径，因此编译器能够在运行时之前拒绝格式错误的字符串。

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

数字和布尔值会被强制转换

放入模板字面量类型的非字符串类型会被强制转换为字符串形式。数字字面量 42 会在生成的字符串类型中变成文本 42。

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

使用泛型占位符

泛型函数可以根据参数的字面量类型构建模板字面量返回类型，因此在每个调用位置都能知道精确的字符串。

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

约束输入

您可以要求某个值匹配模板字面量类型。只有符合所描述模式的字符串才会被接受，从而在编译时发现拼写错误。

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

宽泛字符串会破坏模式

如果占位符是宽泛的 string 类型，而不是字面量，整个模板就会退化为 string。要保持具体性，就需要使用字面量输入，通常可以通过 as const 实现。

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

适用场景

只要字符串遵循某种结构，模板字面量类型就很适用：CSS 工具类、带前缀的标识符、查询键和事件名称。它们能将字符串约定转化为由编译器检查的契约。

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

快速检查

请检验您对模板字面量类型基础知识的理解。

回顾

模板字面量类型会将占位符替换到周围文本中，从而构建字符串字面量类型。联合类型占位符会展开为所有组合，多个联合类型会形成笛卡尔积。非字符串字面量会被强制转换为文本形式。宽泛的 string 占位符会使结果退化为 string，因此需要字面量输入（通常通过 as const）才能获得精确类型。它们可以让字符串约定受到编译器检查。

常见问题解答

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

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

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

使用联合类型和占位符构建字符串类型。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy