NgodingBangMengenal TypeScript: Union & Intersect pada Type
Septianata Rizky Pratama
This article has been translated into English version: Learn TypeScript: Unions and Intersection Types
TypeScript menawarkan sistem tipe data yang kuat dan fleksibel. Dua fitur penting dalam sistem tipe data TypeScript adalah Union Type dan Intersection Type. Artikel ini akan menjelaskan kedua konsep tersebut dengan contoh kode sederhana.
Union Type
Union Type memungkinkan kita untuk mendefinisikan variabel yang dapat menerima lebih dari satu tipe data. Union Type direpresentasikan dengan simbol pipe (|).
/** Mendefinisikan variabel dengan Union Type */
let id: string | number;
/** Kedua assignment berikut valid */
id = "ABC123";
id = 456;
/** Error: Type boolean is not assignable to type string | number */
// id = true;
Penggunaan Union Type pada Function
Saat bekerja dengan Union Type, kita hanya dapat mengakses properti atau metode yang tersedia di semua tipe yang terlibat.
function printId(id: string | number) {
// Properti toString() tersedia di string dan number
console.log(id.toString());
// Error: Property 'toUpperCase' does not exist on type 'string | number'.
// Property 'toUpperCase' does not exist on type 'number'.
// console.log(id.toUpperCase());
}Type Narrowing
Untuk mengakses properti spesifik dari salah satu tipe, kita perlu melakukan type narrowing dengan memeriksa tipe data terlebih dahulu.
function printId(id: string | number) {
if (typeof id === "string") {
// Di blok ini, TypeScript tahu bahwa id adalah string
console.log(id.toUpperCase());
} else {
// Di blok ini, TypeScript tahu bahwa id adalah number
console.log(id.toFixed(2));
}
}Union Type dengan Array dan Object
Union Type juga bisa diterapkan pada array dan object.
/** Array yang bisa berisi string atau number */
const data: (string | number)[] = ["satu", 2, "tiga", 4];
/** Object dengan properti yang bisa berupa string atau number */
type Product = {
id: string | number;
name: string;
price: number;
};
const product: Product = {
/** atau bisa juga id: 1 */
id: "P001",
name: "Laptop",
price: 15000000,
};Intersection Type
Intersection Type memungkinkan kita untuk menggabungkan beberapa tipe menjadi satu tipe baru. Intersection Type direpresentasikan dengan simbol ampersand (&).
/** Mendefinisikan dua tipe */
type Person = {
name: string;
age: number;
};
type Employee = {
employeeId: string;
department: string;
};
/** Menggabungkan dua tipe dengan Intersection Type */
type EmployeePerson = Person & Employee;
/** Object harus memiliki semua properti dari kedua tipe */
const employee: EmployeePerson = {
name: "Budi",
age: 30,
employeeId: "E001",
department: "Engineering",
};Contoh Penggunaan
Berikut ini beberapa contoh penggunaan Union dan Intersection Type.
Union Type untuk Function Overloading
/** Fungsi yang bisa menerima string atau array of string */
function formatText(input: string | string[]): string {
if (Array.isArray(input)) {
return input.join(", ");
}
return input;
}
console.log(formatText("Hello")); // Output: Hello
console.log(formatText(["Hello", "World"])); // Output: Hello, World
Membuat Type Baru dari Beberapa Type
type Loggable = {
log: (message: string) => void;
};
type Serializable = {
serialize: () => string;
};
// Membuat tipe yang menggabungkan kemampuan logging dan serialisasi
type LoggableAndSerializable = Loggable & Serializable;
class Logger implements LoggableAndSerializable {
log(message: string) {
console.log(`[LOG]: ${message}`);
}
serialize() {
return JSON.stringify(this);
}
}Kesimpulan
Union Type dan Intersection Type adalah fitur powerful di TypeScript yang memungkinkan kita membuat sistem tipe yang fleksibel namun tetap aman. Union Type (|) memungkinkan variabel menerima beberapa tipe data alternatif, memberikan fleksibilitas saat dibutuhkan. Sementara itu, Intersection Type (&) menggabungkan beberapa tipe menjadi satu tipe baru yang memiliki semua properti dari tipe-tipe tersebut.
Kedua konsep ini menjadi alat yang sangat berguna dalam membangun aplikasi yang kompleks namun tetap mempertahankan keamanan tipe data yang menjadi keunggulan TypeScript.
