TypeScript Academy · 课时

结构化字符串建模

Q: 「结构化字符串建模」这节课中我会学到什么？

约束事件名称和路由路径等格式。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

约束事件名称和路由路径等格式。

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

强制执行字符串格式

实际应用中的许多字符串都遵循某种结构：事件处理器名称、应用程序接口路由路径和 CSS 变量。模板字面量类型可以对这些格式建模，让编译器强制执行相应规则。

为事件处理器名称建模

处理器名称通常由 on 加上首字母大写的事件组成。在模板中使用内置的 Capitalize 辅助类型，可以将事件 'click' 映射为处理器名称 'onClick'。

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

为什么这里需要 Capitalize

如果没有 Capitalize，模板会生成 'onclick'。这个内置类型会将字面量的第一个字符转换为大写，从而生成符合惯例的 camelCase 处理器名称。

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

生成处理器映射

将模板字面量键与映射类型结合，可以生成处理器对象类型：每个事件对应一个经过类型声明的函数，并使用正确的大小写名称。

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

为路由路径建模

应用程序接口路由通常具有这样的结构：开头的斜杠、资源名称和标识符片段。将固定文本与占位符组合成模板，就可以捕获有效路径。

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

参数化路径

为 dynamic 标识符添加占位符。使用斜杠、资源名称、斜杠，再加上泛型标识符片段这样的模板，可以为类似 users 路径后跟数字标识符的路径建模。

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

在编译时强制执行格式

将参数声明为模板字面量类型后，任何不符合该结构的字符串都会被拒绝，从而防止格式错误的路由或键。

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

组合 CSS 变量名称

CSS 自定义属性遵循命名规则。使用包含两个开头短横线和令牌占位符的模板，可以为类似颜色令牌变量的名称建模。

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

使用推断进行拆分

模板字面量类型还可以进行解析：结合条件类型和 infer，您可以在类型层面提取结构化字符串的各个部分，例如从端点字符串中提取方法。

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

实际应用价值

结构化字符串类型可以发现整类错误：拼写错误的处理器名称、未知路由或错误的 CSS 令牌，都会变成编译错误，而不是悄无声息地在运行时失败。

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

保持可读性

模板类型虽然功能强大，但过度嵌套会损害可读性。请为中间类型别名命名，让下一位阅读代码的人也能清楚理解其结构。

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

快速检查

请检验您对结构化字符串建模的理解。

回顾

模板字面量类型可以为结构化字符串建模，例如处理器名称（事件的 on + Capitalize）、路由路径和 CSS 变量，并在编译时强制执行这些格式。它们与映射类型结合可以生成处理器映射，与条件类型和 infer 结合可以解析字符串。请为中间别名命名，以保持复杂模式的可读性。

常见问题解答

「结构化字符串建模」课时是免费的吗？

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

「结构化字符串建模」这节课中我会学到什么？

约束事件名称和路由路径等格式。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「结构化字符串建模」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy