ts类型工具

TypeScript 提供了一套强大的内置工具类型(Utility Types),用于从已有类型中派生出新类型,从而提升代码的健壮性、可维护性和开发效率。这些工具类型就像"类型世界的高阶函数",能对类型进行组合、裁剪、转换等操作。


🧰 常用 TypeScript 工具类型速查表

分类 工具类型 作用
基础修饰 Partial<T> 将 T 的所有属性变为可选
Required<T> 将 T 的所有属性变为必填 (移除 ?)
Readonly<T> 将 T 的所有属性变为只读
结构挑选 Pick<T, K> 从 T 中选取 指定键 K 的属性
Omit<T, K> 从 T 中剔除 指定键 K 的属性
Record<K, T> 构造一个键为 K、值为 T 的对象类型
类型过滤 Exclude<T, U> 从联合类型 T 中排除 可赋值给 U 的类型
Extract<T, U> 从联合类型 T 中提取 可赋值给 U 的类型
NonNullable<T> 从 T 中移除 null 和 undefined
函数相关 ReturnType<T> 获取函数 T 的返回值类型
Parameters<T> 获取函数 T 的参数类型元组
ConstructorParameters<T> 获取构造函数的参数类型
InstanceType<T> 获取构造函数的实例类型
ThisParameterType<T> / OmitThisParameter<T> 处理函数中的 this 参数

🔍 典型示例与应用场景

1. Partial<T>:局部更新

ts 复制代码
interface User {
  id: number;
  name: string;
  email: string;
}

// 所有字段变为可选
type UpdateUser = Partial<User>;

function updateUser(id: number, changes: UpdateUser) {
  // 只需传入要修改的字段
}
updateUser(1, { name: "Alice" }); // ✅

2. Pick<T, K> / Omit<T, K>:按需选择或排除字段

ts 复制代码
type UserPreview = Pick<User, 'id' | 'name'>; // { id: number; name: string }
type UserWithoutId = Omit<User, 'id'>;        // { name: string; email: string }

3. Record<K, T>:构建配置对象

ts 复制代码
type Theme = 'light' | 'dark';
type ColorMap = Record<Theme, string>; // { light: string; dark: string }

4. ReturnType<T>:推导函数返回类型

ts 复制代码
function fetchUser() {
  return { id: 1, name: "Bob" };
}

type User = ReturnType<typeof fetchUser>; // { id: number; name: string }

5. Exclude<T, U> / Extract<T, U>

ts 复制代码
type Status = 'loading' | 'success' | 'error';
type ValidStatus = Exclude<Status, 'loading'>; // 'success' | 'error'
type LoadingOnly = Extract<Status, 'loading'>; // 'loading'

💡 小贴士

  • 这些工具类型基于 映射类型(Mapped Types) 、条件类型(Conditional Types) 和 infer 等高级特性实现。

  • 它们是不可变的:不会修改原始类型,而是生成一个新类型。

  • 可组合使用 ,例如:

    ts 复制代码
    type SafeUser = Readonly<Partial<User>>;

如需深入某个工具类型的源码实现或更多实战案例,可以告诉我具体类型(如 Omit 或 ReturnType),我可以进一步详解!

相关推荐
theMuseCatcher21 小时前
Vue3导航菜单(Menu)
typescript·vue3·less
theMuseCatcher2 天前
Vue3评论(Comment)
typescript·vue3
afumu2 天前
把五个网页版 AI 拉进同一个群聊:不用 API key 的多 Agent 编排
人工智能·chrome·typescript
孟陬4 天前
Foobar 技术周刊#160:大模型让大规模形式化软件验证成为现实丨AI写C++代码之后会发生什么?丨我们真的需要alpha() 函数吗丨重试,有时会让故障更
前端·后端·typescript
螺丝钉tina5 天前
[Playwright ][16]Playwright + TypeScript API 自动化测试实战:API测试
前端·javascript·typescript
华玥作者5 天前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
Momo__6 天前
你写的 import 重试,从来没生效过
前端·javascript·typescript
长不大的杨瑞杰7 天前
OpenCode v2 Custom Tools 实战:开发数据库、工单与发布工具
人工智能·typescript·开发工具·opencode·custom tools
shmily麻瓜小菜鸡7 天前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript
腾科IT教育7 天前
TypeScript 泛型(Generics):类型占位符实现复用与安全
安全·typescript·泛型