Exclude, Extract và NonNullable trong TypeScript

Exclude<T, U> loại bỏ thành viên khỏi một union type, Extract<T, U> chỉ giữ lại các thành viên khớp, còn NonNullable<T> loại bỏ null và undefined. Cả ba đều lọc union; chúng không đụng đến thuộc tính của đối tượng.

type Status = "draft" | "review" | "published" | "archived";

type Visible = Exclude<Status, "draft" | "archived">; // "review" | "published"
type Editable = Extract<Status, "draft" | "review">;   // "draft" | "review"

const shown: Visible[] = ["review", "published"];
const editing: Editable = "draft";
console.log(shown, editing); // [ 'review', 'published' ] draft

// @ts-expect-error: Type '"draft"' is not assignable to type 'Visible'.
const bad: Visible = "draft";

Giống mọi utility type, các kiểu này chỉ tồn tại lúc biên dịch. Dòng cuối bị trình biên dịch từ chối; đoạn JavaScript chạy thật không hề biết Visible là gì.

Tổng quan Exclude, Extract và NonNullable

"Gán được cho U" là cụm từ then chốt. U không nhất thiết là danh sách các thành viên chính xác; nó có thể là một kiểu rộng hơn mà nhiều thành viên vừa với:

type Input = string | number | boolean | (() => void) | null;

type Primitive = Exclude<Input, (() => void) | null>; // string | number | boolean
type Callable = Extract<Input, (...args: never[]) => unknown>; // () => void
type Present = NonNullable<Input>; // string | number | boolean | (() => void)

const values: Primitive[] = ["a", 1, true];
const run: Callable = () => console.log("called");
const p: Present = 42;

run();
console.log(values, p); // [ 'a', 1, true ] 42

Chọn thành viên của union theo hình dạng

Với một discriminated union, Extract kèm một hình dạng một phần sẽ lấy ra các biến thể có hình dạng đó. Đây là cách thường dùng để đặt tên cho một biến thể của union không do bạn tự viết:

type AppEvent =
    | { type: "click"; x: number; y: number }
    | { type: "key"; key: string }
    | { type: "scroll"; delta: number };

type ClickEvent = Extract<AppEvent, { type: "click" }>;
type NonClickEvent = Exclude<AppEvent, { type: "click" }>;

function handleClick(e: ClickEvent): string {
    return `click at ${e.x},${e.y}`; // x and y are available
}

function describe(e: NonClickEvent): string {
    return e.type === "key" ? `key ${e.key}` : `scroll ${e.delta}`;
}

console.log(handleClick({ type: "click", x: 10, y: 20 })); // click at 10,20
console.log(describe({ type: "key", key: "Enter" }));      // key Enter

Hình dạng { type: "click" } chỉ là kiểu cha (supertype) của biến thể click, nên đó là biến thể duy nhất Extract giữ lại. Một hình dạng khớp với nhiều biến thể (chẳng hạn { x: number } nếu hai biến thể cùng có) sẽ giữ lại tất cả.

NonNullable

NonNullable<T> là phiên bản ở mức kiểu của phép kiểm tra !== null && !== undefined. Nó hay xuất hiện khi bạn suy ra một kiểu từ thứ gì đó không bắt buộc:

type User = { name: string; manager?: { name: string } | null };

type Manager = NonNullable<User["manager"]>; // { name: string }

function managerName(m: Manager): string {
    return m.name; // no null check needed
}

const u: User = { name: "Ada", manager: { name: "Grace" } };
if (u.manager) {
    console.log(managerName(u.manager)); // Grace
}

// Filtering null and undefined out of an array, with a matching type:
const raw: Array<string | null | undefined> = ["a", null, "b", undefined];
const clean = raw.filter((s): s is NonNullable<typeof s> => s != null);
console.log(clean); // [ 'a', 'b' ]

User["manager"] là { name: string } | null | undefined (dấu ? thêm vào undefined), và NonNullable loại bỏ cả hai. Từ TypeScript 5.5, trình biên dịch cũng tự suy ra predicate đó, nên raw.filter((s) => s != null) đã có kiểu string[]; việc viết rõ s is NonNullable<typeof s> giúp ý định dễ thấy và chạy được ở các phiên bản cũ hơn. Định nghĩa của nó là type NonNullable<T> = T & {}: kiểu đối tượng rỗng {} nhận mọi giá trị trừ null và undefined, nên giao với nó sẽ loại bỏ đúng hai giá trị đó.

Chúng được xây dựng thế nào

Exclude và Extract là các conditional type chỉ một dòng trong thư viện chuẩn:

type Exclude<T, U> = T extends U ? never : T;
type Extract<T, U> = T extends U ? T : never;

Khi T là một union, conditional type được áp dụng riêng cho từng thành viên (nó phân phối), và các thành viên never biến mất khỏi kết quả. Vì vậy Exclude<"a" | "b", "a"> trở thành ("a" extends "a" ? never : "a") | ("b" extends "a" ? never : "b"), tức là never | "b", tức là "b". Trang conditional type trình bày chi tiết về tính phân phối.

Exclude và Omit, Extract và Pick

Những cái tên này dễ nhầm vì cả hai cặp đều "loại bỏ" hoặc "giữ lại" một thứ gì đó. Khác biệt nằm ở thứ mà chúng tác động lên:

Dùng Exclude trên kiểu đối tượng là một sơ suất phổ biến, và nó thất bại mà không báo gì:

type Account = { id: number; email: string; password: string };

type Wrong = Exclude<Account, "password">; // still Account: not a union of "password"
type Right = Omit<Account, "password">;    // { id: number; email: string }

const safe: Right = { id: 1, email: "ada@example.com" };
const oops: Wrong = { id: 1, email: "ada@example.com", password: "hunter2" };
console.log(Object.keys(safe), Object.keys(oops));
// [ 'id', 'email' ] [ 'id', 'email', 'password' ]

Account không gán được cho "password", nên Exclude giữ nguyên nó. Bản thân Omit được xây dựng từ Exclude áp dụng lên các khóa: Omit<T, K> là Pick<T, Exclude<keyof T, K>>. Xem Omit để biết thêm.

Một Exclude chặt chẽ hơn

Tham số thứ hai của Exclude nhận mọi kiểu, nên một lỗi gõ sẽ không loại bỏ gì và cũng không báo lỗi. Thêm một ràng buộc sẽ buộc trình biên dịch kiểm tra rằng thứ bạn loại bỏ thật sự nằm trong union:

// This does not compile: "drafft" is not a Status.
type Status = "draft" | "published" | "archived";

type StrictExclude<T, U extends T> = Exclude<T, U>;

type Loose = Exclude<Status, "drafft">;        // silently Status, unchanged
type Strict = StrictExclude<Status, "drafft">; // error

const s: Strict = "published";
console.log(s);

index.ts(7,37): error TS2344: Type '"drafft"' does not satisfy the constraint 'Status'.

Sửa lỗi chính tả là code biên dịch được, với Strict bằng "published" | "archived". Cùng mẹo này áp dụng được cho Extract và cho một Omit chặt chẽ (K extends keyof T).