[Day11] TS：什麽！型别也有样板字串（Template Literal Types）？

这是我们今天要聊的内容，老样的，如果你已经可以轻松看懂，欢迎直接左转去看我同事 Kyle 精彩的文章 — 「今晚，我想来点 Web 前端效能优化大补帖！」。

Template Literal Types 的基本用法

大部分 JavaScript 的开发者都知道有 Template Literals / Template Strings（样本字面值）可以使用，讲中文可能大家反而不知道是什麽，但重点就是使用反引号（backtick）` 这个关键字，并可以在 ${} 里面带入变数，像是这样：

const occupation = 'Web Developer';
const content = `Hello, I am a ${occupation}.`; // 'Hello, I am a Web Developer.'

而这个用法同样可以在 TypeScript 中定义型别时使用，称作 Template Literal Types。就让我们直接把上面 JavaScript 的范例改成型别看看：

type Occupation = 'Web Developer';
type Content = `Hello, I am a ${Occupation}.`; // "Hello, I am a Web Developer."

用起来就和 JavaScript 的 Template Literals 一样，就是这麽简单！

这里 Occupation 或 Content 这种直接用字串来定义型别的方式称作 String Literal Types。

当 Template Literal Types 碰到联集（union）

在 TypeScript 中，Template Literal Types 除了可以像 JavaScript 直接带入变数外，还可以带入联集型别（union types），而这是个非常实用的功能。

举例来说：

type HandledEvent = 'change' | 'click' | 'keydown';
type EventHandler = `on${HandledEvent}`; //  "onchange" | "onclick" | "onkeydown"

在上面的例子中可以看到 HandledEvent 是一个 Union Type，当我们把 Union Type 放到 Template Literal Types 中时，TypeScript 会根据所传入的联集，自动组成新的联集（即，"onchange" | "onclick" | "onkeydown"），这个感觉有点类似前几天提到的分配律。

现在让我们回到今天一开始的例子：

type X = 'left' | 'right';
type Y = 'top' | 'bottom';
type Position = `${X}-${Y}`;

现在读者应该可以理解 Position 的型别最终会得到什麽。因为 X 传入的是联集 "left" | "right"，而 Y 也同样是联集 "top" | "bottom"，因此最终 Position 这个型别就会是 "left-top" | "left-bottom" | "right-top" | "right-bottom"。

透过 Template Literal Types 这样的特性可以帮助开发者方便快速的产生所需要的型别。

补充：透过 Template Literal Types 将 enum 的 values 变成 Union Type

在 TypeScript 中很常会只用到 enum，像是：

enum MANUFACTURE {
  APPLE = 'apple',
  SAMSUNG = 'samsung',
  GOOGLE = 'google',
  SONY = 'sony',
}

有时我们想要根据 enum 的 values 来产生出新的型别，如果透过手动定义的话很麻烦，会是这样：

type Manufacture = 'apple' | 'samsung' | 'google' | 'sony';

而且未来如果 MANUFACTURE 有添加新的内容时，还要记得回过头来修改 Manufacture 这个型别，非常不方便。

当有这种需求时，实际上可以使用 Template Literal Types 来解决：

type Manufacture = `${MANUFACTURE}`; // "apple" | "samsung" | "google" | "sony"

就是这麽简单，一行搞定！

范例程序码

https://tsplay.dev/WzoKew @ TypeScript Playground

参考资料

• Template Literal Types @ TypeScript > Type Manipulation