Alias Tipe dan Antarmuka

Selamat datang di pelajaran berikutnya! Dalam pelajaran ini, Anda akan mempelajari alias tipe dan antarmuka dalam TypeScript, termasuk perbedaan, kesamaan, dan kapan masing-masing digunakan. Mari kita mulai!

Apa Itu Alias Tipe?

Alias tipe memungkinkan Anda menentukan nama khusus untuk sebuah tipe. Alias ini dapat mewakili tipe primitif, objek, atau bahkan deklarasi fungsi.

Contoh:

Tugas: Buat alias tipe untuk objek yang mewakili sebuah buku dan gunakan alias tersebut untuk menentukan sebuah variabel.

type Point = {
  x: number;
  y: number;
};

let point: Point = { x: 10, y: 20 };
console.log(point); 
// Output: { x: 10, y: 20 }

Apa Itu Antarmuka?

Antarmuka menentukan struktur sebuah objek, termasuk properti dan metodenya. Antarmuka sering digunakan untuk memastikan konsistensi dan keamanan tipe pada objek.

Contoh:

Tugas: Buat antarmuka untuk profil user dan gunakan antarmuka tersebut untuk menentukan sebuah variabel.

interface Point {
  x: number;
  y: number;
}

let point: Point = { x: 5, y: 15 };
console.log(point); 
// Output: { x: 5, y: 15 }

Kesamaan Alias Tipe dan Antarmuka

Alias tipe dan antarmuka memiliki beberapa kesamaan:

• Keduanya dapat menjelaskan bentuk sebuah objek.
• Keduanya dapat digunakan untuk menentukan tipe fungsi.
• Keduanya mendukung perluasan tipe lain.

Contoh: Tipe fungsi:

Tugas: Definisikan alias tipe dan antarmuka untuk sebuah fungsi, lalu gunakan keduanya.

type Add = (a: number, b: number) => number;
interface Subtract {
  (a: number, b: number): number;
}

let add: Add = (x, y) => x + y;
let subtract: Subtract = (x, y) => x - y;

console.log(add(5, 3)); 
// Output: 8
console.log(subtract(5, 3)); 
// Output: 2

Perbedaan Alias Tipe dan Antarmuka

Berikut perbedaan utamanya:

• Antarmuka: Dapat di-merged (penggabungan deklarasi).
• Alias Tipe: Tidak dapat di-merged.
• Alias Tipe: Dapat menentukan tipe gabungan dan tipe irisan.
• Antarmuka: Terutama dirancang untuk bentuk objek.

Contoh: Tipe gabungan dengan alias tipe:

Tugas: Gunakan alias tipe untuk menentukan tipe gabungan dan menetapkan berbagai nilai ke sebuah variabel.

type StringOrNumber = string | number;

let value: StringOrNumber = "Hello";
value = 42;
// value = true; 
// Error: Type 'true' is not assignable to type 'StringOrNumber'.

Memperluas Tipe dan Antarmuka

Alias tipe dan antarmuka dapat memperluas tipe lain:

• Antarmuka: Gunakan kata kunci extends.
• Alias Tipe: Gunakan irisan (&).

Contoh:

Tugas: Perluas alias tipe dan antarmuka untuk membuat tipe baru.

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

type Bird = Animal & { canFly: boolean };

let myDog: Dog = { name: "Buddy", breed: "Golden Retriever" };
let myBird: Bird = { name: "Parrot", canFly: true };

console.log(myDog, myBird);

Penggabungan Deklarasi

Antarmuka mendukung penggabungan deklarasi, yaitu beberapa deklarasi antarmuka dengan nama yang sama digabungkan menjadi satu. Alias tipe tidak mendukung fitur ini.

Contoh:

Tugas: Buat dua deklarasi antarmuka dengan nama yang sama dan uji penggabungan deklarasi.

interface Person {
  name: string;
}

interface Person {
  age: number;
}

let person: Person = { name: "Alice", age: 30 };
console.log(person); 
// Output: { name: "Alice", age: 30 }

Kapan Menggunakan Masing-Masing

Berikut beberapa panduannya:

• Gunakan antarmuka untuk menentukan bentuk objek dan ketika penggabungan deklarasi diperlukan.
• Gunakan alias tipe untuk tipe gabungan, tipe irisan, atau ketika menentukan tipe fungsi.

Kiat: Gunakan yang paling sesuai dengan kebutuhan Anda agar kode tetap jelas dan konsisten!

Bagus Sekali!

Selamat! Anda telah mempelajari kesamaan dan perbedaan antara alias tipe dan antarmuka dalam TypeScript, serta kapan masing-masing digunakan. Dalam pelajaran berikutnya, kita akan menjelajahi fitur lanjutan TypeScript seperti tipe kondisional. Mari terus menulis kode!