TypeScript 中的 Omit 工具类型：简介与实用技巧-CSDN博客

本文链接：https://blog.csdn.net/y158392613/article/details/148378603

前言

在 TypeScript 开发中，我们经常需要基于现有类型创建新的类型。有时，我们希望新类型继承原类型的大部分属性，但排除掉其中一小部分。Omit<Type, Keys> 工具类型正是为此而生，它提供了一种简洁、类型安全的方式来实现这一需求。本文将带你了解 Omit 的基本用法和一些实用技巧。

什么是 Omit？

Omit<Type, Keys> 是 TypeScript 内置的一个工具类型，它的作用是构造一个新类型，该类型拥有 Type 的所有属性，但排除了 Keys 中指定的属性。这里的 Keys 通常是一个字符串字面量，或者是字符串字面量的联合类型。

基本语法

type NewType = Omit<OriginalType, 'propToExclude1' | 'propToExclude2'>;

简单示例

假设我们有一个 User 接口：

interface User {
  id: number;
  name: string;
  email: string;
  isAdmin: boolean;
  createdAt: Date;
}

如果我们想创建一个不包含 email 和 isAdmin 属性的 UserProfile 类型，可以这样做：

type UserProfile = Omit<User, 'email' | 'isAdmin'>;

// 此时，UserProfile 类型等同于：
// {
//   id: number;
//   name: string;
//   createdAt: Date;
// }

const userProfile: UserProfile = {
  id: 1,
  name: 'Alice',
  createdAt: new Date(),
};
// userProfile.email; // 类型错误：属性“email”在类型“UserProfile”上不存在。

Omit 的实用技巧

1. 创建用于数据提交的类型

在创建或更新实体时，某些字段（如 id、createdAt、updatedAt 等）通常是由后端生成或管理的，前端提交数据时不需要包含它们。Omit 可以帮助我们方便地从完整的实体类型中派生出用于提交的载荷（Payload）类型。

interface Article {
  id: string;
  title: string;
  content: string;
  authorId: number;
  views: number;
  createdAt: Date;
  updatedAt: Date;
}

// 创建文章时，不需要提交 id, views, createdAt, updatedAt
type CreateArticlePayload = Omit<Article, 'id' | 'views' | 'createdAt' | 'updatedAt'>;

// CreateArticlePayload 类型为:
// {
//   title: string;
//   content: string;
//   authorId: number;
// }

function submitNewArticle(payload: CreateArticlePayload) {
  // ...提交逻辑
  console.log(payload.title);
}

submitNewArticle({
  title: 'Understanding Omit in TypeScript',
  content: 'Omit is a powerful utility type...',
  authorId: 101,
});

2. 隐藏敏感或不必要的信息

interface UserAccount {
  userId: string;
  username: string;
  email: string;
  passwordHash: string; // 敏感信息
  internalFlags: string; // 内部信息
  isActive: boolean;
}

// 定义一个公开的用户信息类型，不包含 passwordHash 和 internalFlags
type PublicUserInfo = Omit<UserAccount, 'passwordHash' | 'internalFlags'>;

// PublicUserInfo 类型为:
// {
//   userId: string;
//   username: string;
//   email: string;
//   isActive: boolean;
// }

function getUserInfoForClient(account: UserAccount): PublicUserInfo {
  // 实际实现中，你可能需要手动挑选属性或使用库
  // 但类型定义确保了返回对象的结构是正确的
  return {
    userId: account.userId,
    username: account.username,
    email: account.email,
    isActive: account.isActive,
  };
}

3. 确保属性名准确无误

Omit 的第二个参数 Keys 必须是 keyof Type 的子集。这意味着如果你尝试排除一个在原始类型中不存在的属性名，TypeScript 编译器会报错。这有助于在编译阶段就发现属性名的拼写错误。

interface Product {
  sku: string;
  name: string;
  price: number;
  description: string;
}

// 尝试 Omit 一个不存在的属性 'descripton' (拼写错误)
// type ProductSummary = Omit<Product, 'descripton' | 'sku'>;
// TypeScript 编译器会报错:
// Type '"descripton"' does not satisfy the constraint 'keyof Product'.

// 正确的写法
type ProductSummary = Omit<Product, 'description' | 'sku'>;
// ProductSummary 类型为:
// {
//   name: string;
//   price: number;
// }

4. 与其他工具类型结合

Omit 可以与其他 TypeScript 工具类型（如 Partial, Readonly）结合使用，创建更复杂的类型转换。

interface Config {
  readonly id: string;
  apiKey: string;
  timeout: number;
  debugMode: boolean;
}

// 假设我们想创建一个可修改部分配置的类型，但不允许修改 id，并且 debugMode 是可选的
// 1. 先 Omit掉 id
type ConfigWithoutId = Omit<Config, 'id'>;
// ConfigWithoutId = { apiKey: string; timeout: number; debugMode: boolean; }

// 2. 再将 debugMode 设为可选
type UpdateConfigPayload = Partial<Pick<ConfigWithoutId, 'debugMode'>> & Omit<ConfigWithoutId, 'debugMode'>;
// 或者更简洁地，如果目标是让部分属性可选，同时排除其他属性：
type ModifiableConfig = Omit<Partial<Config>, 'id'>;
// ModifiableConfig = { apiKey?: string; timeout?: number; debugMode?: boolean; }
// 注意：这种组合方式需要仔细考虑最终生成的类型结构是否符合预期。

// 一个更常见的组合：创建一个类型，其中某些属性被省略，其余属性变为可选
type OptionalEditableUser = Partial<Omit<User, 'id' | 'createdAt'>>;
// OptionalEditableUser 类型为:
// {
//   name?: string;
//   email?: string;
//   isAdmin?: boolean;
// }