JavaScript内核与高级编程之：`TypeScript` 的 `Template Literal Types`：如何使用模板字面量类型进行类型编程。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！今晚咱来唠唠嗑，主题是 `TypeScript` 里的一个骚操作——`Template Literal Types` (模板字面量类型)。

这玩意儿听起来高大上，实际上就是让你在类型定义里玩字符串拼接。别害怕，这玩意儿就像用乐高积木搭房子，只要掌握了基本块，就能拼出各种奇奇怪怪的东西。

一、什么是模板字面量类型？

简单来说，它允许你使用字符串字面量和类型变量来构造新的字符串字面量类型。就像 JavaScript 里的模板字符串（用反引号 “ 包裹），但这里是类型层面的。

基本语法：

type Greeting<T extends string> = `Hello, ${T}!`;

type MyGreeting = Greeting<"World">; // type MyGreeting = "Hello, World!"

在这个例子里：

Greeting<T extends string> 定义了一个泛型类型，它接受一个字符串类型 T。
Hello, ${T}! 是模板字面量类型，它将字符串字面量 "Hello, "、类型变量 T 和字符串字面量 "!" 拼接在一起。
Greeting<"World"> 将 T 替换为 "World"，最终得到类型 "Hello, World!"。

二、模板字面量类型的应用场景

这玩意儿能干啥呢？答案是：能干的事情多了去了！

字符串模式匹配和转换：

提取字符串的一部分： 比如，从一个包含文件路径的字符串类型中提取文件名。

type FilePath = "/path/to/my/file.txt";

type FileName<T extends string> = T extends `${string}/${infer Name}` ? Name : never;

type MyFileName = FileName<FilePath>; // type MyFileName = "file.txt"

转换字符串的大小写： 虽然 TypeScript 内置了 Uppercase 和 Lowercase 类型，但你可以用模板字面量类型模拟类似的功能。

type ToUppercase<T extends string> = T extends `${infer Char}${infer Rest}` ? `${Uppercase<Char>}${ToUppercase<Rest>}` : "";

type MyUppercase = ToUppercase<"hello">; // type MyUppercase = "HELLO"

类型安全的字符串拼接：

构建 API 请求的 URL： 确保 URL 的各个部分类型正确。

type BaseURL = "https://api.example.com";
type Endpoint = "users" | "products";

type APIURL<T extends Endpoint> = `${BaseURL}/${T}`;

type UserAPIURL = APIURL<"users">; // type UserAPIURL = "https://api.example.com/users"

创建类型安全的配置对象：

定义事件名称： 确保事件名称的格式正确。

type EventPrefix = "user" | "product";
type EventAction = "created" | "updated" | "deleted";

type EventName<T extends EventPrefix, U extends EventAction> = `${T}:${U}`;

type UserCreatedEvent = EventName<"user", "created">; // type UserCreatedEvent = "user:created"

与联合类型结合使用：

根据不同的类型参数生成不同的字符串类型：

type DeviceType = "mobile" | "desktop";

type Theme<T extends DeviceType> = T extends "mobile" ? "mobile-theme" : "desktop-theme";

type MobileTheme = Theme<"mobile">; // type MobileTheme = "mobile-theme"
type DesktopTheme = Theme<"desktop">; // type DesktopTheme = "desktop-theme"

更高级的类型编程：
- 解析 CSS 属性： 从 CSS 字符串类型中提取属性名和值。
- 生成 SQL 查询语句： 根据类型信息构建类型安全的 SQL 查询。
- 实现更复杂的字符串转换和验证逻辑。

三、模板字面量类型的高级用法

infer 关键字：

infer 关键字允许你在条件类型中推断类型变量。它在模板字面量类型中非常有用，可以用来提取字符串的一部分。
```
type GetFirstWord<T extends string> = T extends `${infer First} ${string}` ? First : T;

type MyFirstWord = GetFirstWord<"hello world">; // type MyFirstWord = "hello"
```
在这个例子里，infer First 告诉 TypeScript 推断字符串中第一个空格之前的子字符串的类型，并将其赋值给类型变量 First。

递归类型：

模板字面量类型可以与递归类型结合使用，以处理更复杂的字符串结构。

type SplitString<T extends string, Separator extends string = ""> =
 T extends `${infer Head}${Separator}${infer Tail}`
   ? [Head, ...SplitString<Tail, Separator>]
   : [T];

type MySplitString = SplitString<"hello world", " ">; // type MySplitString = ["hello", "world"]

这个例子使用递归类型将字符串分割成一个字符串数组。

与映射类型结合使用：

模板字面量类型可以与映射类型结合使用，以创建新的对象类型，其中键是基于字符串模板生成的。

type User = {
 firstName: string;
 lastName: string;
};

type UserWithGetter<T> = {
 [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type MyUserWithGetter = UserWithGetter<User>;
/*
type MyUserWithGetter = {
   getFirstName: () => string;
   getLastName: () => string;
}
*/

这个例子创建了一个新的类型，其中包含原始类型中每个属性的 getter 方法。

四、模板字面量类型的限制

虽然模板字面量类型非常强大，但它们也有一些限制：

性能： 复杂的模板字面量类型可能会影响 TypeScript 的编译性能。尽量避免过度使用。
可读性： 过度复杂的模板字面量类型可能会难以理解。保持代码的简洁和可读性。
运行时： 模板字面量类型是类型层面的概念，它们不会影响 JavaScript 的运行时行为。

五、代码示例大放送

为了让大家更好地理解模板字面量类型，这里再来几个例子：

转换驼峰命名到短横线命名：

type CamelCaseToKebabCase<T extends string> =
 T extends `${infer Head}${infer Tail}`
   ? Tail extends Uncapitalize<Tail>
     ? `${Head}${CamelCaseToKebabCase<Tail>}`
     : `${Head}-${CamelCaseToKebabCase<Tail>}`
   : T;

type MyKebabCase = CamelCaseToKebabCase<"firstNameLastName">; // type MyKebabCase = "first-name-last-name"

提取 URL 的查询参数：

type URL = "https://example.com?name=John&age=30";

type QueryParams<T extends string> =
 T extends `${string}?${infer Params}`
   ? Params extends `${infer Key}=${infer Value}${infer Rest}`
     ? { [K in Key]: Value } & QueryParams<Rest extends `&${string}` ? T extends `${string}${Rest}` ? Rest extends `&${infer NewRest}` ? `?${NewRest}` : never : never : never>
     : {}
   : {};

type MyQueryParams = QueryParams<URL>;
//type MyQueryParams = {
//    name: "John";
//    age: "30";
//}

实现一个简单的字符串格式化函数：

type Format<T extends string, U extends Record<string, any>> =
 T extends `${infer Head}{${infer Key}}${infer Tail}`
   ? Key extends keyof U
     ? `${Head}${U[Key]}${Format<Tail, U>}`
     : `Error: Key '${Key}' not found in arguments`
   : T;

type MyFormat = Format<"Hello, {name}! You are {age} years old.", { name: "John", age: 30 }>; // type MyFormat = "Hello, John! You are 30 years old."

六、总结

TypeScript 的 Template Literal Types 是一种强大的类型编程工具，可以用来处理各种字符串相关的类型操作。掌握了它，你就可以写出更加类型安全、更加灵活的代码。

记住，类型编程就像玩乐高，关键是理解基本块，然后发挥你的想象力，拼出你想要的形状。

特性	描述	优点	缺点
字符串字面量拼接	使用字符串字面量和类型变量来构造新的字符串字面量类型。	类型安全，代码可读性高，可以进行复杂的字符串模式匹配和转换。	编译时性能可能受影响，复杂的类型定义可能难以理解。
`infer` 关键字	允许你在条件类型中推断类型变量，通常用于提取字符串的一部分。	可以方便地从字符串类型中提取所需信息。	需要理解条件类型和类型推断的概念。
递归类型	模板字面量类型可以与递归类型结合使用，以处理更复杂的字符串结构。	可以处理嵌套的字符串结构，例如分割字符串成数组。	递归深度有限制，复杂的递归类型可能导致编译错误。
映射类型	模板字面量类型可以与映射类型结合使用，以创建新的对象类型，其中键是基于字符串模板生成的。	可以动态地生成对象类型，例如创建包含 getter 方法的类型。	需要理解映射类型的概念。
应用场景	字符串模式匹配和转换，类型安全的字符串拼接，创建类型安全的配置对象，与联合类型结合使用，更高级的类型编程（例如解析 CSS 属性，生成 SQL 查询语句等）。	可以提高代码的类型安全性，减少运行时错误，提高代码的可维护性和可读性。	学习曲线较陡峭，需要理解 TypeScript 的高级类型特性。
限制	性能，可读性，运行时。	在类型层面进行操作，不会影响 JavaScript 的运行时行为。	复杂的类型定义可能会影响编译性能，过度复杂的类型定义可能会难以理解。

今天就到这里，大家回去多练练，争取早日成为类型编程的大师！散会！

各位靓仔靓女，晚上好！ 今晚咱来唠唠嗑，主题是 TypeScript 里的一个骚操作——Template Literal Types (模板字面量类型)。

发表回复 取消回复

各位靓仔靓女，晚上好！今晚咱来唠唠嗑，主题是 `TypeScript` 里的一个骚操作——`Template Literal Types` (模板字面量类型)。

发表回复取消回复