Typescript 中的模板字面量类型是什么？

typescript 中的模板字面量类型基于字符串字面量类型，并且可以使用联合扩展为许多字符串。它们与 JavaScript 的模板字面量字符串具有相同的语法，但它们用于类型位置。当与有形字面量类型一起使用时，模板字面量将内容连接起来以创建新的字符串字面量类型。

语法：以下是创建模板字面量的语法：

${...}

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

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

在下面的代码中，我们创建了一个字符串字面量，并使用 ${} 语法进一步将它与另一个字符串连接在“ 记号”中。形成了一种新的类型。

Javascript

type coding = "coding";
type sentence = `i like ${coding}`;
  
var sentence1: sentence = "i like coding";
console.log(sentence1);

输出：

i like coding coding

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

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