TypeScript开发必备:详解常用内置工具类型

153 阅读3分钟

TypeScript 提供了一系列 ​内置工具类型​,用于简化类型操作和转换。这些工具类型基于 TypeScript 的类型系统(如条件类型、映射类型等)实现,下面是一些常用工具类型的分类整理

一、基础操作类型

Partial<T>

  • 作用: 将所有的属性变为可选
  • 定义: type Partial<T> = { [P in keyof T]?: T[P] }
  • 示例:
    interface User = { name:string; age:number; sex?:string }
    type PartialUser = Partial<User> //=> { name?:string; age?:number; sex?:string; }
    

Required<T>

  • 作用: 将所有的属性变为必填
  • 定义: type Required<T> = { [P in keyof T]-?: T[P] };
  • 示例:
interface User = { sex?:string }
type requiredUser = Required<User> //=> { sex: string; }

Readonly<T>

  • 作用: 将所有的属性变为只读
  • 定义: type Readonly<T> = { readonly [P in keyof T]: T[P] };
  • 示例:
interface User = { name:string }
type readonlyUser = Readonly<User> //=> { readonly name: string; }

Record<K,T>

  • 作用: 创建一个对象类型,其键为 K,值为 T。
  • 定义:type Record<K extends keyof any, T> = { [P in K]: T };
  • 示例:
type UserMap = Record<"id" | "name", string>; //=>{ id: string; name: string; }

二、函数操作

Parameters<T>

  • 作用: 提取函数类型 T 参数组成一个元组
  • 示例:
type Fun = (id: string, name: string) => string
type FunParams=Parameters<Fun> //=> [id: string, name: string]

ReturnType<T>

  • 作用: 提取函数类型 T 的返回值类型
  • 示例:
type Fun = (id: string, name: string) => string
string | null

constructorParameters<T>

  • 作用: 提取构造函数类型 T 的参数类型组成的元组
  • 示例:
class User {
    id: string
    name: string

    constructor(id: string, name: string) {
        this.id = id
        this.name = name
    }

}

type constructorParamTypes = ConstructorParameters<typeof User> //=> [id: string, name: string]

InstanceType<T>

  • 作用: 提取构造函数类型 T 的实例类型
  • 示例:
class User {
    id: string
    name: string
}

type Instance = InstanceType<typeof User> //=> User

三、联合类型操作

Exclude<T,U>

  • 作用: 从 T 中排除所有可分配给 U 的联合成员来构造一个类型
  • 示例:
type T = "a" | "b" | "c";

type T1 = Exclude<T, 'a' | 'c'> // => "b"

Extract<T,U>

  • 作用: 从 T 中提取所有可分配给 U 的联合成员来构造一个类型
  • 示例:
type T = "a" | "b" | "c";

type T2 = Extract<T, 'a' | 'c'> // => "a" | "c"

NonNullable<T>

  • 作用: 从 T 中排除 null 和 undefined 来构造一个类型。
  • 示例:
type T = "a" | "null" | "undefined";

type T1 = NonNullable<T, 'a' | 'c'> // => "a"

四、对象操作类

Pick<T,K>

  • 作用: 从 T 中提取指定属性 K 来构造一个类型。
  • 示例:
interface User {
    id: string;
    name: string;
    age: number
}

type User2 = Pick<User, 'age' | 'name'> // => { age: number; name: string; }

Omit<T,K>

  • 作用: 从 T 中排除指定属性 K(字符串字面或字符串字面的并集)来构造一个类型。
  • 示例:
interface User {
    id: string;
    name: string;
    age: number
}

type User1 = Omit<User, 'age' | 'name'> // => { id:string }

五、字符串操作类

Uppercase<S>

  • 作用: 将字符类型 S 转换为大写。
  • 示例:
type name = 'Li Hua'

type name2 = Uppercase<name> //=>LI HUA

Lowercase<S>

  • 作用: 将字符类型 S 转换为小写。
  • 示例:
type name = 'Li Hua'

type name2 = Lowercase<name> //=>li hua

Capitalize<S>

  • 作用: 将字符类型 S 首字母转换为大写。
  • 示例:
type name = 'li hua'

type name2 = Capitalize<name> //=>Li hua

Uncapitalize<S>

  • 作用: 将字符类型 S 首字母转换为小写。
  • 示例:
type name = 'Li hua'

type name2 = Uncapitalize<name> //=>li hua

六、其他工具类型

Awaited<T>

  • 作用: 递归展开 Promise 的返回值来构造一个类型
  • 示例:
type Ts = Awaited<Promise<Promise<string | number> | null>>; //=> string | number | null

ThisParameterType<T>

  • 作用: 提取函数类型 T 的 this 参数类型
  • 示例:
function fn(this: { name: string }) { }
type ThisTypes = ThisParameterType<typeof fn>; // => { name: string }