Masukkan Password
52 Intersection Type di TypeScript
Lecture ini membahas Intersection Type (&) di TypeScript. Konsep ini memang agak membingungkan di awal, terutama karena cara kerja & pada tipe sederhana berbeda dengan penggunaannya pada object/interface.
Saya akan jelaskan dari dasar sampai use case-nya.
1. Apa itu Intersection Type?
Intersection type adalah cara untuk menggabungkan beberapa type menjadi satu type.
Syntax-nya menggunakan tanda:
&
Contoh sederhana:
type A = ...
type B = ...
type C = A & B;
Artinya:
Charus memenuhi A DAN B.
Kata kuncinya adalah:
Intersection = AND
Berbeda dengan Union:
|
yang berarti:
OR
2. Bedanya Union | dan Intersection &
Ini sangat penting.
Union |
type StringOrNumber = string | number;
Artinya:
Nilainya boleh
stringATAUnumber.
Contoh:
let x: StringOrNumber;
x = "hello"; // ✅
x = 20; // ✅
x = true; // ❌
Secara sederhana:
string | number
┌──────────┐
│ OR │
└──────────┘
string ✅
number ✅
boolean ❌
Intersection &
type A = ...
type B = ...
type C = A & B;
Artinya:
Sesuatu harus memenuhi A DAN B sekaligus.
Secara sederhana:
A & B
┌──────────┐
│ AND │
└──────────┘
A ✅
B ✅
A + B ✅
3. Contoh Intersection dengan tipe sederhana
Di lecture terdapat:
type StringOrNumber = string | number;
type BooleanOrNumber = boolean | number;
Sekarang kita buat:
type MyNumberType = StringOrNumber & BooleanOrNumber;
Mari kita pecah.
StringOrNumber berisi:
string
OR
number
Sedangkan BooleanOrNumber:
boolean
OR
number
Kita intersection:
(string | number)
&
(boolean | number)
Sekarang kita cari tipe yang sama di kedua sisi.
StringOrNumber BooleanOrNumber
│ │
├── string ├── boolean
│ │
└── number ◄────────►└── number
Yang sama hanya:
number
Maka hasilnya:
type MyNumberType = number;
4. Maka variable-nya hanya boleh number
let x: MyNumberType;
x = 20; // ✅
x = "hello"; // ❌
x = true; // ❌
Karena hasil intersection-nya adalah:
number
5. Kenapa & menghasilkan number?
Cara paling mudah memahaminya adalah dengan melihat irisan.
Bayangkan:
StringOrNumber
┌─────────────────────┐
│ string │
│ number │
└─────────────────────┘
BooleanOrNumber
┌─────────────────────┐
│ boolean │
│ number │
└─────────────────────┘
Irisannya:
┌─────────────────────┐
│ number │
└─────────────────────┘
Hanya number yang terdapat di kedua type.
Makanya:
(string | number) & (boolean | number)
hasil akhirnya adalah:
number
6. Tapi hati-hati: Intersection paling berguna pada object
Nah, bagian yang jauh lebih penting dari lecture adalah ketika intersection digunakan pada object type.
Misalnya kita mempunyai:
type User = {
name: string;
age: number;
};
User memiliki:
User
├── name → string
└── age → number
Kemudian kita mempunyai:
type Admin = {
name: string;
role: string;
};
Admin memiliki:
Admin
├── name → string
└── role → string
Sekarang kita buat:
type AdminUser = User & Admin;
Apa artinya?
AdminUser harus memenuhi:
User
+
Admin
7. Hasil User & Admin
Mari kita gabungkan.
User:
{
name: string;
age: number;
}
Admin:
{
name: string;
role: string;
}
Intersection:
type AdminUser = User & Admin;
Hasilnya secara konsep menjadi:
{
name: string;
age: number;
role: string;
}
8. Kenapa name tidak menjadi dua?
Karena name dimiliki oleh kedua type:
User
└── name
Admin
└── name
Keduanya memiliki:
name: string
Jadi tidak ada konflik.
Hasilnya tetap:
name: string
Sedangkan:
age
hanya berasal dari User.
Dan:
role
hanya berasal dari Admin.
Jadi semuanya digabung.
9. Contoh penggunaannya
Sekarang kita bisa membuat:
const john: AdminUser = {
name: "John",
age: 28,
role: "admin"
};
Ini valid karena semua property tersedia:
name → John
age → 28
role → admin
10. Bagaimana kalau property kurang?
Misalnya:
const john: AdminUser = {
name: "John",
age: 28
};
TypeScript akan memberikan error.
Kenapa?
Karena AdminUser membutuhkan:
name ✅
age ✅
role ❌
role hilang.
Karena:
AdminUser = User & Admin
berarti object harus memenuhi User DAN Admin.
11. Analogi kehidupan sehari-hari
Bayangkan ada dua persyaratan.
Persyaratan User
USER
✓ Punya nama
✓ Punya umur
Persyaratan Admin
ADMIN
✓ Punya nama
✓ Punya role
Kalau seseorang harus menjadi:
USER AND ADMIN
maka dia harus mempunyai:
✓ nama
✓ umur
✓ role
Itulah intersection.
12. Intersection dengan interface
Lecture juga mengatakan bahwa kita tidak harus menggunakan type.
Kita bisa menggunakan interface untuk mendefinisikan object:
interface User {
name: string;
age: number;
}
interface Admin {
name: string;
role: string;
}
Kemudian intersection:
type AdminUser = User & Admin;
Ini valid.
Jadi kita bisa menggabungkan interface menggunakan intersection type.
13. Use case yang paling menarik: processOrder
Sekarang kita masuk ke contoh praktis dari lecture.
Kita punya interface:
interface Order {
id: number;
items: string[];
}
Artinya sebuah Order mempunyai:
Order
├── id
│ └── number
│
└── items
└── string[]
Contoh object:
const order = {
id: 123,
items: ["item one", "item two"]
};
14. Kita membutuhkan status juga
Sekarang kita punya function:
function processOrder(order: Order) {
}
Function ini hanya meminta:
Order
├── id
└── items
Tetapi ternyata kita juga ingin processOrder() menerima:
status
Misalnya:
id: 123
items: ["item one", "item two"]
status: "shipped"
15. Kita bisa menggunakan intersection
Kita dapat menulis:
function processOrder(
order: Order & {
status: string;
}
) {
console.log(order.id);
console.log(order.items);
console.log(order.status);
}
Perhatikan:
Order & {
status: string;
}
Artinya parameter order harus memenuhi:
Order
+
status
Karena Order mempunyai:
{
id: number;
items: string[];
}
dan object kedua mempunyai:
{
status: string;
}
Maka hasilnya:
{
id: number;
items: string[];
status: string;
}
16. Memanggil processOrder
Sekarang kita bisa:
processOrder({
id: 123,
items: ["item one", "item two"],
status: "shipped"
});
Ini valid karena:
id → number ✅
items → string[] ✅
status → string ✅
17. Bagaimana kalau status tidak diberikan?
Misalnya:
processOrder({
id: 123,
items: ["item one", "item two"]
});
TypeScript akan error.
Karena function meminta:
Order
+
status
Sedangkan kita hanya memberikan:
Order
status tidak ada.
18. Kenapa tidak langsung menambahkan status ke Order?
Pertanyaan bagus.
Kita sebenarnya bisa saja:
interface Order {
id: number;
items: string[];
status: string;
}
Tetapi mungkin kita mempunyai banyak situasi di mana Order tidak selalu membutuhkan status.
Misalnya:
Order dasar
├── id
└── items
Kemudian function tertentu membutuhkan tambahan:
Order + status
Dengan intersection, kita dapat membuat kombinasi type tanpa mengubah type asli.
19. Inilah salah satu manfaat besar intersection
Misalnya kita punya:
interface User {
name: string;
}
Kemudian kita butuh user dengan role:
type AdminUser = User & {
role: string;
};
Kemudian user dengan permission:
type UserWithPermission = User & {
permissions: string[];
};
Kemudian user dengan address:
type UserWithAddress = User & {
address: string;
};
Kita bisa membuat kombinasi type sesuai kebutuhan.
20. Cara berpikir | vs &
Ini bagian yang saya sarankan kamu hafalkan secara konsep, bukan sekadar syntax.
Union |
A | B
Baca:
A ATAU B
Contoh:
string | number
Artinya:
string ✅
number ✅
Intersection &
A & B
Baca:
A DAN B
Contoh:
User & Admin
Artinya:
User harus terpenuhi
+
Admin harus terpenuhi
21. Visualisasi sederhana
TYPESCRIPT TYPES
│
┌──────┴──────┐
│ │
UNION INTERSECTION
│ │
| &
│ │
▼ ▼
"OR" "AND"
│ │
▼ ▼
A ATAU B A DAN B
│ │
▼ ▼
salah satu keduanya
terpenuhi terpenuhi
22. Contoh perbandingan
Union
type UserOrAdmin = User | Admin;
Artinya object cukup memenuhi salah satu type.
Secara sederhana:
User
OR
Admin
Intersection
type AdminUser = User & Admin;
Artinya object harus memenuhi keduanya.
User
AND
Admin
23. Satu hal penting tentang “common”
Di lecture ada bagian yang bisa menyebabkan kebingungan:
“Untuk simple data types, intersection mengambil common type.”
Itu benar untuk contoh seperti:
(string | number) & (boolean | number)
Hasilnya:
number
Karena number adalah bagian yang sama.
Tetapi jangan menerapkan aturan “hanya property yang sama” ketika berhadapan dengan object.
Untuk:
User & Admin
hasilnya bukan hanya property yang sama (name).
Justru semua requirement dari kedua object harus dipenuhi:
User:
name
age
Admin:
name
role
User & Admin:
name
age
role
Ini perbedaan penting.
24. Ringkasan konsep lecture
Ada tiga bagian utama:
Bagian 1 — Union
type StringOrNumber = string | number;
Artinya:
string ATAU number.
Bagian 2 — Intersection dengan simple type
type MyNumberType =
(string | number) &
(boolean | number);
Hasil:
number
Karena number adalah tipe yang ada di kedua sisi.
Bagian 3 — Intersection dengan object
type AdminUser = User & Admin;
Jika:
User = {
name: string;
age: number;
}
Admin = {
name: string;
role: string;
}
Maka:
AdminUser = {
name: string;
age: number;
role: string;
}
🧠 Cheat Sheet
UNION
────────────────────────
A | B
= A OR B
= A atau B
Contoh:
string | number
Boleh:
✓ "hello"
✓ 123
✗ true
INTERSECTION
────────────────────────
A & B
= A AND B
= A dan B
Contoh:
User & Admin
Harus memenuhi:
✓ User
✓ Admin
✓ Semua property dari keduanya
Dan untuk use case processOrder:
Order
├── id: number
└── items: string[]
+
Extra requirement
└── status: string
↓
Order & { status: string }
↓
{
id: number;
items: string[];
status: string;
}
🎯 Kalimat paling penting untuk diingat:
Union
|berarti “OR” — cukup salah satu. Intersection&berarti “AND” — semuanya harus terpenuhi.
Untuk object, intersection sangat berguna untuk menggabungkan beberapa kontrak/type menjadi satu type yang lebih lengkap, tanpa harus mengubah type aslinya.