Typescript的Utility Types,你知道多少个用法

94 阅读2分钟

Typesctipt 的type类型用法

一、Omit类型

这个Omit类型接口两个参数,Omit<原类型,移除的属性>,这样会返回一个新的type类型,里面会返回除了移除的属性后的全部原类型。

// Omit的用法
interface IOmitA {
  id: number;
  title: string;
  description: string;
}
 
type IOmitB = Omit<IOmitA, "description">;
// 等同于
type IOmitB {
  id: number;
  title: string;
}

二、Partial类型

这个Partial类型接口接收一个参数,Partial<原类型>,这样会返回一个新的type类型,里面会包含原类型的全部属性,但是属性都变为可选

// Partial的用法
interface IPart// Omit的用法
interface IOmitA {
  id: number;
  title: string;
  description: string;
}
 
type IOmitB = Omit<IOmitA, "description">;ialA {
  id: number;
  title: string;
  description: string;
}
​
type IPartialB = Partial<IPartialA>;
//等同于
interface IPartialB {
  id?: number;
  title?: string;
  description?: string;
}

三、Require类型

Require类型主要接收一个类型,Require<可选原类型>,这样会返回一个新的type类型,这个类型会将可选原类型的全部属性变为必须的属性

// Required的用法
interface IRequiredA {
  id?: number;
  title?: string;
  description?: string;
}
type IRequireB = Required<IRequiredA>;
//等同于
interface IRequireB {
  id: number;
  title: string;
  description: string;
}

四、Readonly属性

Readonly属性接收一个原类型,Readonly<原类型>,这样会返回一个新的type类型,这个类型会会将全部原类型的属性变成只读属性,后续即不能再赋值。

//Readonly的用法
interface IReadonlyA {
  id: number;
  title: string;
  description: string;
}
​
type IReadonlyB = Readonly<IReadonlyA>;
//等同于
interface IReadonlyB {
  readonly id: number;
  readonly title: string;
  readonly description: string;
}

五、Record属性

这个Record属性接收两个参数,Record<新类型的key,新类型的value>,这样会返回一个新的类型,新的类型会自动将每一个key和value组合。具体含义可以看下面的例子

// Record的用法
type IRecordKey = "id" | "title" | "description";
interface IRecordValue {
  time: number
};
type IRecordB = Record<IRecordKey, IRecordValue>;
//等同于
interface IRecordBB {
  description: IRecordValue;
  id: IRecordValue;
  title: IRecordValue;
}

六、Pick属性

Pick属性接收两个参数,Pick<原类型,保留的属性>,这样会返回一个新的类型,这个类型只会包含原类型中第二个参数中的所需要保留的属性,这个有点像Omit类型,只不过Omit的第二个参数是会剔除属性,而Pick第二个参数是需要保留的属性。

// Pick的用法
interface IPickA {
  id:number;
  name:string;
  desc:string;
}
​
type IPickB = Pick<IPickA, "name" | "desc">;
//等同于
interface IPickA {
  name:string;
  desc:string;
}