发布于 1年前

TypeScript对优化代码最有用的几个工具类型(Utility Type)

TypeScript提供了好几个工具类型,它们主要用于常见的类型转换。这里介绍让代码优化非常有用的几个工具类型:Partial,Required,Record,Pick,Omit和Exclude。

Partial

Partial顾名思义,取部分。它的作用是把已有类型里的所有属性变为可选。

示例

interface User{
  id:number;
  name:string;
  atavarUrl: string;
  about: string
}

如我们已经定义了User类型,在定义时User类型的所有属性都是必选的。有一个功能,只需更新User的“关于”介绍,但又不想新增一个interface,把其他属性去掉。或者修改User interface,把其他属性改为可选,这样做可能会影响其他地方的使用。此处Partial就大有用处了,它可以把User的所有属性转换为可选:

const updateAbout = Partial<User> {
  about: "帅哥一枚"
}

Required

Required和Partial相反,它是类型的所有属性都设置为必选。这样有助于检查必选值是否赋值了。

示例

interface User  {
  firstName: string;
  lastName?: string;
}

定义的User,lastName是可选的,为了让调用者显式知道所有属性必选赋值,Required就可以上场了。

const user = Required<User> {
  firstName: ‘四’,
  lastName: ‘李’
}

Record

Record构造了一个key-value的关系,可以把一个类型的值映射为另一个类型的值。

示例

构造一个由用户名到用户信息的Record。

interface UserProfile {
   age: number;
   company: string
}
type UserName = “zhangsan” | ”lisi“ | “wangwu”;

const users : Record<UserName, UserProfile> = {
  “zhangsan”: {age: 23, company: ‘ACompany’},
  “lisi”: {age: 22, company: ‘ACompany’},
  “wangwu”: {age: 22, company: ‘BCompany’},
}

Pick

Pick工具类型可以从一个已有的类型,挑选部分属性来创建一个新的类型。

例如:

从一个总括的类型抽取部分属性作为简要类型的属性。

interface User {
    id: number;
    name: string;
    age: number;
    company: string;
}

type UserPreview = Pick<User, "id"|"name">
const userPreview: UserPreview = {
   id: 1,
   name: "张三"
}

Omit

Omit工具类型是从已有的对象类型中指定移除的属性后创建一个新的对象属性。这也正好和Pick相反。

上面构造的UserPreview示例,使用Omit实现:

type UserPreview = Omit<User, "age"|"company">
const userPreview: UserPreview = {
   id: 1,
   name: "张三"
}

Exclude

在使用UnionType时,有些情况下是不希望已有的UnionType的所有成员,所以可以使用Exclude把部分UnionType的部分成员排除。

type T0 = Exclude<"a" | "b" | "c", "a">;
type T0 = "b" | "c"  //排除了a
type T1 = Exclude<"a" | "b" | "c", "a" | "b">;
type T1 = "c"  //排除了a,b
type T2 = Exclude<string | number | (() => void), Function>;
type T2 = string | number   //排除了函数类型
©2020 edoou.com   京ICP备16001874号-3