Pelajaran modul (1/2)
Ketik Alias vs Antarmuka
Di TypeScript, kita dapat mendefinisikan struktur objek kompleks dengan dua cara utama: menggunakan Antarmuka (interface) atau Jenis Alias (type). Keduanya berfungsi untuk mendeskripsikan "bentuk" suatu objek atau struktur data, namun keduanya memiliki beberapa perbedaan mendasar.
Antarmuka (interface)
Antarmuka mendefinisikan kontrak untuk struktur suatu objek. Ini adalah alat standar untuk mendeskripsikan bentuk objek dan API publik dengan cara yang dapat diperluas.
interface Book {
title: string;
pages: number;
author?: string; // Optional property (can be omitted)
}
const myBook: Book = {
title: 'The Lord of the Rings',
pages: 1200,
};Tanda tanya (?) menandai properti sebagai opsional. Objek myBook tetap valid meskipun properti author dihilangkan.
Ketik Alias (type)
Alias tipe memungkinkan Anda mengaitkan nama baru dengan tipe apa pun yang sudah ada, termasuk tipe primitif, gabungan, tupel, atau seluruh struktur objek.
type Point = {
x: number;
y: number;
};
const coordinates: Point = { x: 10, y: 20 };Perbedaan Utama: Penggabungan Perpanjangan dan Deklarasi
Meskipun interface dan type dapat dipertukarkan untuk sebagian besar kasus penggunaan biasa, keduanya menunjukkan dua perbedaan penting:
1. Ekstensibilitas (Warisan)
Antarmuka diperluas menggunakan kata kunci extends:
interface User {
username: string;
}
interface Admin extends User {
privileges: string[];
}Tipe alias tidak dapat diperluas menggunakan extends, namun dapat digabungkan menggunakan operator intersection (&):
type User = {
username: string;
};
type Admin = User & {
privileges: string[];
};2. Deklarasi Penggabungan
Beberapa antarmuka dengan nama yang sama dalam cakupan yang sama secara otomatis digabungkan oleh kompiler:
interface User {
name: string;
}
interface User {
email: string;
}
// Now User has both 'name' and 'email'!Perilaku ini tidak didukung oleh alias tipe: mendeklarasikan type yang sama dua kali akan memicu kesalahan waktu kompilasi.
Cobalah sendiri
Latihan 1: Antarmuka Pengguna
Tentukan antarmuka bernama Pengguna yang menjelaskan objek pengguna. Antarmuka harus berisi: id sebagai nomor, nama pengguna sebagai string, dan email sebagai string opsional.
Tunjukkan petunjuk
Gunakan sintaks email?: string untuk menandainya sebagai opsional.
Solusi tersedia setelah 3 upaya
Latihan 2: Alias Tipe Point2D
Buat alias tipe bernama Point2D yang mewakili titik dua dimensi dengan koordinat x dan y (keduanya angka).
Tunjukkan petunjuk
Gunakan tipe sintaks Point2D = { x: number; kamu: nomor; };
Solusi tersedia setelah 3 upaya
Latihan 3: Memperluas Antarmuka
Tentukan antarmuka bernama Produk dengan id (angka) dan harga (angka). Selanjutnya, tentukan antarmuka bernama DiscountedProduct yang memperluas Produk dan menambahkan properti opsional bernama discountCode (string).
Tunjukkan petunjuk
Gunakan extends Product untuk mewarisi bidang, dan tambahkan discountCode?: string.
Solusi tersedia setelah 3 upaya
Latihan 4: Konfigurasi Server
Tentukan alias tipe bernama ServerConfig yang mewakili objek konfigurasi untuk server. Itu harus berisi: host (string), port (angka), dan useHttps sebagai bidang boolean opsional.
Tunjukkan petunjuk
Gunakan tipe sintaksis ServerConfig = { host: string; pelabuhan: nomor; useHttps?: boolean; }.
Solusi tersedia setelah 3 upaya