Belajar TypeScript 5: Advanced Object Types
TL;DR — Bagian terakhir dari serial belajar TypeScript untuk pemula: mengenal Interface yang sangat berguna dalam Object–Oriented Programming dan mengetahui perbedaannya dengan Type Alias.
Tulisan ini adalah bagian terakhir dari sebuah serial mempelajari TypeScript untuk pemula. Kamu bisa membaca tulisan sebelumnya melalui tautan berikut:
- Belajar TypeScript 1: Type and Type Annotations
- Belajar TypeScript 2: Menulis Functions
- Belajar TypeScript 3: Complex Types
- Belajar TypeScript 4: Type Union & Type Narrowing
Daftar Isi — Klik untuk menuju bagian yang kamu inginkan
- Interface vs. Types
- Interface and Classes
- Composed Types
- Declaration Merging
- Intersection
- Generic Transformation
- Type Aliasing
- Type Capturing
Interface vs. Types
Sampai di bagian kelima dalam serial belajar TypeScript ini, kita sudah beberapa kali membuat alias atau nama lain untuk types dengan keyword ‘type’ misalnya,
Di TypeScript, ada cara lain untuk mendefinisikan types tanpa menggunakan keyword ‘type’, yaitu dengan menggunakan keyword ‘interface’. Penggalan kode di bawah ini memiliki peran yang sama dengan type Student pada penggalan kode di atas:
Keduanya memaksa sebuah variabel atau fungsi untuk mengikuti aturan tipe data tertentu. Namun perlu diingat bahwa pada saat menggunakan keyword ‘type’ kita tidak sedang mendefinisikan sebuah type baru, tapi membuat nama baru untuk sebuah type atau Type Alias.
Pada versi terbaru TypeScript, perbedaan antara Interfaces dan Types semakin tipis. Namun pada dasarnya;
- Interfaces adalah cara mendeskripsikan bentuk data, misalnya; sebuah obyek.
- Type adalah sebuah definisi dari tipe sebuah data, misal; union, primitif, intersection, tuple, atau lainnya.
- Interface hanya bisa digunakan untuk objek sementara type bisa digunakan untuk mendefinisikan objek, primitif, dan lainnya.
Interface and Classes
Keyword interface sangatlah cocok digunakan untuk menambah type dalam sebuah class.
Karena kelas BMW mengimplementasi interface Car, maka BMW perlu memiliki implementasi dari fungsi identify, sekaligus boleh memiliki method atau properti tambahan lainnya.
Composed Types
Lihatlah kompleksitas susunan object berikut,
Bayangkan jika kita memiliki pohon objek dengan beberapa tingkatan, tentu akan menjadi sangat kompleks dan sulit untuk dibaca. Untuk menyederhanakannya, kita bisa membuat komposisi types, yakni dengan memasukkan satu interface ke definisi interface lainnya.
Kode di atas bisa kita sederhanakan menjadi:
Declaration Merging
Salah satu hal yang mungkin dilakukan dengan interface namun tidak dengan type adalah declaration merging. Declaration Merging terjadi saat TypeScript compiler menggabungkan dua atau lebih interface dengan nama yang sama menjadi hanya satu deklarasi saja.
Bayangkan kita memiliki dua buah interface dengan nama Book, yang memiliki properti berbeda:
Secara otomatis, TypeScript akan menggabungkan kedua deklarasi tersebut menjadi satu. Sehingga saat kita menggunakan Book unterface, kita akan memiliki kedua properti yang dideklarasikan secara terpisah.
Haltersebut tidak bisa dilakukan dengan types. Saat kita mencoba membuat dua buah types dengan nama yang sama namun dengan properti yang berbeda, TypeScript akan mengembalikan sebuah error:
Duplicate indentifier Book.Intersection
Intersection memungkinkan kita untuk mengombinasikan beberapa types menjadi satu type. Untuk membuat intersection type, kita perlu menggunakan keyword &.
Dengan kode tersebut, type book yang kita deklarasikan memiliki properti yang dimiliki oleh type Title dan Author. Kita dapat membuat sebuah type yang menggabungkan dua buah interface, namun tidak sebaliknya (menggabungkan dua type menjadi satu interface).
Kapan perlu menggunakan Type?
Generic Transformation
Gunakan type saat kamu hendak mengubah beberapa types menjadi sebuah generic type, misal:
Type Aliasing
Kita dapat menggunakan type untuk membuat sebuah alias dari type yang panjang atau rumit untuk dibaca dan diketik berulang kali, misal:
Type Capturing
Gunakan type untuk mendapatkan type dari sebuah object ketika typenya tidak diketahui, misal:
Kode di atas membuat kita mendapatkan type dari myBook yang belum diketahui, memberinya nama Book, dan menggunakannya untuk membuat type-safe object baru bernama yourBook.
Terima kasih sudah membaca! ✨ Baca juga bagian lain dari serial belajar TypeScript ini:
