Pengantar Antarmuka TypeScript untuk Pemula
Antarmuka TypeScript adalah fitur hebat yang memungkinkan Anda menentukan struktur objek, memastikan objek mematuhi persyaratan bentuk tertentu. Panduan ini akan memperkenalkan Anda pada dasar-dasar antarmuka TypeScript, termasuk cara menentukan dan menggunakannya secara efektif.
Apa itu Antarmuka?
Antarmuka dalam TypeScript adalah cara untuk menggambarkan bentuk suatu objek. Antarmuka memungkinkan Anda untuk menentukan properti dan metode apa yang harus dimiliki suatu objek, serta jenisnya. Antarmuka membantu Anda menegakkan konsistensi dan kejelasan dalam kode Anda.
Mendefinisikan Antarmuka
Untuk mendefinisikan antarmuka, gunakan kata kunci interface
diikuti dengan nama antarmuka dan bentuk objek:
interface Person {
name: string;
age: number;
}
Dalam contoh ini, antarmuka Person
menetapkan bahwa objek Person
harus memiliki name
bertipe string
dan age
bertipe number
.
Menggunakan Antarmuka
Setelah Anda mendefinisikan antarmuka, Anda dapat menggunakannya untuk memeriksa jenis objek, parameter fungsi, dan mengembalikan nilai. Ini memastikan bahwa objek sesuai dengan bentuk yang ditentukan.
Menggunakan Antarmuka dengan Objek
Berikut ini cara menggunakan antarmuka Person
untuk memeriksa tipe suatu objek:
const person: Person = {
name: "Alice",
age: 30
};
Dalam contoh ini, objek person
mematuhi antarmuka Person
, yang memastikan ia memiliki name
dan age
dengan tipe yang benar.
Menggunakan Antarmuka dengan Fungsi
Antarmuka juga dapat digunakan untuk memeriksa tipe parameter fungsi dan mengembalikan nilai:
function greet(person: Person): string {
return `Hello, ${person.name}!`;
}
Dalam contoh ini, fungsi greet
menerima parameter bertipe Person
dan mengembalikan pesan salam.
Properti Opsional
Antarmuka dapat menyertakan properti opsional dengan menggunakan pengubah ?
. Ini menunjukkan bahwa properti tersebut mungkin ada atau tidak:
interface Person {
name: string;
age: number;
email?: string;
}
Dalam contoh ini, email
adalah properti opsional yang boleh atau tidak boleh disertakan dalam objek Person
.
Properti Hanya Baca
Anda juga dapat mendefinisikan properti sebagai hanya-baca, yang berarti properti tidak dapat dimodifikasi setelah inisialisasi:
interface Person {
readonly name: string;
age: number;
}
Dalam contoh ini, properti name
bersifat hanya-baca dan tidak dapat diubah setelah ditetapkan.
Memperluas Antarmuka
Antarmuka dapat memperluas antarmuka lain, yang memungkinkan Anda membangun berdasarkan bentuk yang sudah ada:
interface Employee extends Person {
employeeId: number;
}
Dalam contoh ini, antarmuka Employee
memperluas antarmuka Person
dengan menambahkan properti employeeId
.
Kesimpulan
Antarmuka TypeScript merupakan fitur mendasar untuk mendefinisikan dan menerapkan bentuk objek dalam kode Anda. Dengan menggunakan antarmuka, Anda dapat memastikan konsistensi, meningkatkan keterbacaan kode, dan memanfaatkan kemampuan pengecekan tipe TypeScript yang canggih. Mulailah menggabungkan antarmuka ke dalam proyek TypeScript Anda untuk membuat kode yang lebih tangguh dan mudah dipelihara.