Omit trong TypeScript: bỏ thuộc tính khỏi kiểu (ví dụ)

Omit<T, K> là một utility type có sẵn, tạo ra kiểu object có mọi thuộc tính của T trừ các khóa được liệt kê trong K. Cách dùng điển hình: một kiểu User có password, và một phiên bản công khai không có nó.

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

type PublicUser = Omit<User, "password">;
// { id: number; name: string; email: string }

function toPublic(user: User): PublicUser {
  const { password, ...rest } = user; // really remove it from the object
  return rest;
}

const ada: User = { id: 1, name: "Ada", email: "ada@example.com", password: "s3cret" };
console.log(toPublic(ada)); // { id: 1, name: 'Ada', email: 'ada@example.com' }

PublicUser luôn đồng bộ với User: thêm một trường vào User thì nó cũng xuất hiện trong PublicUser, còn password vẫn bị loại ra. Omit chỉ tác động lên kiểu; chính phép destructuring trong toPublic mới xóa thuộc tính khỏi object thật.

Bỏ nhiều khóa

Đối số thứ hai là một union, nên bạn liệt kê bao nhiêu khóa tùy ý bằng |:

interface Post {
  id: number;
  title: string;
  body: string;
  createdAt: string;
  updatedAt: string;
}

// What a client sends to create a post: the server fills in the rest
type NewPost = Omit<Post, "id" | "createdAt" | "updatedAt">;

function createPost(input: NewPost, id: number): Post {
  const now = "2024-03-15T10:30:00.000Z";
  return { ...input, id, createdAt: now, updatedAt: now };
}

const post = createPost({ title: "Hello", body: "First post" }, 7);
console.log(post.id, post.title, post.createdAt); // 7 Hello 2024-03-15T10:30:00.000Z
// createPost({ title: "x", body: "y", id: 1 }, 7) would be error TS2353:
// Object literal may only specify known properties, and 'id' does not exist in type 'NewPost'.

"Kiểu không có các trường do máy chủ tạo ra" là cách dùng Omit phổ biến nhất trong code thực tế: một kiểu model duy nhất, với Omit suy ra cấu trúc đầu vào cho form tạo mới và request API.

Omit được định nghĩa thế nào

Omit được xây từ hai utility type khác:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

Đọc từ trong ra ngoài: keyof T là union của mọi khóa, Exclude<keyof T, K> loại các khóa không mong muốn khỏi union đó, và Pick giữ lại các khóa còn lại. Vậy Omit<User, "password"> chính là Pick<User, "id" | "name" | "email">. Vì Pick ánh xạ qua các khóa của T, các modifier readonly và ? trên những thuộc tính còn lại vẫn được giữ.

Hãy để ý ràng buộc: K extends keyof any, không phải K extends keyof T. Chi tiết này là chủ đề của phần tiếp theo.

Omit không kiểm tra khóa có tồn tại hay không

keyof any là string | number | symbol, nên Omit nhận bất kỳ khóa nào, kể cả khóa mà T không có. Một lỗi gõ nhầm vẫn biên dịch và không loại bỏ gì:

interface User {
  id: number;
  name: string;
  password: string;
}

type PublicUser = Omit<User, "pasword">; // typo: nothing is omitted

function toPublic(user: User): PublicUser {
  return user; // compiles, because PublicUser still has password
}

console.log(JSON.stringify(toPublic({ id: 1, name: "Ada", password: "s3cret" })));
// {"id":1,"name":"Ada","password":"s3cret"}

Không có lỗi nào cả, và mật khẩu bị gửi ra ngoài trong JSON. Ràng buộc lỏng này được chọn có chủ ý khi Omit được thêm vào TypeScript 3.5. Lý do của nhóm phát triển: trong code generic, các khóa bị bỏ thường không đến từ T (một hàm gộp hai object có thể khai báo đối số rest là Omit<T1, keyof T2>), Exclude cũng không ràng buộc tham số thứ hai của nó, và một phiên bản có ràng buộc sẽ làm hỏng nhiều kiểu Omit tự viết mà các dự án đã có. Với code hằng ngày, một phiên bản chặt chẽ hơn sẽ bắt được lỗi gõ nhầm:

// This does not compile: StrictOmit only accepts real keys of User
type StrictOmit<T, K extends keyof T> = Omit<T, K>;

interface User {
  id: number;
  name: string;
  password: string;
}

type PublicUser = StrictOmit<User, "pasword">;
const u: PublicUser = { id: 1, name: "Ada" };
console.log(u);

index.ts(10,36): error TS2344: Type '"pasword"' does not satisfy the constraint 'keyof User'.
index.ts(11,7): error TS2741: Property 'password' is missing in type '{ id: number; name: string; }' but required in type 'PublicUser'.

Lỗi đầu tiên mới là lỗi quan trọng: khóa được kiểm tra với keyof User. Lỗi thứ hai là hệ quả, vì không có gì bị bỏ và PublicUser vẫn yêu cầu password. Sửa chính tả thành "password" là biên dịch được. Nhiều dự án định nghĩa nó một lần trong tệp kiểu dùng chung và dùng thay cho Omit.

Ghi đè kiểu của thuộc tính

Một interface không thể kế thừa interface khác rồi đổi một thuộc tính sang kiểu không tương thích: interface ApiUser extends User { id: string } thất bại với error TS2430: Interface 'ApiUser' incorrectly extends interface 'User'. Hãy bỏ thuộc tính đó trước, rồi khai báo lại:

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

// The JSON version: id is a string and dates are ISO strings
interface ApiUser extends Omit<User, "id" | "createdAt"> {
  id: string;
  createdAt: string;
}

function toApi(user: User): ApiUser {
  return { ...user, id: String(user.id), createdAt: user.createdAt.toISOString() };
}

const u: User = { id: 7, name: "Ada", createdAt: new Date("2024-03-15T10:30:00Z") };
console.log(toApi(u)); // { id: '7', name: 'Ada', createdAt: '2024-03-15T10:30:00.000Z' }

Với type alias, việc tương tự là một intersection: type ApiUser = Omit<User, "id"> & { id: string }. Nếu không có Omit, intersection User & { id: string } sẽ cho id kiểu number & string, tức là never.

Omit trên kiểu union

Omit không có tính phân phối. Trên một union, nó bắt đầu từ keyof của cả union, vốn chỉ chứa các khóa mà mọi thành phần đều có, nên thuộc tính riêng của từng thành phần biến mất:

// This does not compile: Omit collapsed the union into its shared keys
type Shape =
  | { kind: "circle"; radius: number; id: string }
  | { kind: "square"; size: number; id: string };

type NewShape = Omit<Shape, "id">;

const c: NewShape = { kind: "circle", radius: 2 };
console.log(c);

index.ts(8,39): error TS2353: Object literal may only specify known properties, and 'radius' does not exist in type 'NewShape'.

NewShape trở thành { kind: "circle" | "square" }. Để bỏ thuộc tính khỏi từng thành phần riêng, áp dụng Omit bên trong một conditional type có tính phân phối:

type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;

type Shape =
  | { kind: "circle"; radius: number; id: string }
  | { kind: "square"; size: number; id: string };

type NewShape = DistributiveOmit<Shape, "id">;
// Omit<circle, "id"> | Omit<square, "id">

function area(s: NewShape): number {
  return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.size ** 2; // narrowing works
}

console.log(area({ kind: "square", size: 3 }));            // 9
console.log(area({ kind: "circle", radius: 1 }).toFixed(2)); // 3.14

T extends unknown ? ... : never luôn đúng; nó chỉ có mặt để conditional type phân phối qua union. Trang conditional types giải thích vì sao cách này hoạt động. Hãy dùng DistributiveOmit mỗi khi kiểu bạn bỏ thuộc tính là một discriminated union.

Bỏ một thuộc tính lồng nhau

Omit chỉ xét các khóa ở cấp ngoài cùng, nên Omit<Settings, "editor.wordWrap"> không loại bỏ gì (và như đã thấy ở trên, cũng không báo lỗi). Để bỏ một thuộc tính ở cấp sâu hơn, hãy bỏ thuộc tính cha rồi thêm lại nó với Omit riêng:

interface Settings {
  theme: string;
  editor: { fontSize: number; tabSize: number; wordWrap: boolean };
}

type SettingsDraft = Omit<Settings, "editor"> & {
  editor: Omit<Settings["editor"], "wordWrap">;
};

const draft: SettingsDraft = { theme: "dark", editor: { fontSize: 14, tabSize: 2 } };
console.log(draft.editor); // { fontSize: 14, tabSize: 2 }
// Adding wordWrap: true to editor would be error TS2353

Settings["editor"] là một indexed access type: nó đặt tên cho kiểu object lồng bên trong để Omit có thể xử lý.

Xóa thuộc tính lúc chạy

Omit chỉ thay đổi kiểu. Để tạo ra object không có các thuộc tính đó, hãy loại chúng bằng destructuring, hoặc viết một hàm generic nhỏ có kiểu trả về là Omit:

function omit<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K> {
  const copy = { ...obj };
  for (const key of keys) delete copy[key];
  return copy;
}

const order = { id: 42, total: 99.5, cardNumber: "4111 1111", cvv: "123" };

const safe = omit(order, "cardNumber", "cvv"); // { id: number; total: number }
console.log(safe);        // { id: 42, total: 99.5 }
console.log(order.cvv);   // 123 (the original is untouched)
// safe.cvv would be error TS2339: Property 'cvv' does not exist on type ...

Hàm này ràng buộc K theo keyof T, nên khóa viết sai chính tả sẽ báo lỗi ngay tại chỗ gọi. Bản sao chỉ ở mức nông: các object lồng bên trong vẫn dùng chung với bản gốc.

So sánh Omit, Pick và Exclude

Chọn giữa Omit và Pick dựa trên điều bạn muốn xảy ra khi kiểu nguồn có thêm thuộc tính. Omit tự động đưa thuộc tính mới vào, hợp với trường hợp "mọi thứ trừ phần bí mật". Pick không bao giờ đưa chúng vào, hợp với trường hợp "đúng những trường này" và an toàn hơn cho mọi dữ liệu rời khỏi máy chủ của bạn. Pick kiểm tra khóa với keyof T; Omit thì không.