aymfx的博客

Appearance

模板字符串类型 ​

模板字符串类型是 TypeScript 4.1 版本引入的新特性，它允许我们通过模板字符串的语法来构造类型。

基本语法 ​

模板字符串类型使用反引号(`)来定义，与 JavaScript 的模板字符串语法类似：

typescript
type World = 'world';
type Greeting = `hello ${World}`; // type Greeting = "hello world"

实际应用场景 ​

1. 构造字符串联合类型 ​

typescript
type EventName = 'click' | 'scroll' | 'mousemove';
type EventHandler = `on${Capitalize<EventName>}`;
// type EventHandler = "onClick" | "onScroll" | "onMousemove"

2. 属性名称转换 ​

typescript
type CamelCase<S extends string> =
  S extends `${infer P1}_${infer P2}${infer P3}`
    ? `${P1}${Uppercase<P2>}${CamelCase<P3>}`
    : S;

type PropName = 'user_first_name';
type CamelCaseProp = CamelCase<PropName>; // type CamelCaseProp = "userFirstName"

3. API 路径构造 ​

typescript
type Version = 'v1' | 'v2';
type Resource = 'users' | 'posts' | 'comments';
type ApiPath = `api/${Version}/${Resource}`;
// type ApiPath = "api/v1/users" | "api/v1/posts" | "api/v1/comments" | "api/v2/users" | "api/v2/posts" | "api/v2/comments"

内置字符串操作类型 ​

TypeScript 提供了几个内置的字符串操作类型：

  • Uppercase<StringType> - 转换字符串为大写
  • Lowercase<StringType> - 转换字符串为小写
  • Capitalize<StringType> - 首字母大写
  • Uncapitalize<StringType> - 首字母小写
typescript
type Greeting = 'Hello, World';
type ShoutyGreeting = Uppercase<Greeting>; // type ShoutyGreeting = "HELLO, WORLD"
type QuietGreeting = Lowercase<Greeting>; // type QuietGreeting = "hello, world"
type HelloGreeting = Capitalize<'hello'>; // type HelloGreeting = "Hello"
type helloGreeting = Uncapitalize<'Hello'>; // type helloGreeting = "hello"

注意事项 ​

  1. 模板字符串类型只能用于类型层面，不能在运行时使用
  2. 插值表达式中只能使用类型，不能使用值
  3. 当使用联合类型进行插值时，结果会是所有可能组合的联合类型

总结 ​

  • 使用模板字符串类型可以帮助我们减少类型定义的重复
  • 在需要处理字符串相关类型转换时，优先考虑使用内置的字符串操作类型
  • 合理使用模板字符串类型可以提高代码的类型安全性和可维护性