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.