超实用TS提升开发效率的常用内置工具类

常用内置工具类

Omit 省略/排除

  • Omit是一个泛型类型,用于从一个给定的类型中排除某些属性,返回一个新的类型。它接收两个参数,第一个参数是需要omit操作的类型,第二个参数是需要排除的属性的名称或联合类型

  • 案例如下:

ts 复制代码
interface IUser {
  readonly name: string;
  age: number;
  sex: 0 | 1;
  address: string;
}
// 排除age、sex
type Person = Omit<IUser, "age" | "sex">;

let obj: Person = {
  name: "vhen",
  address: "上海",
};
  • Person 只有name与address属性了
  • Omit源码
ts 复制代码
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

Pick 选择

  • Pick是在已经定义的对象中选取所需属性

  • pick<T,keys>:从Type中选择一系列属性来构造新类型,属性来源于keys

  • pick两个类型变量:

    • T:表示选择谁的属性`
    • keys:表示选择哪几个属性(传入属性名,只能是第一个 类型变量中存在的属性)
  • 案例如下:

ts 复制代码
interface IUser {
  readonly name: string;
  age: number;
  sex: 0 | 1;
  address: string;
}
// 选取了age与sex属性
type Person = Pick<IUser, "age" | "sex">;

const obj: Person = {
  age: 18,
  sex: 0,
};
  • Person 只有age与sex属性了

  • Pick源码

ts 复制代码
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Partial 可选项

  • Partial 已有的对象(必选+可选项)属性全部转化为可选属性

  • 案例如下:

ts 复制代码
interface IUser {
  readonly name: string;
  age: number;
  sex: 0 | 1;
  address: string;
}

type Person = Partial<IUser>;

const obj: Person = {
  age: 18,
};
  • Person 属性都转化为带?的可选属性
  • Partial 源码
ts 复制代码
type Partial<T> = { 
    [P in keyof T]?: T[P]; 
};

Required 必选项

  • RequiredPartial正好相反,已有的对象(必选+可选项)属性全部转化为必选属性

  • 案例如下:

ts 复制代码
interface IUser {
  readonly name?: string;
  age?: number;
  sex?: 0 | 1;
  address: string;
}

type Person = Required<IUser>;

const obj: Person = {
  name: "vhen",
  age: 18,
  address: "beijing",
  sex: 1,
};
  • Person属性全部转化为不带?必选属性
  • Required源码
ts 复制代码
type Required<T> = { 
    [P in keyof T]-?: T[P]; 
};

Readonly 只读

  • Readonly 已有的对象全部转化为带Readonly只读属性

  • 案例如下:

ts 复制代码
interface IUser {
  readonly name?: string;
  age?: number;
  sex: 0 | 1;
  address: string;
}

type Person = Readonly<IUser>;

// obj 所有属性不能修改,只能读取了
const obj: Person = {
  name: "vhen",
  age: 18,
  address: "beijing",
  sex: 1,
};
  • Person属性全部转化为带Readonly只读属性
  • Readonly源码
ts 复制代码
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

Exclude 排除/不包括

  • Exclude <T,U> T属性排除U中已有的属性

  • 案例如下:

ts 复制代码
type A = string | number | boolean;
type B = number | boolean;
type Person = Exclude<A, B>;

let test: Person = 'vhen';
  • Person 只剩下string
  • Exclude源码
ts 复制代码
type Exclude<T, U> = T extends U ? never : T;

Extract 提取/包括

  • Extract <T, U>Exclude正好相反,提取T与U相同的属性

  • 案例如下:

ts 复制代码
type A = string | number | boolean | null;
type B = number | string;
type Person = Extract<A, B>;

let test: Person = "vhen";
  • Person 属性为 string、number
  • Extract 源码
ts 复制代码
type Extract<T, U> = T extends U ? T : never

ReturnType 函数的类型推导

  • ReturnType 获取函数返回值的类型

  • 案例如下:

ts 复制代码
function getUser() {
  return {
    name: "vhen",
    age: 18,
    address: "北京",
  };
}
type ReturnUser = ReturnType<typeof getUser>;推导出了getUser函数的返回类型
  • ReturnUser 推导出类型如下

  • ReturnType源码

ts 复制代码
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

NonNullable 类型中排除 nullundefined

- NonNullable从泛型 T 中排除掉 null 和 undefined

  • 案例如下:
ts 复制代码
type A = string | number | null | undefined;
type B = NonNullable<A>;
let test: B = "vhen";
  • B 去除了null、undefined
  • NonNullable 源码
ts 复制代码
type NonNullable<T> = T & {}; 
相关推荐
meilindehuzi_a5 分钟前
LangChain.js 对话 Memory 实战:History 持久化、截断与摘要压缩
java·javascript·langchain
江畔柳前堤22 分钟前
具身智能全景深度指南(2026年9月版):从“会聊天的AI“到“能干活的机器“
大数据·javascript·图像处理·人工智能·分布式·智慧城市·原型模式
️学习的小王25 分钟前
Windows Claude Code 接入 Playwright‑MCP,调用本机Edge浏览器(避坑完整教程)
前端·windows·edge
liuyicenysabel30 分钟前
Grafana + Prometheus 分级告警配置设计(P0/P1/P2)
javascript·grafana·prometheus
律宏阔32 分钟前
CloakBrowser 开发踩坑笔记
前端·浏览器
Made in Haven71237 分钟前
HTML课程笔记补2
前端·笔记·html
Cry丶1 小时前
Vue 3 业务管理页面实战:组件拆分、父子通信与弹窗复用
前端·javascript·vue.js·父子通信·组件拆分·弹窗复用
雪芽蓝域zzs1 小时前
Vue前端配置路由通配捕获 404
前端·javascript·vue.js
计算机魔术师1 小时前
Anthropic 发布电商 Agent 架构与生产实践指南,并开源 commerce-agents 参考实现
前端
IMPYLH1 小时前
HTML 的 <ol> 元素
前端·html