Intersection Type di TypeScript: Menggabungkan Tipe dengan &

Intersection type, yang ditulis A & B, menjelaskan nilai yang sekaligus A dan B. Untuk tipe object, artinya nilai itu punya setiap properti dari keduanya. Dengan cara ini kamu menggabungkan tipe yang sudah ada tanpa menulis ulang propertinya.

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 kedua tidak menyertakan team, jadi hasilnya error kompilasi TS2322, dan baris berikutnya dari pesan error itu menyatakan Property 'team' is missing ... but required in type 'Employee'. Nilai Staff bisa dikirim ke mana pun Person atau Employee diharapkan.

Menggabungkan Tipe Object

& bekerja dengan campuran type alias, interface, dan tipe object inline apa pun, juga dengan parameter tipe generic. Kasus terakhir itulah yang sulit digantikan: fungsi yang menambahkan properti ke object apa pun yang diterimanya bisa menyatakannya dengan tepat.

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

Pemanggil tetap mendapat tipe persis dari apa yang dikirimnya (title, words) ditambah dua properti baru. interface ... extends tidak bisa menyatakan "apa pun T-nya, ditambah ini", karena interface tidak bisa meng-extend parameter tipe.

Properti yang Bertentangan Menjadi never

Kalau kedua sisi mendeklarasikan properti yang sama, tipe properti itu adalah intersection dari keduanya. Kalau tipe-tipe itu tidak punya nilai yang sama, propertinya menjadi never, dan compiler diam saja sampai kamu mencoba membuat sebuah nilai:

// 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'.

Error-nya menunjuk ke object, bukan ke tipe yang menyebabkannya, sehingga bug seperti ini lama dilacak. Mengarahkan kursor ke r.id di editor menunjukkan tipenya: never. Kalau properti yang bertentangan adalah tag literal, seperti di type Shape = { kind: "circle" } & { kind: "square" }, TypeScript bertindak lebih jauh dan menyusutkan seluruh intersection menjadi never. Membaca properti dari nilai seperti itu lalu menjelaskan alasannya: 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 justru menangkap konflik yang sama di deklarasinya, dengan error TS2430. Itulah perbedaan praktis utama antara keduanya; halaman interface vs type membandingkannya berdampingan.

Tumpang Tindih yang Kompatibel Mempersempit Properti

Kalau dua tipe properti memang beririsan, hasilnya adalah irisan itu. Ini berguna, bukan error:

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' ]

Bagian kedua menunjukkan apa yang dilakukan & pada union: ia menyisakan member yang dimiliki kedua sisi. Memandang tipe sebagai himpunan nilai membuat perilaku ini mudah ditebak. A | B adalah gabungan dari dua himpunan, A & B adalah irisannya, dan irisan yang kosong adalah never.

Intersection vs Union

Nama-namanya berasal dari teori himpunan, dan terasa terbalik kalau diterapkan pada properti object:

Intersection dari tipe object punya lebih banyak properti justru karena ia mengizinkan lebih sedikit nilai: hanya object yang punya semuanya.

Intersection vs extends

Untuk menggabungkan beberapa type alias object, & sudah idiomatis dan baik-baik saja. Untuk tipe yang dibangun dari banyak bagian, atau tipe API publik, extends memberi error lebih awal dan pemeriksaan tipe yang lebih ringan.

Intersection dengan Tipe Primitif: Branding

Intersection antara tipe primitif dan tipe object tidak menghasilkan never: string & { readonly __brand: "UserId" } adalah string yang membawa penanda tambahan yang hanya ada saat kompilasi. Tidak ada string sungguhan yang punya properti itu, dan memang itulah intinya: hanya kode yang sengaja menegaskan brand itu yang bisa membuatnya, jadi string biasa atau OrderId tidak bisa lagi dikirim ke tempat yang mengharapkan UserId. Teknik ini punya halamannya sendiri, branded type.