Ethan | 博客

最近无疑间发现 Typescript 提供的实用工具类型，解决了之前开发中碰到的困惑，于是今日将这一块知识全面补充的一下。

typeof and keyof

这两个和后面其他的不太一样，但也十分重要且常用。

typeof 在 JavaScript 中也是存在的，但你在 TypeScript 中也是存在的，不知道你看见的时候有没有困惑过。哪他们的区别是什么呢

typeof 在 JavaScript 用来识别变量的类型，注意是运行时类型，是无法获取 TypeScript 声明的编译时类型
typeof 在 TypeScript 可以在编译期间执行

下面看看 typeof 的例子

const a = { foo: 0 };
const b: Array<typeof a> = [{ foo: 1 }, { foo: 2 }, {foo: 3}];
const c: string = typeof a; // "object"

keyof 与 Object.keys 略有相似，只不过 keyof 取 interface 的键。下面看一个例子

enum ColorsEnum {
    white = '#ffffff',
    black = '#000000',
}
type Colors = keyof typeof ColorsEnum;

有没有思考为啥要 keyof 接着 typeof 呢。原因是：keyof 取的是类型的 key 值，但 enum 其实创建的是实例了，因此需要先使用 typeof 获得对应的类型

Partial

Partial 翻译过来表示部分的意思，表示 T 中所有的类型都是可选的。这个属性太酷了，假设你的需要是，通过传递对象的一部分，比如 userPatch，来更新 user 数据，这时候就可以排上用处的，如果不知道这个函数，你可能就需要使用到 any 了

举个例子

function updateUser(user: User, fieldsToUpdate: Partial<User>) {
  return { ...user, ...fieldsToUpdate };
}

哇塞是不是很酷，感觉自己的 typescript 功底都不一样了，哈哈

Readonly

这个就比较简单了，表明类型 T 的所有属性都只是可读的，不能被重新赋值

Record<K,T>

这个稍微复杂点，将 K 的所有属性，类型声明为 T。

Pick<T,K>

这个很实用，从 T 中取出 K 声明的属性，例子如下

type TodoPreview = Pick<Todo, "title" | "completed">;

Omit<T,K>

和 Pick 相反，从 T 中排除 K 声明的属性

type TodoPreview = Omit<Todo, "description">;

Exclude<T,U>

从 T 中排除 U 中声明的属性

Extract<T,U>

从 T 中提取 U 中声明的属性

NonNullable

算是 Exclude 的特殊版，从 T 中排除 null 和 undefined

Parameters

T 只能是一个函数，该工具用来得到函数的参数类型

declare function f1(arg: { a: number; b: string }): void;
type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]
type T4 = Parameters<typeof f1>; // [{ a: number, b: string }]

ConstructorParameters

获取构造函数的参数类型

ReturnType

函数 T 返回结果作为类型

declare function f1(): { a: number; b: string };
type T0 = ReturnType<() => string>; // string
type T1 = ReturnType<(s: string) => void>; // void
type T4 = ReturnType<typeof f1>; // { a: number, b: string }

InstanceType

通常你可能并不需要用到这个工具，因为如果是普通的类，你直接使用 Class Name 即可。

当你由于某些原因，你不知道该类的声明时，比如如下两种情况，会很有帮助。具体见Need documentation for InstanceType

Required

将 T 的所有属性设置为必须，即使本身可能是 ? 可选

其他

这几个说实话，看不太懂哇

ThisParameterType
OmitThisParameter
ThisType

Better

Typescript 工具类型