TS 类型工具

大侠留步
605 阅读2分钟

了解Typescript的人想必对泛型也不陌生，泛型可以让我们在预先不知道具体类型的情况下仍能够做到精确的类型限制和校验，泛型是Typescript里非常重要的一个知识点，也是学习Typescript路上必不可少的一部分。基于泛型，官方也提供了一些泛型工具供开发者使用，接下来本文将对这些泛型工具进行介绍。

Partial<T>

Partial可以快速的将一个对象中的属性变为可选的。当你有两个对象属性都一样，其中一个对象所有属性都必需，而另外一个对象中部分属性是非必需时，使用Partial可以帮助你减少不必要的重复定义。

type UserInfo = {
    name: string,
    mobile: string,
    age: number,
    sex: number
}

type VipUserInfo = Partial<UserInfo>

const vipUserInfo: VipUserInfo = {
    name: '张三',
    mobile: '10086'
}

image.png

Required<T>

Required与Partial相反，可以快速将一个泛型设置为必选项。

type UserInfo = {
    name?: string,
    mobile?: string,
    age?: number,
    sex?: number
}

type VipUserInfo = Required<UserInfo>

image.png

Readonly<T>

Readonly可以快速将一整个对象的属性都设置为只读。

type UserInfo = {
    name: string
}

const userInfo: Readonly<UserInfo> = {
    name: '张三'
}

userInfo.name = '李四'

image.png

Record<K, T>

Record可以帮助我们约束一个对象的键与值的类型。

设置一个对象的所有属性值都为number类型：

const vipFee: Record<string, number> = {
    vip: 99,
    vvip: 46
}

vipFee.vvip = '' // error，vvip的值不能为字符串

image.png

约束对象的key为特定的值：

type UserKeys = 'name' | 'mobile'

const UserInfo: Record<UserKeys, string> = {
    name: '张三',
    mobile: '10086',
    nickName: '李四' // error，key只能是name和mobile
}

image.png

Pick<T, K>

Pick<T, K>的作用是从T中的提取出K属性，形成新的子集类型。

type UserInfo = {
    name: string
    mobile: string
    age: number
}

type LogUserInfo = Pick<UserInfo, 'name' | 'mobile'>

image.png

Omit<T, K>

Omit与Pick相反，Omit<T, K>是从T里过滤掉K包含的键，形成新的子集类型。

type UserInfo = {
    name: string
    mobile: string
    age: number
}

type LogUserInfo = Omit<UserInfo, 'age'>

image.png

Exclude<T, U>

Exclude<T, U>的作用是将T里面包含有U的去除，也就是取T和U的交集。

type Name = Exclude<string | number, number> // Name: string

image.png

Extract<T, U>

Extract的作用与Exclude相反，取T和U的并集。

type Name = Exclude<string | number, number> // Name: number

image.png

NonNullable<T>

NonNullable可以过滤掉null和undefined类型。

type Name = NonNullable<string | null | undefined>

image.png

Parameters<T>

获取函数的参数类型，返回结果是一个数组。

function fn(name: string, n: number) {}

type P = Parameters<typeof fn>

image.png

ReturnType<T>

获取函数返回值的类型。

function fn(name: string) {
    return 'hello，' + name
}

type P = ReturnType<typeof fn>

image.png

最后

推荐一个类型工具：utility-types，除了官方提供的类型工具外，该库做了很多实用的类型工具拓展，阅读其源码也是一个学习typescript非常不错的选择。

avatar
文章
阅读
粉丝