Intersection type trong TypeScript: kết hợp kiểu với &

Intersection type, viết là A & B, mô tả một giá trị đồng thời là A và B. Với kiểu object, nghĩa là giá trị có mọi thuộc tính của cả hai. Đây là cách kết hợp các kiểu có sẵn mà không phải viết lại các thuộc tính.

type Person = { name: string; email: string };
type Employee = { employeeId: number; team: string };

type Staff = Person & Employee; // has all four properties

const ada: Staff = { name: "Ada", email: "ada@example.com", employeeId: 7, team: "compilers" };

function badge(s: Staff): string {
  return `${s.name} (#${s.employeeId}, ${s.team})`;
}

console.log(badge(ada)); // Ada (#7, compilers)

// @ts-expect-error: Type '{ name: string; email: string; employeeId: number; }' is not assignable to type 'Staff'.
const partial: Staff = { name: "Alan", email: "alan@example.com", employeeId: 8 };

Object thứ hai thiếu team, nên gây lỗi biên dịch TS2322, và dòng tiếp theo của thông báo ghi Property 'team' is missing ... but required in type 'Employee'. Một giá trị Staff có thể được truyền vào bất cứ chỗ nào cần một Person hay một Employee.

Kết hợp kiểu object

& dùng được với mọi tổ hợp type alias, interface và kiểu object viết trực tiếp, và với cả tham số kiểu generic. Trường hợp cuối là nơi nó khó bị thay thế: một hàm thêm thuộc tính vào bất kỳ object nào nó nhận được có thể nói điều đó một cách chính xác.

function withMeta<T extends object>(obj: T, author: string): T & { author: string; savedAt: string } {
  return { ...obj, author, savedAt: "2024-03-15T10:30:00.000Z" };
}

const note = withMeta({ title: "Draft", words: 120 }, "ada");
// type: { title: string; words: number } & { author: string; savedAt: string }

console.log(note.title, note.words, note.author); // Draft 120 ada
console.log(note.savedAt);                         // 2024-03-15T10:30:00.000Z

Nơi gọi giữ nguyên kiểu chính xác của thứ nó truyền vào (title, words) cộng với hai thuộc tính được thêm. Một interface ... extends không diễn đạt được "T là gì cũng được, cộng thêm mấy thuộc tính này", vì interface không thể extend một tham số kiểu.

Thuộc tính xung đột trở thành never

Khi cả hai vế khai báo cùng một thuộc tính, kiểu của thuộc tính là intersection của hai kiểu đó. Nếu hai kiểu không có giá trị chung nào, thuộc tính trở thành never, và trình biên dịch không nói gì cho tới khi bạn thử tạo một giá trị:

// This does not compile: id cannot be a string and a number at once
type WithStringId = { id: string; name: string };
type WithNumberId = { id: number };

type Account = WithStringId & WithNumberId; // no error on this line

const r: Account = { id: "u1", name: "Ada" };
console.log(r);

index.ts(7,22): error TS2322: Type 'string' is not assignable to type 'never'.

Lỗi trỏ vào object chứ không trỏ vào kiểu đã gây ra nó, nên những bug kiểu này rất mất thời gian để lần ra. Rê chuột lên r.id trong trình soạn thảo sẽ thấy kiểu của nó: never. Khi thuộc tính xung đột là một tag literal, như trong type Shape = { kind: "circle" } & { kind: "square" }, TypeScript còn đi xa hơn và rút gọn cả intersection thành never. Đọc một thuộc tính của giá trị như vậy sẽ thấy lời giải thích: Property 'kind' does not exist on type 'never'. The intersection 'Shape' was reduced to 'never' because property 'kind' has conflicting types in some constituents.

interface ... extends thì bắt cùng xung đột đó ngay tại khai báo, với lỗi TS2430. Đó là khác biệt thực tế chính giữa hai cách; trang so sánh interface và type đặt chúng cạnh nhau.

Phần giao tương thích thu hẹp thuộc tính

Nếu hai kiểu thuộc tính có phần giao nhau, kết quả là phần giao đó. Điều này hữu ích chứ không phải lỗi:

type Editable = { id: string | number; tags: string[] };
type Stored = { id: string; createdAt: string };

type Doc = Editable & Stored; // id: (string | number) & string, which is string

const doc: Doc = { id: "d1", tags: ["draft"], createdAt: "2024-03-15" };
console.log(doc.id.toUpperCase()); // D1: id is a string, so string methods are allowed

type Letters = "a" | "b" | "c";
type Later = "b" | "c" | "d";
type Both = Letters & Later; // "b" | "c": what the two unions have in common

const shared: Both[] = ["b", "c"];
console.log(shared); // [ 'b', 'c' ]

Nửa sau cho thấy & làm gì với union: nó giữ lại những thành viên mà cả hai vế cùng có. Coi kiểu là tập hợp các giá trị sẽ giúp đoán trước được điều này. A | B là hợp của hai tập, A & B là phần giao của chúng, và một phần giao rỗng là never.

Intersection và union

Hai cái tên này đến từ lý thuyết tập hợp, và chúng có vẻ ngược đời khi áp dụng cho thuộc tính của object:

Intersection của các kiểu object có nhiều thuộc tính hơn chính vì nó cho phép ít giá trị hơn: chỉ những object có đủ mọi thứ.

Intersection và extends

Để gộp vài type alias kiểu object, & là cách viết quen thuộc và hoàn toàn ổn. Với một kiểu được ghép từ nhiều phần, hoặc một kiểu thuộc API công khai, extends báo lỗi sớm hơn và kiểm tra kiểu nhẹ hơn.

Intersection với kiểu nguyên thủy: branding

Giao một kiểu nguyên thủy với một kiểu object không cho ra never: string & { readonly __brand: "UserId" } là một chuỗi mang thêm một dấu hiệu chỉ tồn tại lúc biên dịch. Không chuỗi thật nào có thuộc tính đó, và đó chính là mục đích: chỉ code cố ý khẳng định brand mới tạo được giá trị như vậy, nên một string thông thường hay một OrderId không còn truyền được vào chỗ cần UserId. Kỹ thuật này có trang riêng, branded type.