Memahami Union dan Intersection Types di TypeScript: Panduan Lengkap dengan Contoh Praktis

Dalam tutorial kali ini kita akan membahas Union dan Intersection Types di TypeScript sebagai Panduan Lengkap dengan Contoh Praktis. Saat pengembangan aplikasi, sering kali kita membutuhkan variabel yang bisa menampung lebih dari satu tipe data. Union TypeScript hadir untuk memenuhi kebutuhan tersebut dengan memberikan fleksibilitas tanpa mengorbankan keamanan tipe data. Melalui simbol | (pipe), TypeScript memungkinkan sebuah variabel memiliki beberapa kemungkinan tipe, misalnya string atau number.

Selain Union Type, TypeScript juga memiliki Intersection Type, yang menggunakan simbol & untuk menggabungkan beberapa tipe menjadi satu. Fitur ini memungkinkan kita membangun tipe yang lebih kompleks dan kuat, terutama saat menangani struktur data yang memiliki banyak properti. Memahami kedua konsep ini sangat penting untuk menulis kode yang lebih dinamis, aman, dan mudah dipelihara.

Apa Itu Union Type?

Union Type memungkinkan sebuah variabel memiliki lebih dari satu tipe data yang valid. Dengan kata lain, variabel dapat berisi nilai dari salah satu tipe yang ditentukan.

Contoh sederhana penggunaan Union Type:

let input: string | number;

input = "Hello TypeScript"; // Valid
input = 123;                // Valid juga

Jika kita mencoba memberi nilai selain string atau number, TypeScript akan memberikan peringatan saat proses kompilasi.

Union Type sangat berguna dalam situasi di mana data yang diterima belum tentu memiliki tipe tunggal, seperti input dari pengguna atau API eksternal.

Contoh Praktis Union Type

Union Type dapat digunakan untuk fungsi dengan parameter yang fleksibel.

function cetakID(id: string | number): void {
  console.log(`ID pengguna: ${id}`);
}

cetakID(123);
cetakID("USR001");

Fungsi di atas bisa menerima parameter bertipe string atau number tanpa error. Namun, kita tetap bisa menambahkan validasi tambahan di dalamnya:

function validasiInput(input: string | number): void {
  if (typeof input === "string") {
    console.log(`Panjang string: ${input.length}`);
  } else {
    console.log(`Nilai numerik: ${input.toFixed(2)}`);
  }
}

Dengan pendekatan ini, Union Type memberikan fleksibilitas tinggi sambil tetap menjaga keamanan tipe.

Apa Itu Intersection Type?

Berbeda dengan Union Type yang memberikan pilihan antara beberapa tipe, Intersection Type menggabungkan beberapa tipe menjadi satu. Artinya, sebuah nilai harus memiliki semua properti dari tipe-tipe yang digabungkan.

Intersection Type ditulis dengan simbol &.

Contoh penggunaan dasar:

type Person = {
  name: string;
};

type Employee = {
  employeeId: string;
};

type Staff = Person & Employee;

const staffMember: Staff = {
  name: "Andi",
  employeeId: "EMP102"
};

Dalam contoh di atas, tipe Staff memiliki gabungan properti dari Person dan Employee. Objek staffMember wajib memiliki keduanya agar valid.

Contoh Praktis Intersection Type

Intersection Type sering digunakan untuk menggabungkan tipe kompleks, misalnya saat menangani objek hasil validasi data atau penggabungan konfigurasi.

type ValidasiNama = { nama: string };
type ValidasiEmail = { email: string };
type ValidasiLengkap = ValidasiNama & ValidasiEmail;

function tampilkanData(user: ValidasiLengkap) {
  console.log(`Nama: ${user.nama}, Email: ${user.email}`);
}

tampilkanData({ nama: "Rina", email: "rina@example.com" });

Dengan Intersection Type, kamu dapat memastikan bahwa objek memiliki semua properti penting dari tipe-tipe yang digabungkan.

Penggunaan Union dan Intersection dalam Validasi Data

Salah satu penerapan nyata dari Union dan Intersection Type adalah dalam validasi data. Misalnya, kamu memiliki API yang bisa mengembalikan data dengan berbagai format:

type SuccessResponse = {
  status: "success";
  data: string[];
};

type ErrorResponse = {
  status: "error";
  message: string;
};

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === "success") {
    console.log("Data:", response.data);
  } else {
    console.error("Error:", response.message);
  }
}

Contoh di atas menggunakan Union Type (|) untuk menangani dua kemungkinan bentuk data. Sedangkan Intersection Type (&) bisa digunakan untuk menggabungkan tipe hasil validasi dan metadata tambahan:

type BaseResponse = { timestamp: Date };
type CompleteResponse = ApiResponse & BaseResponse;

const response: CompleteResponse = {
  status: "success",
  data: ["Item1", "Item2"],
  timestamp: new Date()
};

console.log(response);

Dengan demikian, kita bisa membuat sistem validasi data yang fleksibel sekaligus kuat tanpa kehilangan kejelasan struktur.

Kesimpulan

Union TypeScript dan Intersection Type merupakan dua fitur penting yang memberikan fleksibilitas tinggi dalam penanganan tipe data. Union Type cocok digunakan untuk situasi dengan banyak kemungkinan tipe (menggunakan |), sementara Intersection Type efektif untuk menggabungkan beberapa tipe menjadi satu struktur lengkap (menggunakan &).

Dengan memahami dan menerapkan kedua konsep ini, kamu dapat menulis kode yang lebih aman, efisien, dan mudah dipelihara — terutama dalam validasi data, integrasi API, dan desain arsitektur aplikasi berbasis TypeScript.