前端 TypeScript 面试题, 什么是 TypeScript 的模板字面量类型?
前端 TypeScript 面试题, 什么是 TypeScript 的模板字面量类型?
QA
Step 1
Q:: 什么是 TypeScript 的模板字面量类型？
A:: TypeScript 的模板字面量类型（Template Literal Types）是基于字符串字面量的类型，允许通过在模板字面量中嵌入其他类型来创建复杂的字符串类型。例如，type Greeting = Hello, ${string}``; 定义了一个可以匹配以 'Hello, ' 开头并跟随任意字符串的类型。这种类型在处理字符串模式匹配和构建复杂类型时非常有用。
Step 2
Q:: 如何使用模板字面量类型来构造新的字符串类型？
A:: 模板字面量类型可以用来构造新的字符串类型，比如将多个字符串字面量类型组合成一个新的类型。举个例子：type Event = 'click' | 'scroll' | 'mousemove'; type EventHandler = on${Capitalize<Event>}``; 这个例子构建了 'onClick', 'onScroll', 'onMousemove' 这样的字符串类型。
Step 3
Q:: TypeScript 中的 infer 关键字是什么？如何与模板字面量类型配合使用？
A:: infer 关键字用于在条件类型中推断类型变量的类型。在模板字面量类型中，infer 可以与条件类型结合使用，用于提取模板字面量中的某部分。例如，type ExtractPrefix<T> = T extends ${infer Prefix}_${string}`` ? Prefix : never; 这个类型定义提取以某个前缀加下划线开头的字符串的前缀部分。
Step 4
Q:: 模板字面量类型如何与其他高级类型特性结合使用？
A:: 模板字面量类型可以与 TypeScript 的条件类型、映射类型、联合类型等特性结合使用。例如，你可以通过模板字面量类型和条件类型来实现对字符串联合类型的模式匹配或过滤。type Filtered<T extends string> = T extends on${infer Rest}`` ? Rest : never; 这个例子过滤掉了所有以 'on' 开头的字符串类型。