Tipe Union dan Intersection pada TypeScript

TypeScript menyediakan fitur sistem tipe yang canggih yang membantu Anda menulis kode yang lebih aman dan lebih mudah ditebak. Di antara fitur-fitur ini adalah tipe gabungan dan tipe persimpangan, yang menawarkan fleksibilitas dalam mendefinisikan dan mengelola tipe yang kompleks. Artikel ini memperkenalkan konsep-konsep ini dan memberikan contoh untuk mengilustrasikan penggunaannya.

Apa Jenis Serikat Pekerja?

Tipe union memungkinkan variabel untuk menampung nilai dari tipe yang berbeda. Ini berguna saat Anda perlu merepresentasikan nilai yang dapat berupa salah satu dari beberapa tipe. Tipe union dilambangkan menggunakan simbol | (pipa).

Mendefinisikan Jenis-jenis Serikat Pekerja

Untuk menentukan tipe gabungan, Anda tentukan beberapa tipe yang dipisahkan dengan simbol |:

let value: string | number;

value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'

Dalam contoh ini, variabel nilai dapat berupa string atau angka, tetapi bukan boolean.

Menggunakan Tipe Union dalam Fungsi

Tipe gabungan sangat berguna dalam fungsi di mana parameter atau tipe pengembalian dapat berupa beberapa tipe:

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(formatValue("hello")); // Output: HELLO
console.log(formatValue(123.456)); // Output: 123.46

Fungsi formatValue mengambil parameter yang dapat berupa string atau number dan memformatnya sebagaimana mestinya.

Apa Jenis Persimpangan?

Tipe interseksi memungkinkan Anda menggabungkan beberapa tipe menjadi satu. Ini berarti bahwa nilai tipe interseksi akan memenuhi semua tipe di interseksi tersebut. Tipe interseksi dilambangkan menggunakan simbol & (ampersand).

Menentukan Jenis Persimpangan

Untuk menentukan jenis persimpangan, Anda menentukan beberapa jenis yang dipisahkan oleh simbol &:

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John Doe",
  employeeId: 1234
};

console.log(john.name); // Output: John Doe
console.log(john.employeeId); // Output: 1234

Dalam contoh ini, tipe EmployeePerson menggabungkan antarmuka Person dan Employee, menghasilkan tipe yang memiliki properti name dan employeeId.

Menggunakan Jenis Intersection dalam Fungsi

Tipe persimpangan juga dapat digunakan dalam fungsi untuk memerlukan beberapa properti tipe:

function printEmployeeDetails(employee: Person & Employee): void {
  console.log(`Name: ${employee.name}`);
  console.log(`Employee ID: ${employee.employeeId}`);
}

const jane: EmployeePerson = {
  name: "Jane Smith",
  employeeId: 5678
};

printEmployeeDetails(jane);
// Output:
// Name: Jane Smith
// Employee ID: 5678

Fungsi printEmployeeDetails memerlukan argumen yang memenuhi tipe Person dan Employee.

Menggabungkan Jenis Union dan Intersection

Anda dapat menggabungkan tipe union dan interchange untuk membuat definisi tipe yang kompleks:

type Shape = Circle | Rectangle;

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius * shape.radius;
  } else {
    return shape.width * shape.height;
  }
}

const myCircle: Circle = { kind: "circle", radius: 10 };
const myRectangle: Rectangle = { kind: "rectangle", width: 20, height: 30 };

console.log(getArea(myCircle)); // Output: 314.159...
console.log(getArea(myRectangle)); // Output: 600

Dalam contoh ini, tipe Shape merupakan gabungan dari Circle dan Rectangle, dan fungsi getArea menangani kedua tipe tersebut sebagaimana mestinya.

Kesimpulan

Tipe union dan interseksi dalam TypeScript menyediakan cara yang ampuh untuk mengelola dan menggabungkan tipe, menawarkan fleksibilitas dan ketepatan dalam definisi tipe. Tipe union memungkinkan variabel menjadi salah satu dari beberapa tipe, sementara tipe interseksi menggabungkan beberapa tipe menjadi satu. Dengan menggunakan fitur ini, Anda dapat membuat aplikasi yang lebih tangguh dan aman terhadap tipe.

Berlatihlah menggunakan tipe union dan interchange untuk memahami kemampuannya dan meningkatkan keterampilan pengodean TypeScript Anda.