说实话，TypeScript 的模板字符串类型这玩意儿，你可Neng平时没怎么注意，但它其实挺有意思的。它就像一个隐藏的宝藏，Neng让你在类型系统里玩出hen多花样来。咱就是说TypeScript 真的不是只写写接口、定义个类型那么简单，它还Neng在编译时就帮你Zuohen多字符串处理的事情，比如拼接、提取、转换大小写，甚至生成类名、事件名、API 路径等等，简直不要太方便。

那这个模板字符串类型到底Neng干啥呢？害，别急，咱慢慢来先从Zui基础的说起。

你得知道啥是字符串字面量类型。这玩意儿就是说你Ke以把一个字符串本身当成类型来用。比如：

let s: 'hello' = 'hello'; // 只Neng是 'hello'，不Neng是别的

你懂的，这玩意儿Zui大的用处就是限制变量只Neng是某个特定的字符串值。比如你写一个函数，只允许传入 'GET'、'POST'、'PUT'、'DELETE' 这些 HTTP 方法，那就Ke以用字符串字面量类型来限制输入，防止传错。

模板字符串类型，顾名思义，就是像 JS 里的模板字符串一样，你Ke以在类型中拼接字符串。比如：

type World = 'World';
type Greeting = `Hello ${World}`; // 类型是 "Hello World"

是不是有点意思？你甚至Ke以拼接多个变量：

type Protocol = 'https';
type Domain = 'example.com';
type URL = `${Protocol}://${Domain}`; // "https://example.com"

你也Ke以结合联合类型，生成多个组合，比如：

type ButtonVariant = `btn-${'primary' | 'secondary'}-${'sm' | 'lg'}`;
// 结果是 "btn-primary-sm" | "btn-primary-lg" | "btn-secondary-sm" | "btn-secondary-lg"

是不是有点像 CSS 类名生成器？你没听错，这玩意儿在类型系统里就Neng搞定，不用写运行时代码！

当模板字符串中包含联合类型时TypeScript 会自动进行“笛卡尔积”组合。啥意思？就是说它会把所有可Neng的组合dou列出来。比如：

type Side = 't' | 'b' | 'l' | 'r';
type Size = 'sm' | 'md' | 'lg';
type PaddingClass = `p-${Side}-${Size}`;
// 结果是 "p-t-sm" | "p-t-md" | "p-t-lg" | "p-b-sm" | "p-b-md" | "p-b-lg" | ...

这在写 UI 组件库的时候特别有用，比如生成类名、事件名、属性名等等，全靠这个特性。

这个 infer 啊，是 TypeScript 类型系统里的“占位符”，你Ke以在条件类型中用它来“提取”一部分类型。比如你想从一个字符串中提取文件名：

type ImageExt = 'jpg' | 'png' | 'gif' | 'webp';
type ExtractRawName = FileName extends `${infer Name}.${ImageExt}`
  ? Name
  : never;
type E1 = ExtractRawName<'photo.jpg'>; // "photo"
type E2 = ExtractRawName<'logo.png'>; // "logo"
type E3 = ExtractRawName<'document.pdf'>; // never

你kan，它会自动对联合类型中的每一个成员进行匹配，然后把结果重新组合成一个新的联合类型。是不是hen智Neng？

在模板字符串中，infer 也Neng派上大用场。比如你想提取出文件名和 名：

type GetExt = S extends `${infer Name}.${infer Ext}` ? Ext : never;
type E2 = GetExt<'ts.config.json'>; // "config.json"

type Space = ' ' | '
' | '\t';
type TrimLeft = S extends `${Space}${infer R}` ? TrimLeft : S;
type T = TrimLeft<'  cookie'>; // "cookie"

type Events = 'click' | 'change' | 'input';
type EventHandlers = `on${Capitalize}`;
// "onClick" | "onChange" | "onInput"

type Size = 'sm' | 'MD' | 'Lg';
type SizeClass = `size-${Lowercase}`;
// "size-sm" | "size-md" | "size-lg"

type IconNames = 'icon-home' | 'icon-user' | 'icon-settings' | 'logo-main';
// 提取所有以 "icon-" 开头的图标名称
type ExtractIcon = T extends `icon-${infer Name}` ? Name : never;
type PureNames = ExtractIcon;
// 结果: "home" | "user" | "settings"
// 注意: "logo-main" 匹配失败，返回 never，在联合类型中 never 会被自动过滤掉