TypeScript要想玩的6,实用工具类型必须知(二)

53 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

很多初学者在学习TypeScirpt这门语言都非常的吃了,学习了基本的接口、泛型、联合类型、元组等等一系列关于TypeScript知识。

但是在实际开发中去定义类型又非常不熟练,并且又有一种约束的感觉。总的来说对开发体验感极差从而导致对TypeScript这一门语言产生厌恶或者恐惧,从而 any 一把梭。

实际上,学习TypeScript并非一件容易的事,它是一个类型世界。我自己在初学TypeScirpt时也是产生这种恐惧的感觉,并没有给我的开发带来便利的感觉。到后面用多了才明白它的好。

TypeScript 工具类型

接下来主要是介绍一下 TypeScript 提供给我们的一些工具类型。

在文章中TypeScript要想玩的6,实用工具类型必须知(一) 已经介绍了五种实用工具类型,接下来就继续介绍其他的工具类型。

Omit<Type, Keys>

Omit<Type, Keys>Pick<Type,keys> 则是相反,删除一组Type存在的属性,来构造一个新的类型

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type TestOmitType = Omit<Todo, "completed" | "description">;

// 转换为如下类型
type TestOmitType = {
    title: string;
}

实现源码:

type CustomOmitType<T, K extends keyof T> = {
  [P in keyof T as P extends K ? never : P]: T[P];
};

Exclude<UnionType, ExcludeMembers>

Exclude<UnionType, ExcludeMembers> 从联合类型UnionType中排除指定成员 ExcludeMembers

type TestExcludeType = Exclude<string | number, number>;

// 转换为如下类型
type TestPartialType = string

实现源码:

// 想象成联合类型的每一个类型都会进一遍这个三元表达式,因此来进行判断
type CustomExcludeType<T extends keyof any, K extends T> = T extends K
  ? never
  : T;

Extract<Type, Union>

Extract<Type, Union> 从联合类型 Type、Union 中提取共有的类型来构造一个新的类型

type TestExtractType = Extract<
  "a" | "b" | "c",
  "a" | "b" | "d" | "f"
>;

// 转换为如下类型
type TestExtractType = "a" | "b"

实现源码:

type CustomExtractType<T, K> = T extends K ? T : never;

NonNullable<Type>

NonNullable<Type> 排除类型Type中的null和undefined 构造一个新的类型

type TestNonNullableType = CustomNonNullableType<
  string | number | undefined | null
>;

// 转换为如下类型
type TestNonNullableType = string | number

实现源码:

type CustomNonNullableType<T> = T extends null | undefined ? never : T;

Parameters<Type>

Parameters<Type> 从函数类型Type的参数中使用的类型 构造一个元组类型

declare function f1(arg: { a: number; b: string }): void;

type TestParametersType = Parameters<(s: string, b: number) => any>;

// 转换为如下类型
type TestParametersType = [s: string, b: number]

实现源码:

// infer X 类型推断 假设为X类型的意思
type CustomParametersType<T extends (...args: any[]) => any> = T extends (
  ...args: infer X
) => any
  ? X
  : never;

总结

学好学精TypeScript也并非一件简单简单的事情,但是学精后在开发当中也确实会让你事半功倍。

快一起学起来吧,祝各位早日成为类型定义大师,告别一把梭!!!