工作中采用 React + TS 的技术栈开发,项目组对 TS 能力的要求越来越高,这就需要我们时刻保持学习的动力,在此记录一下 TS 中没有内置的一些 API 的实现,来帮助我们在工作中更好地工作。

TS 中内置的高级特性 API

内置类型

  • Partial- 将 T 所有属性变为可选属性
  • Required- 将 T 所有属性变为必选属性
  • Readonly- 将 T 所有属性变为只读属性
  • NonNullable- 过滤 T 类型中的 null 及 undefined 类型
  • Parameters- 获取函数的参数类型,将每个参数类型放在一个元组中
  • Omit<T, K> - 从类型 T 中剔除 K 中的所有属性
  • Pick<T, K> - 从类型 T 中挑选 K 中的所有属性
  • Exclude<T, U> - 提取存在于 T,但不存在于 U 的类型组成的联合类型
  • Extract<T, U> - 提取联合类型 T 和联合类型 U 的所有交集
  • Record<T, K> - 构造一个具有一组属性 K (类型 T )的类型

内置关键字

  • extends - 继承、泛型约束、条件类型
  • infer - 这玩意我到现在都还没搞懂
  • keyof - 将一个类型的属性名全部提取出来当做联合类型
  • typeof - 在类型上下文中获取变量或者属性的类型
  • in - 常用来遍历枚举类型

TS compiler 内部实现的类型

  • Uppercase - 构造一个将字符串转大写的类型
  • Lowercase - 构造一个将字符串转小写的类型
  • Capitalize - 构造一个将字符串首字符转大写的类型
  • Uncapitalize - 构造一个将字符串首字符转大小写的类型

实现 Optional API,实现部分类型变为可选

1
2
3
4
5
6
7
8
9
10
11
12
13
type Article = {
title: string;
content: string;
author: string;
date: Date;
readCount: number;
}

// 实现 T 部分类型变为可选
type Optional<T,K extends keyof T> = Omit<T,K> & Partial<Pick<T,K>>;

type ArticleTodo = Optional<Article,'author' | 'date' | 'readCount'>
// { title: string; content: string; author?: string; date?: Date; readCount?: number; }

实现 GetOptional API,获取类型中的所有可选字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
type Article = {
title: string;
content: string;
author?: string;
date?: Date;
readCount?: number;
}

// 获取 T 类型中的所有可选字段
type GetOptional<T> = {
[P in keyof T as T[P] extends Required<T>[P] ? never : P]: T[P]
};

type ArticleTodo = GetOptional<Article>
// { author?: string; date?: Date; readCount?: number; }

实现 DeepReadonly API,实现不可变类型的深度遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
type Article = {
title: string;
name:{
first:string;
lasr:string;
}
}

// API,实现不可变类型的深度遍历
type DeepReadonly<T extends Record<string | symbol,any>> = {
readonly [k in keyof T]: DeepReadonly<T[K]>;
};

type ArticleTodo = DeepReadonly<Article>

实现 UnionToIntersection API,将联合类型转为交叉类型

1
2
3
4
5
6
7
8
type Article = { title:string } | { name:string } | { date: Date }

// API,将联合类型转为交叉类型
type UnionToIntersection<T> =
(T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;

type ArticleTodo = UnionToIntersection<Article>
// { title:string } & { name:string } & { date: Date }