TypeScript 什么是模板文字类型

模板文字类型 在TypeScript中基于字符串文字类型，并且可以通过联合操作扩展为多个字符串。它们具有与JavaScript的模板文字字符串相同的语法，但在类型位置上使用。当与明确的文字类型一起使用时，模板文字会将内容连接起来创建一个新的字符串文字类型。

语法: 创建模板文字的语法如下：

${...}

注意： 在创建模板字面量时，使用代替“”。

示例1： 将字符串字面量与字符串连接。

在下面的代码中，我们创建了一个字符串字面量，在“ ticks ”中使用${}语法将其与另一个字符串连接，生成了一个新的类型。

Javascript

type coding = "coding";
type sentence = `i like ${coding}`;

let sentence1: sentence = "i like coding";
console.log(sentence1);

输出：

i like coding 

示例 2: 使用联合类型通过模板文字语法将字符串文字类型与其他字符串连接起来，可以创建一个新的类型。该类型是每个联合成员可能表示的所有潜在字符串文字的集合。

Javascript

type Headings = "h1" | "h2" | "h3" | "h4" | "h5";
type Paragraphs = "p";

type AllLocaleIDs = `${Headings | Paragraphs}_tag`;

输出:

type AllLocaleIDs = “h1_tag” | “h2_tag” | “h3_tag” | “h4_tag” | “h5_tag” | “p_tag”

示例3: 联合类型的交叉运算。在这个示例中，我们对两个联合类型进行交叉运算。通过使用模板文字，我们对联合类型进行交叉运算。

Javascript

type A = 'a1'|'a2'|'a3';
type B = 'b1'|'b2'|'b3';

type concat = `{A}_{B}`;

输出:

type concat = “a1_b1” | “a1_b2” | “a1_b3” | “a2_b1” | “a2_b2” | “a2_b3” | “a3_b1” | “a3_b2” | “a3_b3” 

参考: https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html