TypeScript - 字面量模板类型

你好啊，未来的编程巨星们！今天，我们将踏上一段激动人心的旅程，探索TypeScript世界的一个非常有趣的功能——字面量模板类型。如果你是编程新手，不用担心——我会一步步引导你，就像我过去几年里教过的无数学生一样。所以，拿起你最喜欢的饮料，坐舒服了，让我们一起潜入水中！

TypeScript - Template Literal Types

字面量模板类型是什么？

在我们深入了解之前，先来了解一下字面量模板类型是什么。想象你正在制作一张问候卡。你有一个基本的模板，但你想用不同的名字和消息来个性化它。这正是TypeScript中的字面量模板类型所做的——它们允许我们创建灵活、可重用的类型定义，这些定义可以根据我们输入的内容而改变。

语法

字面量模板类型的语法一开始可能看起来有点奇怪，但我保证它并没有看起来那么复杂。以下是基本结构：

type TemplateLiteralType = `prefix ${SomeType} suffix`;

让我们分解一下：

type 是TypeScript中的一个关键字，我们用它来定义一个新的类型。
TemplateLiteralType 是我们给新类型的名称（你可以选择你喜欢的任何名称）。
反引号 (`) 用来包围我们的模板。
${SomeType} 是一个占位符，我们可以在这里插入另一个类型。
prefix 和 suffix 是可选的文本，它们将始终是我们类型的一部分。

把它想象成Mad Libs游戏，其中 ${SomeType} 是我们填写的空白，以创建不同的变体。

示例

现在，让我们通过一些示例来看看字面量模板类型在实际中是如何工作的。我会提供大量的代码示例，并详细解释每一个。

示例 1：基本用法

type Greeting = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // 这是有效的
let invalidGreeting: Greeting = "Hi there!"; // 这将导致错误

在这个示例中，我们创建了一个 Greeting 类型，它必须始终以 "Hello, " 开头并以 "!" 结尾。${string} 部分意味着我们可以在中间放入任何字符串。这就像拥有一个问候卡模板，你可以只更改名字。

示例 2：组合字符串字面量

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // 这是有效的
let invalidShirt: TShirt = "tiny-yellow";  // 这将导致错误

在这里，我们通过组合两个其他类型 Size 和 Color 来创建一个 TShirt 类型。这允许我们创建有效的组合，如 "small-red" 或 "large-green"，但防止无效的组合，如 "tiny-yellow"。

示例 3：使用数字

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // 这是有效的
let invalidPoint: Coordinate = "10,20,30";  // 这将导致错误

在这个示例中，我们使用 number 而不是 string。这创建了一个表示二维坐标的类型。它必须是两个数字，用逗号分隔。

示例 4：复杂模板

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // 这将导致错误

这个示例展示了我们如何创建更复杂的类型。我们定义了一个 ApiRoute 类型，它结合了一个HTTP方法和一个端点。这确保了我们的API路由始终遵循特定的格式。

示例 5：大写和小写修饰符

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // 这是有效的
let soft: WhisperingGreeting = "hi";   // 这是有效的
let invalid: ShoutingGreeting = "Hey"; // 这将导致错误

TypeScript 还提供了像 Uppercase 和 Lowercase 这样的实用类型，我们可以与我们的字面量模板类型一起使用。这个示例展示了我们如何创建新的类型，它们是现有类型的大写或小写版本。

方法表

下面是总结我们讨论过的关键方法和实用工具的表格：

方法/实用工具	描述	示例
基本模板	创建具有固定前缀/后缀和变量部分的类型	`type Greeting = 'Hello, ${string}!'`
联合类型	组合多个字符串字面量类型	`type Color = "red" \\| "blue" \\| "green"`
大写	将字符串字面量类型转换为大写	`type Upper = Uppercase<"hello">`
小写	将字符串字面量类型转换为小写	`type Lower = Lowercase<"HELLO">`

结论

亲爱的学生们，以上就是我们在TypeScript中探索字面量模板类型的精彩世界。从基本用法到更复杂的示例，你们已经看到了这个功能如何帮助我们创建更精确和灵活的类型定义。

记住，就像学习任何新技能一样，掌握字面量模板类型需要练习。如果一开始没有立即理解，不要气馁——我看到过无数学生在最初挣扎，然后后来有了“恍然大悟”的时刻。继续尝试，尝试创建你自己的类型，最重要的是，享受这个过程！

在我多年的教学经验中，我发现那些享受学习过程的学生的学习成绩最好。所以，把TypeScript想象成你编程工具箱中的强大工具，而字面量模板类型就是其中的瑞士军刀——多功能、精确，当你知道如何使用它时，它非常实用。

现在，用你新获得的知识去创造惊人的东西吧。记住，在编程世界中，唯一的限制是你的想象力（也许有时候是你的编译器，但这又是另一个故事了）。快乐编程！

Credits: Image by storyset