关于 TypeScript 内置工具类型的那些事儿

哈喽，大家好，我是 SuperYing。今天我们来聊聊 TypeScript 的内置工具类型。

对 TypeScript 有所了解的小伙伴应该知道，我们可以借助 TypeScript 语言强大的类型系统编写各种类型来实现代码的类型控制，提示等。其实 TypeScript 也是内置了一些开箱即用的工具类型，你们知道吗？接下来我们来看看到底有哪些吧…

1.Partial

该工具函数可以构造一个新类型，将类型参数 T 中的所有属性变为 可选属性。

interface Person {
  name: string
  age: number
}

type PartialType = Partial<Person> // { name ?: string; age ?: number }

const student1: PartialType = {
  name: 'zhangsan',
  age: 18
} 

const student2: PartialType = {
  name: 'lisi'
}

cosnt student3: PartialType = {
  age: 18
}

const student4: PartialType = {}

2.Required

该工具函数可以构造一个新类型，将类型参数 T 中的所有属性变为 必选属性。

interface Person {
  name: string
  age?: number
}

type RequiredType = Required<Person> // { name: string; age: number }

const student1: RequiredType = {
  name: 'zhangsan',
  age: 18
} 

const student2: RequiredType = { // 错误，缺少 age 属性
  name: 'lisi'
}

cosnt student3: RequiredType = { // 错误，缺少 name 属性
  age: 18
}

3.Readonly

该工具函数可以构造一个新类型，将类型参数 T 中的所有属性变为 只读属性。

interface Person {
  name: string
  age?: number
}
  
type ReadonlyType = Readonly<Person> // { readonly name: string; readonly age: number }
  
const student1: ReadonlyType = {
  name: 'zhangsan',
  age: 18
} 
  
student1.name = 'lisi' // 编译错误，不允许修改；name 属性为只读属性
student1.age = 20 // 编译错误，不允许修改；age 属性为只读属性

4.Record<K, T>

该工具类型可以构造一个新的对象类型。类型参数 K 提供了对象属性名联合类型，类型参数 T 提供了对象属性值的类型。
实际类型参数 K 必须能够赋值给 "string | number | symble" 类型，因为仅有这几种类型能够作为对象的属性名类型。

type K = 'x' | 'y'
type T = number
type R = Record<K, T> // { x: number; y: number }
const a: R = { x: 0, y: 0 }

5.Pick<T, K>

该工具类型可以从已有的对象类型中选取指定的属性及其类型，然后构建出一个新的对象类型。
类型参数 T 表示源对象的类型，类型参数 K 提供了待选取的属性名类型，它必须是对象类型 T 中存在的属性。

interface Person {
    name: string
    age: number
}

type PickName = Pick<Person, 'name'> // { name: string }
type PickAge = Pick<Person, 'age'> // { age: number }
type PickAll = Pick<Person, 'name' | 'age'> // { name: string; age: number }

type PickError = Pick<Person, 'sex'> // 错误，类型 Person 中不存在 sex 属性

6.Omit<T, K>

该工具类型的作用与 Pick<T, K> 是互补的，能够从已有的对象属性中剔除指定的属性，然后构建出一个新的对象类型。
类型参数 T 表示源对象的类型，类型参数 K 提供了待剔除的属性名的类型，但是它可以是类型参数 T 中不存在的属性。

interface Person {
    name: string
    age: number
}

type OmitName = Omit<Person, 'name'> // { age: number }
type OmitAge = Omit<Person, 'age'> // { name: string }
type OmitAll = Omit<Person, 'name' | 'age'> // {}
type OmitNone = Omit<Person, 'z'> // { name: string; age: number }

7.Exclude<T, U>

该工具类型能够从类型参数 T 中剔除所有可以赋值给类型参数 U 的类型，并构建一个新类型。

type Exclude0 = Exclude<'a' | 'b' | 'c', 'a'> // 'b' | 'c'
type Exclude1 = Exclude<'a' | 'b' | 'c', 'a' | 'b'> // 'c'
type Exclude2 = Exclude<string | (() => void), Function> // string

8.Extract<T, U>

该工具类型的作用与 Exclude<T, U> 类型是互补的，它能够获取类型参数 T 中所有能够赋值给类型参数 U 的类型，并构建一个新类型。

type Extract0 = Extract<'a' | 'b' | 'c', 'a' | 'f'> // 'a'
type Extract1 = Extract<string | (() => void), Function> // () => void
type Extract2 = Extract<string | number, boolean> // never

9.NonNullable

该工具类型能够从类型参数 T 中剔除 null 类型和 undefined 类型，并构建一个新的类型。即获取类型 T 中的所有非空类型。

type NonNull0 = NonNullable<string, null, number> // string, number
type NonNull1 = NonNullable<string[], null, undefined> // string[]

10.Parameters

该工具类型能够获取函数类型 T 的参数类型并使用参数类型构造一个元组类型。

type Parameters0 = Parameters<() => string> // []
type Parameters1 = Parameters<(s: string) => void> // [string]
type Parameters2 = Parameters<<T>(arg: T) => T> // [unknown]
type Parameters3 = Parameters<(arg: { x: string; y: number }) => void> // [{x: string, y: number}]
type Parameters4 = Parameters<any> // unknown[]
type Parameters5 = Parameters<never> // never
type Parameters6 = Parameters<string> // 编译错误，string 类型不符合约束"(...args: any) => any"
type Parameters7 = Parameters<Function> // 编译错误，Function 类型不符合约束"(...args: any) => any"

11.ContructorParameters

该工具类型能够获取构造函数 T 中的参数类型，并使用参数类型构造一个元组类型。若参数类型 T 不是函数类型，则返回 never 类型。

// [string, number]
type ContructorParameters0 = ContructorParameters<new (x: string, y: number) => object>
// [(string | undefined)?]
type ContructorParameters1 = ContructorParameters<new (x?: string) => object>
type ContructorParameters2 = ContructorParameters<string> // 编译错误
type ContructorParameters3 = ContructorParameters<Function> // 编译错误

12.ReturnType

该工具类型能够获取函数类型 T 的返回值类型。

type ReturnType0 = ReturnType<() => string> // string
type ReturnType1 = ReturnType<() => { a: number; b: string}> // { a: number; b: string}
type ReturnType2 = ReturnType<() => void> // void
type ReturnType3 = ReturnType<<T>() => T> // {}
type ReturnType4 = ReturnType<<T extends U, U extends number[]>() => T> // number[]
type ReturnType5 = ReturnType<never> // any
type ReturnType6 = ReturnType<boolean> // 编译错误
type ReturnType7 = ReturnType<Function> // 编译错误

13.InstanceType

该工具类型能够获取构造函数的返回值类型。

class Person {
    name = 'zhangsan'
}
type InstanceType0 = InstanceType<typeof Person> // Person
type InstanceType1 = InstanceType<new () => object> // object
type InstanceType2 = InstanceType<never> // any
type InstanceType3 = InstanceType<any> // any
type InstanceType4 = InstanceType<string> // 编译错误
type InstanceType5 = InstanceType<Function> // 编译错误

14.ThisParameterType

该工具类型能够获取函数类型 T 中的 this 参数的类型，若函数类型中没有定义 this 参数，则返回 unknown 类型。
在使用该工具类型时需要启用 “–strictFunctionTypes” 编译选项。

function fun0(this: object, x: number) {}
function fun1(x: number) {}
type ThisParameterType0 = ThisParameterType<typeof fun0> // object
type ThisParameterType1 = ThisParameterType<typeof fun1> // unknown
type ThisParameterType2 = ThisParameterType<string> // unknown

15.OmitThisParameter

该工具函数能够从类型 T 中剔除 this 参数的类型，并构造一个新的类型。
在使用该工具类型时需要启用 “–strictFunctionTypes” 编译选项。

function fun0(this: object, x: number) {}
function fun1(x: number) {}
type OmitThisParameter0 = OmitThisParameter<typeof fun0> // (x: number) => void
type OmitThisParameter1 = OmitThisParameter<typeof fun1> // (x: number) => void
type OmitThisParameter2 = OmitThisParameter<string> // string

16.ThisType

该工具类型比较特殊，它不是用来构造新类型的，而是用于定义对象字面量的方法中的 this 的类型。如果对象字面量的类型是 ThisType 或者是包含 ThisType 的交叉类型，那么在对象字面量的方法中的 this 类型为 T。
使用该工具类型时需要启用 “–noImplicitThis” 编译选项。

const obj: ThisType<{x: number}> & { getX: () => number } = {
    getX() {
        this; // {x: number}
        return this.x
    }
}

在上例中，使用交叉类型为 obj 对象指定了 “ThisType” 类型，因此 getX 方法的 this 类型为 “{x: number}”。

好啦！以上便是「 TypeScript 内置工具类型 」的全部内容，感谢阅读。

欢迎各路大佬讨论、批评、指正，共同进步才是硬道理！