TS内置工具类型

338 阅读2分钟

TS中的工具类型划分为:

  1. 操作接口类型
  2. 联合类型
  3. 函数类型
  4. 字符串类型

操作接口类型

假设我们定义了一个Person

interface Person {
  name: string
  gender?: string
  age?: number
}

Partial<Type>,所有属性都变为可选

type Student = Partial<Person>

// 相当于
type Student = {
  name?: string
  gender?: string
  age?: number
}

Required<Type>,所有属性都变为必选

type Student = Required<Person>

// 相当于
type Student = {
  name: string
  gender: string
  age: number
}

Readonly<Type>,所有属性都变为只读

type Student = Readonly<Person>

// 相当于
type Student = {
  readonly name: string
  readonly gender?: string
  readonly age?: number
}

Pick<Type, keys>,挑选出部分属性

type Student = Pick<Person, 'name' | 'gender'>

// 相当于
type Student = {
  name: string
  gender?: string
}

Omit<Type, keys>,剔除部分属性

type Student = Omit<Person, 'age'>

// 相当于
type Student = {
  name: string
  gender?: string
}

联合类型

Exclude<UnionType, ExcludedMembers>,针对联合类型,排除相同的,留下不同的

type a = string | number
type b = number
type c = Exclude<a, b>

// 相当于
type c = string

Extract<Type, Union>,针对联合类型,排除不同的,取出相同的

type a = string | number
type b = number
type c = Exclude<a, b>

// 相当于
type c = number

NonNullable<Type>,不能为null或undefined

type a = string | number | undefined | null;
type b = NonNullable<a>

// 相当于
type b = string | number

Record<keys, type>,生成接口类型

type MenuKey = 'home' | 'about' | 'more'
interface MenuValue {
  label: string
  show?: boolean
}
const menus: Record<MenuKey, MenuValue> = {
  home: {
    label: '主页'
  },
  about: {
    label: '关于'
  },
  more: {
    label: '更多',
    show: false
  }
}

函数类型

Parameters<Type>,获取传入函数的参数组成的类型

type p1 = Parameters<() => void>  // []
type p2 = Parameters<(x:number, y?:string) => void>  // [x:number, y?:string]

ReturnType<Type>,获取函数的返回类型

type p1 = ReturnType<() => void>  // void
type p2 = ReturnType<() => string>  // string

ConstructorParameters<Type>,获取传入构造函数的参数组成的类型

interface Student {
  name: string;
  age: number;
}

interface StudentConstructor {
  new (name: string, age: number): Student
}

const student1: ConstructorParameters<StudentConstructor>

InstanceType<Type>,获取构造函数的返回类型

const Student = class {
  name: string;
  age: number;
  constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }
  showInfo () {
    console.log('name: ', this.name, 'age: ', this.age);
  }
}

const student1: InstanceType<typeof Student> = new Student('张三', 20)

ThisParameterType<Type>,获取函数的this类型

function fun(this: object, x: number): void {
  console.log(this)
}

type p = ThisParameterType<typeof fun>  // object

OmitThisParameterType<Type>,去除函数类型中的this类型

function fun(this: object, x: number): void {
  console.log(this)
}

type p = OmitThisParameterType<typeof fun>  // (x:number):void

ThisType<Type>,在对象字面量中指定this的类型

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

字符串类型

Uppercase<StringType>,大写

Lowercase<StringType>,小写

Capitalize<StringType>,首字母大写

Uncapitalize<StringType>,首字母小写