Tipe Interseksi dalam TypeScript
Artikel ini menjelaskan tipe interseksi dalam TypeScript.
YouTube Video
Tipe Interseksi dalam TypeScript
Dalam TypeScript, tipe interseksi adalah cara untuk menggabungkan beberapa tipe untuk membuat tipe baru.
Apa itu Tipe Interseksi?
Tipe interseksi memungkinkan Anda menggabungkan beberapa tipe untuk mendefinisikan tipe baru dengan semua properti dari tipe-tipe tersebut. Tipe interseksi didefinisikan dengan menggunakan simbol & dan memerlukan semua properti dari setiap tipe penyusun.
Contoh:
1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7 name: "John Doe",
8 age: 30
9};Dalam kode ini, dengan mendefinisikan type C = A & B, tipe C menjadi tipe objek dengan properti name (tipe string) dan age (tipe number).
Manfaat Tipe Interseksi
Dengan menggunakan tipe interseksi, Anda dapat menggunakan kembali tipe yang sudah ada dan mendefinisikan tipe yang lebih fleksibel dan komposit. Ini meningkatkan pemeliharaan dan perluasan kode Anda. Selain itu, tipe interseksi dapat menerapkan batasan dari beberapa tipe berbeda secara bersamaan, sehingga meningkatkan keamanan tipe.
Manfaat:
- Penggunaan Ulang: Dengan menggabungkan beberapa tipe, Anda dapat mengurangi definisi yang berulang dan menggunakan kembali tipe yang sudah ada.
- Keamanan Tipe: Tipe interseksi meningkatkan pengecekan tipe dengan hanya mengizinkan objek yang memenuhi kondisi dari beberapa tipe.
Kasus Penggunaan Tipe Interseksi
Tipe interseksi sangat berguna saat memperluas objek atau antarmuka. Khususnya, ini berguna saat Anda ingin merepresentasikan objek dengan beberapa properti.
Kasus Penggunaan 1: Objek dengan Beberapa Antarmuka
1interface Drivable {
2 drive(): void;
3}
4
5interface Flyable {
6 fly(): void;
7}
8
9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12 drive() {
13 console.log("Driving on the road");
14 },
15 fly() {
16 console.log("Flying in the sky");
17 }
18};
19
20car.drive(); // "Driving on the road"
21car.fly(); // "Flying in the sky"
Dalam contoh ini, tipe Vehicle didefinisikan sebagai tipe interseksi yang menggabungkan Drivable dan Flyable. Objek dengan tipe Vehicle harus mengimplementasikan kedua metode drive() dan fly().
Kasus Penggunaan 2: Menggabungkan Kelas dan Tipe Interseksi
Dengan menggabungkan kelas dan tipe interseksi, dimungkinkan untuk membuat objek yang memiliki properti dari beberapa antarmuka.
1interface Person {
2 name: string;
3}
4
5interface Employee {
6 employeeId: number;
7}
8
9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12 constructor(public name: string, public employeeId: number) {}
13
14 getDetails() {
15 return `${this.name}, Employee ID: ${this.employeeId}`;
16 }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"
Di sini, kami menggunakan tipe interseksi PersonEmployee dari Person dan Employee untuk membuat kelas CompanyWorker memiliki properti dari keduanya.
Poin yang Perlu Dipertimbangkan dengan Tipe Persilangan
Poin penting saat menggunakan tipe persilangan adalah menyadari kemungkinan konflik properti. Jika properti dengan nama yang sama memiliki anotasi tipe yang berbeda di berbagai tipe, kesalahan dapat terjadi.
Contoh Perhatian:
1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8 id: 1
9};Dalam contoh ini, properti id dari A dan B bertabrakan, menyebabkan kesalahan saat mendefinisikan objek dengan tipe C. Dalam kasus seperti itu, tinjauan desain diperlukan untuk menghindari konflik properti.
Contoh Kode dengan Anotasi Tipe untuk Tipe Persilangan
Akhirnya, berikut adalah contoh kode nyata yang mencakup anotasi tipe.
Contoh 1: Menampilkan Detil Objek
1type ContactInfo = { phone: string; email: string };
2type Address = { city: string; postalCode: string };
3
4type PersonDetails = ContactInfo & Address;
5
6const details: PersonDetails = {
7 phone: "123-4567",
8 email: "example@mail.com",
9 city: "New York",
10 postalCode: "10001"
11};
12
13console.log(details);Contoh 2: Objek dengan Properti Tambahan
1interface BasicInfo {
2 name: string;
3 age: number;
4}
5
6interface WorkInfo {
7 company: string;
8 position: string;
9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14 name: "Bob",
15 age: 28,
16 company: "Tech Corp",
17 position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);Kesimpulan
Tipe persilangan dalam TypeScript adalah fitur kuat untuk menggabungkan beberapa tipe ke dalam tipe baru. Ini meningkatkan kegunaan kembali kode dan keamanannya, memungkinkan definisi tipe yang kompleks. Dengan memanfaatkan fleksibilitas desain secara efektif sambil berhati-hati terhadap konflik tipe, Anda dapat mencapai kode yang kuat dan sangat mudah dibaca.
Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.