走进ts-工具泛型

写在前面

上一篇文章简单介绍了泛型的概念，以及函数泛型、类泛型、接口泛型的使用方式，还有多参数泛型和泛型约束的方法。本篇将介绍下ts官网提供的一些工具泛型，什么是工具泛型呢？简单来说就是可以把一个复杂的类型转变成我们想要的类型。以下代码举例

interface StudentInfos {
    name: string
    age: number
    tall: number
    weight: number
    favor: string[]
    sex: 'boy' | 'girl'
    country: string
    id: string
    mother: string
    father: string
}

这是一个学生信息的接口，但是有些业务只关心tall和weight，有一些业务又只关心mother和father，于是乎我们又增加了两个接口

interface StudentBodyInfos {
    tall: number
    weight: number
}

interface StudentParentsInfos {
   mother: string
   father: string
}

如果又有其他的业务既关心学生tall和weight，又关心mother和father，那么又会增加一些接口，如此一来，项目中管理各种各样重复的接口类型也是一笔不小的维护开销，如何做到灵活处理呢？那么活用工具泛型无疑可以大大省去这些开销，比如使用Pick

const studentBodyInfo:Pick<StudentInfos, 'tall' | 'weight'> = {
    tall: 165,
    weight: 120,
}
const studentParentsInfo:Pick<StudentInfos, 'mother' | 'father'> = {
    mother: 'mother',
    father: 'father',
}

这里的Pick也是工具泛型的一种，可以从一个复杂的类型中选择需要的属性返回一个新类型。相比起遇到细粒度的类型重复去新建interface，使用Pick维护简单，而且不需要管理诸多的Interface。

Pick实现

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

这里要讲3个点，不然后面的工具泛型也看不懂

• in 遍历联合类型
• keyof指代遍历出类型的key 返回联合类型

type StudentInfoKeys = keyof StudentInfos;

// 等同以下写法
type StudentInfoKeys = "name" | "age" | "tall" | "weight" | "favor" | "sex" | "country" | "id" | "mother" | "father"

• extends在ts用法很多，可以泛型约束，类/接口继承，笔者认为把这里理解泛型约束，要求我们传入的必须是StudentInfoKeys的子集。此处再补充一点extends也可以拿来做条件判断。

T extends U ? X : Y
// 如果T包含的类型 是U包含的类型的 '子集'，那么取结果X，否则取结果Y

总结Pick的用处

• 给定一个复杂的类/接口T
• 约束传入的key的联合类型K属于T所有keys的联合类型的子集
• 遍历K，并要求遍历中的P类型为T中P的类型

还有很多的工具类型，大体上都是通过in keyof extends这些进行设计，下面来看看都有哪些实用的工具泛型吧。

Partial

让一个类型所有的props可选，适用于一些对类型结构需求不明确，需要灵活处理的场景。

type Partial<T> = {
    [P in keyof T]?: T[P];
};

const someStudentsInfo: Partial<StudentInfos> = {
    tall: 165,
    weight: 120,
    mother: 'mother'
}

PickWithPartial

小插曲，我们想让Pick返回的类型也props可选，参照Partial得出我们新造出来的新工具泛型

type PickWithPartial<T, K extends keyof T> = {
    [P in K]?: T[P];
};
const someStudentBodyInfo:PickWithPartial<StudentInfos, 'tall' | 'weight'> = {
    tall: 165
}

Required

前有Partial，相反地想让所有的属性必选，怎么处理呢？这里要说下 – 的用法。

• -表示逻辑取反 比如 -? 表示 非可选。

那么Required就很简单了

type Required<T> = {
    [P in keyof T]-?: T[P];
};
interface PartProps {
    a?: string
    b?: string
}
// 因为Required，所以要求a, b属性必选
const a:Required<PartProps> = {
   a: 'a',
   b: 'b'
}

Readonly

所有属性只读

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

Record

由联合类型的key当做新类型的key

type Record<K extends keyof any, T> = {
    [P in K]: T;
};
type RecordKeys = 'a' | 1;
const a : Record<RecordKeys, string> = {
    a: 'a',
    1: 'a'
}

// 更合理的场景
type StudentsName = '小明' | '小张' | '小王'
const studentsInfo : Record<StudentsName, StudentInfos> = {
    '小张':  {} as StudentInfos,
    '小明': {} as StudentInfos,
    '小王': {} as StudentInfos,
}

Exclude

从一个联合类型中排除掉属于另一个联合类型的子集

type Exclude<T, U> = T extends U ? never : T;

type name = Exclude<'小明' | '小张', '小张' | '小王'>

// 等同
type name = '小明'

Extract

跟Exclude相反，从从一个联合类型中取出属于另一个联合类型的子集

type Extract<T, U> = T extends U ? T : never;

type name = Exclude<'小明' | '小张', '小张' | '小王'>

// 等同
type name = '小张'

Omit

跟Pick相反，把选出的排除掉

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

• Exclude<keyof T, K> 排除掉属于K的子集
• Pick<T, Exclude<keyof T, K>> 选出被排除掉的剩下的props

NonNullable

排除null/undefined类型

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

type studentName = NonNullable<string | null | undefined> // string

ReturnType

返回函数的返回结果类型

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
type resType = ReturnType<(arg: { name: string }) => string>
// 等同于
type resType = string;

这里一个新字眼infer，作用是命名变量，这里可以理解成把返回结果类型通过Infer命名成R

自由构建

ts工具泛型非常多且实用，大多通过in keyof extends infer -这些关键字进行构筑，理解了这些才能自由自在的构筑自己的工具泛型。比如有个需求，通过调取函数获得班级学生的姓名，再通过姓名构建key的类型映射。

type StudentName = '小张' | '小明' | '小王';
type StudentRizeler<T extends () => StudentName, K> = T extends (...args: any) => StudentName ? Record<StudentName, K> : any;
const demo: StudentRizeler<() => StudentName, StudentInfos> = {
    '小张': {} as StudentInfos,
    '小明': {} as StudentInfos,
    '小王': {} as StudentInfos,
}

const demo2: StudentRizeler<() => StudentName, Pick<StudentInfos, 'age' | 'favor'>> = {
    '小张': {
        age: 25,
        favor: ['eat']
    },
    '小明': {
        age: 26,
        favor: ['sleep']
    },
    '小王': {
        age: 15,
        favor: ['play']
    },
}

总结

ts不仅提供的强大的类型系统，外加提供的开放能力也允许开发者自由的构建各种各样的类型。工具泛型在提高代码灵活性降低管理interface的同时，自定义的一些工具泛型也是一抹亮丽的风景啊~