7个高效的TypeScript工具类型，你会用了吗？

前端达人2024-06-22 22:20

在现代Web开发中，TypeScript几乎已经成为默认技术。TypeScript本身就提供了描述代码的方法，但工具类型（Utility Types）就像给你代码加上了"超能力"！

这些工具类型能让你的代码更清晰、更简洁，同时还能减少隐藏错误的可能性。今天我们就来聊聊TypeScript中的七个高效工具类型：keyof、ReturnType、Awaited、Record、Partial、Required 和 Omit。通过实例讲解，让你轻松掌握这些强大的工具类型。

1. keyof 操作符

keyof 操作符用于获取对象的键。例如，如果你有一个表示用户的类型，并且你想创建一个只接受该用户接口键的函数。通过这种方式，你可以确保函数的参数始终是有效的。

typescript 复制代码 
type User = {
  id: number;
  name: string;
  email: string;
}

// 接受 User 接口的键的函数
function getUserProperty(key: keyof User): string {
  const user: User = {
    id: 1,
    name: 'Mr Smith',
    email: 'mrsmith@example.com',
  };

  // 假设每个属性都可以转换为字符串
  return String(user[key]);
}

// 有效的用法
const userName = getUserProperty('name'); // 可以，'name' 是 User 的一个键
console.log(userName);

// 错误: 类型 '"country"' 的参数不能赋给类型 'keyof User' 的参数。
// const userCountry = getUserProperty('country');

在上面的例子中，我们定义了一个 User 类型，并且创建了一个 getUserProperty 函数，该函数只接受 User 类型的键作为参数。通过使用 keyof User，我们确保了传递给函数的参数必须是 User 类型的有效键。如果你尝试传递一个不存在的键，比如 'country'，TypeScript 会在编译时就抛出错误，从而帮助你避免运行时错误。

这样做的好处是可以让你的代码更健壮，并且在重构代码时可以得到更好的类型检查支持。

2. ReturnType 类型

ReturnType 类型用于获取函数的返回类型。

假设我们有一个函数，用于加载应用程序的配置。这个函数返回一个包含各种配置设置的对象。

我们希望编写另一个函数，该函数需要安全地使用这些配置数据，并依赖于配置对象的结构，而不需要手动重复定义其类型。

javascript 复制代码 
// 示例：定义一个返回配置对象的函数
function loadAppConfig() {
  return {
    apiUrl: 'https://api.example.com',
    retryAttempts: 5,
    debugMode: false
  };
}

// 使用 ReturnType 推断 loadAppConfig 函数返回的配置对象的类型
type AppConfig = ReturnType<typeof loadAppConfig>;

// AppConfig 现在代表我们的配置对象类型，我们可以在应用程序的其他部分安全地使用该类型
function setupApi(config: AppConfig) {
  console.log(`API URL: ${config.apiUrl}`);
  console.log(`重试次数: ${config.retryAttempts}`);
  console.log(`调试模式: ${config.debugMode ? '启用' : '禁用'}`);
}

const config = loadAppConfig();
setupApi(config);

在这个例子中，我们定义了一个 loadAppConfig 函数，该函数返回一个包含 API 配置详情的对象。通过使用 ReturnType，我们自动推断出 loadAppConfig 返回的对象类型，并将其命名为 AppConfig。这样，我们就可以在其他函数中安全地使用 AppConfig 类型，而无需手动重复定义配置对象的类型。

这种方法的好处是，在我们修改 loadAppConfig 函数的返回类型时，相关的类型定义会自动更新，减少了手动同步类型定义的工作量，并且可以在编译时进行类型检查，提高代码的健壮性和可维护性。

3. Awaited 类型

Awaited 类型用于获取等待一个 Promise 解析后的结果类型。考虑以下场景，我们向 JSONPlaceholder API 发送一个简单的 fetch 请求以获取一个特定的 todo 项目：

javascript 复制代码 
async function fetchTodoItem() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  if (!response.ok) {
    throw new Error('Failed to fetch the todo item');
  }
  return await response.json();
}

在不使用 Awaited 的情况下，fetchTodoItem 的推断返回类型是 Promise<any>，因为 TypeScript 无法从 fetch 中推断响应 JSON 的结构。这时 Awaited 类型的好处就显现出来了，我们可以手动指定获取数据的预期结构：

typescript 复制代码 
// API 返回的 todo 项目的预期结构
type TodoItem = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

// 在异步上下文中直接使用 `fetchTodoItem` 函数
async function displayTodoItem() {
  const todo: Awaited<TodoItem> = await fetchTodoItem();
  // 现在你可以在完全类型支持下使用 `todo`
  console.log(`Todo Item: ${todo.id}, Title: ${todo.title}, Completed: ${todo.completed}`);
}

displayTodoItem();

在这个例子中，我们定义了 TodoItem 类型来描述 API 返回的 todo 项目的结构。使用 Awaited<TodoItem>，我们可以确保 todo 变量在 fetchTodoItem 函数返回后具有正确的类型支持。

这种方法的真正好处在于，当 TypeScript 不能自动推断类型时，或者当你处理的类型是条件类型或类似 Promise 的类型但不完全是 Promise 时，Awaited 能让你的代码更健壮、更易维护。在这个例子中，我们通过明确指定返回数据的结构，避免了类型推断的不确定性，从而提高了代码的可靠性。

4. Record 类型

Record<Keys, Type> 是 TypeScript 中的一个工具类型，用于创建具有特定键和统一值类型的对象类型。它特别适合在你希望确保对象具有一组特定的键，并且每个键对应的值都是某种特定类型时使用。

想象一下，你在实现一个基于角色的访问控制（RBAC）系统。每个用户角色都有一组权限，决定了用户可以执行的操作。在这种情况下，Record<Keys, Type> 可以用来定义角色和权限的类型，从而确保整个应用程序的类型安全。

typescript 复制代码 
// 定义一组角色
type UserRole = 'admin' | 'editor' | 'viewer';

// 定义权限为结构化对象
type Permission = {
  canCreate: boolean;
  canRead: boolean;
  canUpdate: boolean;
  canDelete: boolean;
};

// 将每个用户角色映射到其权限
const rolePermissions: Record<UserRole, Permission> = {
  admin: {
    canCreate: true,
    canRead: true,
    canUpdate: true,
    canDelete: true,
  },
  editor: {
    canCreate: true,
    canRead: true,
    canUpdate: true,
    canDelete: false, // 编辑者不能删除
  },
  viewer: {
    canCreate: false,
    canRead: true,
    canUpdate: false,
    canDelete: false, // 观众只能读取
  },
};

// 检查用户角色是否有权限执行某个操作的函数
function hasPermission(role: UserRole, action: keyof Permission): boolean {
  const permissions = rolePermissions[role];
  return permissions[action];
}

// 使用 hasPermission 的示例
console.log(hasPermission('admin', 'canCreate')); // true
console.log(hasPermission('editor', 'canUpdate')); // true
console.log(hasPermission('viewer', 'canDelete')); // false
console.log(hasPermission('editor', 'canDelete')); // false

在这个例子中，我们定义了 UserRole 类型来表示不同的用户角色，并定义了 Permission 类型来表示每个角色的权限。通过使用 Record<UserRole, Permission>，我们确保每个用户角色都有一组完整的权限，并且这些权限的结构是统一的。

这种使用方法的好处是，你不能意外地漏掉某个角色的权限定义，也不能错误地定义权限的结构。通过 Record 类型，我们能够在编译时获得类型检查的支持，从而提高代码的可靠性和可维护性。这不仅能帮助你避免运行时错误，还能让你在开发过程中更有信心地修改和扩展代码。

5. Partial 类型

Partial 类型用于将对象的所有属性变为可选。举个例子，如果你有一个包含多个属性的接口，你可以使用 Partial<interface> 来创建一个所有属性都是可选的类型。

go 复制代码 
type Todo = {
  title: string;
  description: string;
}

const partialTodo: Partial<Todo> = {}; 
// partialTodo 可以拥有 Todo 的任意属性，也可以没有任何属性

实际应用场景

假设我们在开发一个待办事项（Todo）应用。在这个应用中，我们有一个 Todo 接口，用于描述待办事项的结构。然而，在某些情况下，我们可能只需要更新待办事项的一部分属性，而不是全部。这时候，Partial 类型就派上用场了。

typescript 复制代码 
type Todo = {
  title: string;
  description: string;
}

// 更新待办事项的函数
function updateTodo(id: number, updatedFields: Partial<Todo>) {
  // 假设我们有一个 todos 数组存储所有的待办事项
  const todos: Todo[] = [
    { title: 'Learn TypeScript', description: 'Understand basic types' },
    { title: 'Write Blog Post', description: 'Draft a new article' }
  ];

  const todo = todos.find(todo => todo.id === id);
  if (todo) {
    Object.assign(todo, updatedFields);
  }
}

// 更新一个待办事项，只修改它的 description 属性
updateTodo(1, { description: 'Understand advanced types' });

在这个例子中，我们定义了一个 updateTodo 函数，该函数接受待办事项的 id 和一个 updatedFields 对象。updatedFields 的类型是 Partial<Todo>，这意味着它可以包含 Todo 的任意属性，也可以不包含任何属性。这样我们就可以只更新待办事项的一部分属性，而不必提供完整的 Todo 对象。

使用 Partial 类型的好处是显而易见的。它使我们的代码更加灵活和可扩展，尤其是在处理需要部分更新的场景时。通过将所有属性变为可选，我们可以更方便地进行增量更新，同时也减少了代码的冗余和重复。

6. Required 类型

Required 类型与 Partial 类型相反，它用于将对象的所有属性变为必选。举个例子，如果你有一个包含多个属性的接口，你可以使用 Required<interface> 来创建一个所有属性都是必选的类型。

go 复制代码 
type Todo = {
  title: string;
  description: string;
}

// requiredTodo 必须包含 Todo 的所有属性
const wrongRequiredTodo: Required<Todo> = { title: 'Hello' }; // 错误，没有 description 属性

const correctRequiredTodo: Required<Todo> = { title: 'Hello', description: 'World' }; // 正确

实际应用场景

假设我们在开发一个待办事项（Todo）应用，在某些场景下，我们希望确保某些操作只能在待办事项的所有属性都已提供的情况下进行。这时，我们可以使用 Required 类型来确保所有属性都是必选的。

ini 复制代码 
type Todo = {
  title?: string;
  description?: string;
}

// 创建一个新待办事项的函数
function createTodo(todo: Required<Todo>) {
  // 假设我们有一个 todos 数组存储所有的待办事项
  const todos: Todo[] = [];

  todos.push(todo);
}

// 尝试创建一个不完整的待办事项
const incompleteTodo = { title: 'Incomplete' };
createTodo(incompleteTodo); // 错误，description 属性是必需的

// 创建一个完整的待办事项
const completeTodo = { title: 'Complete', description: 'This is a complete todo' };
createTodo(completeTodo); // 正确

在这个例子中，我们定义了一个 createTodo 函数，该函数接受一个 Required<Todo> 类型的参数。这意味着传递给 createTodo 的对象必须包含 Todo 类型的所有属性。如果我们尝试传递一个缺少某些属性的对象，TypeScript 会在编译时抛出错误，从而帮助我们避免在运行时出现问题。

使用 Required 类型的好处在于，它可以确保我们的代码在处理需要所有属性的对象时，始终具有完整性和一致性。这不仅提高了代码的可靠性，还减少了由于缺少必要属性而导致的潜在错误。通过在适当的场景中使用 Required 类型，我们可以使代码更健壮，更易于维护。

7. Omit 类型

Omit 类型用于从对象类型中移除某些属性。例如，如果你有一个包含多个属性的接口，你可以使用 Omit<interface, "property1" | "property2"> 来创建一个不包含指定属性的类型。

typescript 复制代码 
type Todo = {
  title: string;
  description: string;
  createdAt: Date;
}

const todoWithoutCreatedAt: Omit<Todo, "createdAt"> = { title: "Hello", description: "World" }; 
// todoWithoutCreatedAt 不包含 createdAt 属性

实际应用场景

假设我们在开发一个待办事项（Todo）应用，我们有一个 Todo 接口，其中包含创建时间 createdAt 属性。在某些场景下，比如我们只需要展示待办事项的标题和描述，而不需要显示创建时间。此时，我们可以使用 Omit 类型来移除不必要的属性。

typescript 复制代码 
type Todo = {
  title: string;
  description: string;
  createdAt: Date;
}

// 移除 createdAt 属性
type TodoWithoutCreatedAt = Omit<Todo, "createdAt">;

// 模拟一个显示待办事项的函数
function displayTodo(todo: TodoWithoutCreatedAt) {
  console.log(`Title: ${todo.title}`);
  console.log(`Description: ${todo.description}`);
}

// 创建一个不包含 createdAt 属性的待办事项
const todo = { title: "Learn TypeScript", description: "Understand utility types" };
displayTodo(todo);

在这个例子中，我们定义了一个 TodoWithoutCreatedAt 类型，通过 Omit<Todo, "createdAt"> 移除了 createdAt 属性。这样，我们就可以在 displayTodo 函数中使用这个新类型，只处理 title 和 description 属性，而不需要担心 createdAt 属性的存在。

使用 Omit 类型的好处在于，它可以帮助我们创建更简洁和专注的类型，避免处理不必要的属性。这不仅使我们的代码更加清晰和易于维护，还减少了在不同场景中重复定义类型的工作量。通过在适当的场景中使用 Omit 类型，我们可以提高代码的灵活性和可读性。

结束

通过这篇文章，我们详细介绍了 TypeScript 中的七个高效工具类型：keyof、ReturnType、Awaited、Record、Partial、Required 和 Omit。这些工具类型就像给你的代码加上了"超能力"，让你的代码更清晰、更简洁，并减少了潜在的错误。

无论你是刚接触 TypeScript 的新手，还是已经有一定经验的开发者，掌握这些工具类型都能极大地提升你的编码效率和代码质量。希望这篇文章能帮助你更好地理解和使用 TypeScript，让你的开发之路更加顺畅。

如果你喜欢这篇文章，或者有任何问题和建议，欢迎在评论区留言与我互动！别忘了关注我的公众号「前端达人」，获取更多前端开发的干货和技巧。期待与你一起成长，一起进步！

让我们在前端的世界里不断探索，共同进步！感谢你的阅读，我们下次再见！

相关推荐
清秋23 分钟前
全网最全 ECMAScript 攻略（ 更新至 ES2026）
前端·javascript·编程语言
Cao_Ron40 分钟前
用 SVG image symbol 画 ECharts graph 圆形节点
前端
hxy060144 分钟前
React-Call让你的React组件像异步函数一样调用
前端·react.js
Hilaku1 小时前
为什么 AI 写前端时，总是优先选择 React，而不是 Vue？
前端·javascript·程序员
京东云开发者1 小时前
GPT-5.6、ChatGPT Work 与 Codex 更新食用指南
前端
Cao_Ron1 小时前
用 ECharts graph 画出卡片式矩形节点
前端
skiyee1 小时前
换个底座的 Wot Starter 居然让 AI 更懂项目！
前端·ai编程
anyup1 小时前
这一套绝了！AI 大模型写故事，星云 SDK 驱动 3D 数字人实时演绎
前端·人工智能·aigc
耀耀切克闹灬2 小时前
短链跳转
前端
孟陬2 小时前
高质量全方位的 AI 工具 sse-stuntman — Mock SSE 接口
前端·node.js·openai
热门推荐
01GitHub 镜像站点02AI科技热点日报 | 2026年07月01日03幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片05GPT-5.5 对比 GPT-5.6 Sol、Terra、Luna：官方性能数据与选型分析062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？072026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路102026 年 AI 大模型 & AI 编程工具实战全总结