7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. TypeScript

TypeScript Untuk Pemula, Bagian 3: Interface

Read Time: 6 mins
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 2: Basic Data Types
TypeScript for Beginners, Part 4: Classes

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Kita memulai seri ini dengan tutorial pengantar yang mengenalkanmu ke berbagai fitur TypeScript. Ini juga mengajarkanmu cara menginstal TypeScript dan menyarankan beberapa IDE yang dapat kamu gunakan untuk menulis dan mengkompilasi kode TypeScript-mu sendiri.

Pada tutorial kedua, kita membahas berbagai tipe data yang tersedia di TypeScript dan bagaimana menggunakannya agar dapat membantumu menghindari banyak kesalahan. Menetapkan tipe data seperti string ke variabel tertentu memberitahu TypeScript bahwa kamu hanya ingin menetapkan string untuk itu. Mengandalkan informasi ini, TypeScript dapat menunjukkannya kepadamu nanti ketika kamu mencoba untuk melakukan operasi yang tidak seharusnya dilakukan pada string.

Pada tutorial ini, kamu akan belajar tentang interface di  TypeScript. Dengan interface, kamu dapat melangkah lebih jauh dan menentukan struktur atau jenis objek yang lebih kompleks dalam kodemu. Sama seperti jenis variabel sederhana, objek ini juga harus mengikuti serangkaian aturan yang dibuat olehmu. Ini dapat membantmu menulis kode dengan lebih percaya diri, dengan sedikit kemungkinan kesalahan.

Membuat Interface Pertama Kita

Katakanlah Anda memiliki objek danau dalam kode Anda, dan Anda menggunakannya untuk menyimpan informasi tentang beberapa danau terbesar menurut wilayah di seluruh dunia. Objek danau ini akan memiliki properti seperti nama danau, wilayahnya, panjang, kedalaman, dan negara-negara di mana danau itu ada.

Nama-nama danau akan disimpan sebagai string. Panjang danau ini akan berada dalam kilometer, dan daerah-daerah akan berada dalam kilometer persegi, tetapi kedua sifat ini akan disimpan sebagai angka. Kedalaman Danau akan dalam meter, dan ini juga bisa menjadi mengambang.

Karena semua Danau ini sangat besar, garis pantai mereka umumnya tidak terbatas pada satu negara. Kita akan menggunakan sebuah array dari string untuk menyimpan nama-nama dari semua negara di garis pantai Danau tertentu. Boolean dapat digunakan untuk menentukan apakah danau air asin atau air tawar. Kode snippet berikut menciptakan sebuah antarmuka untuk objek danau.

Antarmuka Lakes berisi jenis masing-masing properti yang kita akan menggunakan sementara membuat objek Danau kami. Jika Anda sekarang mencoba untuk menetapkan jenis nilai ke salah satu sifat-sifat ini, Anda akan mendapatkan kesalahan. Berikut adalah contoh yang menyimpan informasi tentang Danau pertama kami.

Seperti yang Anda lihat, urutan yang Anda tetapkan nilai ke properti ini tidak masalah. Namun, Anda tidak bisa mengabaikan nilai. Anda akan memiliki untuk menetapkan nilai ke setiap properti untuk menghindari kesalahan saat kompilasi kode.

Dengan cara ini, mentranskripsikan memastikan bahwa Anda lakukan tidak melewatkan salah satu nilai yang diperlukan oleh kesalahan. Berikut adalah contoh di mana kita lupa untuk menetapkan nilai properti kedalaman untuk sebuah danau.

Gambar di bawah menunjukkan pesan kesalahan dalam Visual Studio kode setelah kita lupa untuk menentukan kedalaman. Seperti yang Anda lihat, kesalahan dengan jelas menunjukkan bahwa kita kehilangan properti kedalaman untuk objek danau.

Missing Property Values in TypeScript InterfaceMissing Property Values in TypeScript InterfaceMissing Property Values in TypeScript Interface

Membuat properti antarmuka opsional

Kadang-kadang, Anda mungkin perlu sebuah properti hanya untuk beberapa objek tertentu. Sebagai contoh, katakanlah Anda ingin menambahkan sebuah properti untuk menentukan bulan di mana sebuah danau yang beku. Jika Anda menambahkan properti secara langsung ke antarmuka, seperti yang telah kita lakukan sampai sekarang, Anda akan mendapatkan kesalahan untuk danau yang tidak membeku dan karena itu memiliki properti tidak beku. Demikian pula, jika Anda menambahkan properti ke danau yang dibekukan tetapi tidak dalam deklarasi antarmuka, Anda masih akan mendapatkan kesalahan.

Dalam kasus tersebut, Anda dapat menambahkan tanda tanya (?) setelah nama properti sebagai opsional dalam deklarasi antarmuka. Dengan cara ini, Anda tidak akan mendapatkan kesalahan hilang properti atau properti tidak diketahui. Contoh berikut harus membuat jelas.

Menggunakan tanda tangan indeks

Opsional sifat berguna ketika beberapa dari objek Anda akan menggunakannya. Namun, bagaimana jika masing-masing danau juga telah mengatur sendiri unik properti seperti kegiatan ekonomi, penduduk jenis flora dan fauna yang berkembang di danau itu, atau pemukiman di sekitar Danau? Menambahkan begitu banyak sifat yang berbeda di dalam deklarasi antarmuka sendiri dan membuat mereka pilihan yang tidak ideal.

Sebagai solusi, mentranskripsikan memungkinkan Anda untuk menambahkan properti ke objek-objek tertentu dengan bantuan indeks tanda tangan. Menambahkan tanda tangan indeks untuk Deklarasi antarmuka memungkinkan Anda untuk menentukan sejumlah properti untuk objek yang berbeda yang Anda ciptakan. Anda perlu untuk membuat perubahan berikut ke antarmuka.

Dalam contoh ini, saya telah menggunakan indeks tanda tangan untuk menambahkan informasi tentang berbagai pemukiman di sekitar danau. Sejak masing-masing danau akan memiliki pemukiman sendiri, menggunakan opsional properti tidak akan mungkin ide yang baik.

Sebagai contoh lain, katakanlah Anda membuat game dengan berbagai jenis musuh. Semua musuh ini akan memiliki beberapa sifat umum seperti ukuran dan kesehatan mereka. Properti ini dapat dimasukkan dalam deklarasi antarmuka langsung. Jika setiap kategori musuh ini memiliki seperangkat unik senjata, senjata tersebut dapat dimasukkan dengan bantuan indeks tanda tangan.

Properti hanya-baca

Ketika bekerja dengan benda-benda yang berbeda, Anda mungkin perlu untuk bekerja dengan sifat-sifat yang hanya dapat diubah ketika kita pertama kali membuat objek. Anda dapat menandai properti ini sebagai readonly dalam deklarasi antarmuka. Hal ini mirip dengan menggunakan kata kunci const, tetapi const harus digunakan dengan variabel, sementara readonly dimaksudkan untuk properti.

TypeScript juga memungkinkan Anda membuat array read-only dengan menggunakan ReadonlyArray<T>. Membuat array read-only akan mengakibatkan penghapusan semua metode mutasi dari itu. Hal ini dilakukan untuk memastikan bahwa Anda tidak dapat mengubah nilai dari unsur-unsur individu kemudian. Berikut adalah contoh menggunakan properti hanya-baca dan array dalam deklarasi antarmuka.

Fungsi dan antarmuka

Anda juga dapat menggunakan antarmuka untuk menggambarkan jenis fungsi. Hal ini mengharuskan Anda untuk memberikan fungsi tanda panggilan dengan daftar parameter dan kembali jenis. Anda juga perlu menyediakan jenis dan nama untuk setiap parameter. Berikut adalah contoh:

Dalam kode di atas, kami telah mendeklarasikan antarmuka fungsi dan menggunakannya untuk mendefinisikan fungsi yang mengurangi kerusakan yang ditangani ke tangki dari kesehatannya. Seperti yang Anda lihat, Anda tidak harus menggunakan nama yang sama untuk parameter dalam deklarasi antarmuka dan definisi untuk kode untuk bekerja.

Pikiran Akhir

Tutorial ini memperkenalkan Anda ke antarmuka dan bagaimana Anda dapat menggunakannya untuk memastikan bahwa Anda menulis kode yang lebih kuat. Anda sekarang harus mampu menciptakan antarmuka Anda sendiri dengan sifat opsional dan hanya-baca.

Anda juga belajar bagaimana menggunakan indeks tanda tangan untuk menambahkan berbagai properti lainnya ke objek yang tidak termasuk dalam deklarasi antarmuka. Tutorial ini dimaksudkan untuk Anda mulai dengan antarmuka di mentranskripsikan, dan Anda dapat membaca lebih lanjut tentang topik ini di dokumentasi resmi.

Dalam tutorial berikutnya, Anda akan belajar tentang kelas mentranskripsikan. Jika Anda memiliki pertanyaan yang berkaitan dengan antarmuka, let me know di komentar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.