Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. TypeScript

TypeScript untuk Pemula, Bagian 5: Generik

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 4: Classes

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

Tutorial kedua dalam seri TypeScript untuk Pemula kita, berfokus pada tipe data dasar yang tersedia di TypeScript. Jenis pengecekan dalam TypeScript memungkinkan kita untuk memastikan bahwa variabel dalam kode kita hanya dapat memiliki jenis nilai spesifik yang diberikan kepada mereka. Dengan cara ini kita dapat menghindari banyak kesalahan saat menulis kode karena IDE akan dapat memberi tahu kita ketika kita melakukan operasi pada tipe yang tidak didukungnya. Ini membuat pengecekan tipe menjadi salah satu fitur terbaik dari TypeScript.

Pada tutorial ini, kita akan berfokus pada fitur penting lainnya dari bahasa ini—generik. Dengan generik, TypeScript memungkinkanmuuntuk menulis kode yang dapat bertindak pada berbagai tipe data, bukan terbatas pada yang satu. Kamu akan belajar tentang perlunya generik secara rinci dan bagaimana itu lebih baik daripada hanya menggunakan tipe data any yang tersedia di TypeScript.

Kebutuhan untuk Generik

Jika tidak terbiasa dengan generik, kamu mungkin bertanya-tanya mengapa kita membutuhkannya sama sekali. Di bagian ini, saya akan menjawab pertanyaan ini untukmu. Mari kita mulai dengan menulis fungsi yang akan mengembalikan elemen acak dari array angka.

Fungsi randomElem yang baru saja kita definisikan mengambil array angka sebagai satu-satunya parameter. Tipe kembalian dari fungsinya juga telah ditetapkan sebagai suatu angka. Kita menggunakan fungsi Math.random() untuk mengembalikan nomor acak angka titik-mengambang antara 0 dan 1. Mengalikannya dengan panjang array yang diberikan dan memanggil Math.floor() pada hasil yang memberikan kita indeks acak. Setelah kita memiliki indeks acak, kita mengembalikan elemen pada indeks tertentu.

Beberapa waktu kemudian, katakanlah kamu perlu mendapatkan elemen string acak dari deretan string. Pada titik ini, kamu dapat memutuskan untuk membuat fungsi lain yang secara khusus menargetkan string.

Bagaimana jika kamu perlu untuk memilih elemen acak dari  array pada suatu interface yang kamu tetapkan? Membuat fungsi baru setiap kali kamu ingin mendapatkan elemen acak dari berbagai jenis objek yang tidak layak.

Salah satu solusi untuk masalah ini adalah mengatur tipe parameter array yang diteruskan ke fungsi-fungsi sebagai any[]. Dengan cara ini kamu hanya dapat menulis fungsimu sekali saja, dan itu akan bekerja dengan array dari semua jenis.

Seperti yang kamu lihat, kita dapat menggunakan fungsi di atas untuk mendapatkan posisi acak serta warna acak. Satu masalah utama dengan solusi ini adalah kamu akan kehilangan informasi tentang jenis nilai yang dikembalikan.

Sebelumnya, kita yakin bahwa randomPosition akan menjadi angka dan randomColor akan menjadi string. Ini membantu kita dalam menggunakan nilai-nilai ini. Sekarang, yang kita tahu adalah bahwa elemen yang dikembalikan dapat berupa tipe apa pun. Pada kode di atas, kita bisa menentukan jenis randomColor menjadi number dan tetap tidak mendapatkan kesalahan apa pun.

Solusi yang lebih baik untuk menghindari duplikasi kode sementara masih mempertahankan jenis informasi adalah dengan menggunakan generik. Berikut ini adalah fungsi umum yang mengembalikan elemen acak dari array.

Sekarang, saya akan mendapatkan kesalahan jika saya mencoba mengubah jenis randomColor dari string ke number. Ini membuktikan bahwa menggunakan generik jauh lebih aman daripada menggunakan tipe any dalam situasi semacam itu.

TypeScript Generics Error

Menggunakan Generik Mungkin Terlihat Sangat Membatasi

Bagian sebelumnya membahas bagaimana kamu dapat menggunakan generik daripada tipe any untuk menulis satu fungsi dan menghindari mengorbankan keuntungan dari pemeriksaan tipe. Satu masalah dengan fungsi generik yang telah kita tulis di bagian sebelumnya adalah bahwa TypeScript tidak akan membiarkan kita melakukan banyak operasi pada variabel yang diteruskan ke sana.

Ini karena TypeScript tidak dapat membuat asumsi tentang jenis variabel yang akan diteruskan ke fungsi generik kita sebelumnya. Akibatnya, fungsi generik kita hanya dapat menggunakan operasi yang berlaku pada semua tipe data. Contoh berikut harus membuat konsep ini lebih jelas.

Fungsi di atas akan menghapus semua kemunculan karakter yang ditentukan dari string yang diberikan. Kamu mungkin ingin membuat versi generik dari fungsi ini sehingga kamu juga dapat menghapus digit tertentu dari nomor yang diberikan serta karakter dari string. Berikut adalah fungsi generik yang sesuai.

Fungsi removeChar tidak menunjukkan kesalahan kepadamu. Namun, jika kamu menggunakan replace di dalam removeIt, TypeScript akan memberi tahumu bahwa replace tidak ada untuk tipe 'T'. Ini karena TypeScript tidak lagi dapat mengasumsikan bahwa theInput itu akan menjadi string.

Pembatasan penggunaan metode berbeda dalam fungsi generik ini mungkin membuatmu berpikir bahwa konsep generik tidak akan banyak berguna. Tidak banyak yang dapat kamu lakukan dengan beberapa metode yang harus diterapkan pada semua tipe data untuk kamu gunakan di dalam fungsi generik.

Satu hal penting yang harus kamu ingat pada titik ini adalah bahwa kamu umumnya tidak perlu membuat fungsi yang akan digunakan dengan semua jenis tipe data. Satu hal penting yang harus kamu ingat pada titik ini adalah bahwa kamu umumnya tidak perlu membuat fungsi yang akan digunakan dengan semua jenis tipe data.

Membat Fungsi Generik Menggunakan Batasan

Fungsi generik removeIt dari bagian sebelumnya menunjukkan kesalahan karena metode replace di dalamnya dimaksudkan untuk digunakan dengan string, sedangkan parameter yang dilewatkan ke itu bisa memiliki tipe data apa pun.

Kamu dapat menggunakan kata kunci extends untuk membatasi tipe data yang diteruskan ke fungsi generik dalam TypeScript. Namun, extends hanya terbatas pada interface dan class. Ini berarti bahwa sebagian besar fungsi generik yang kamu buat akan memiliki parameter yang menjangkau interface dasar atau class.

Berikut ini adalah fungsi umum yang mencetak nama orang, anggota keluarga, atau selebritis yang melewatinya.

Pada contoh di atas, kita telah menetapkan tiga interface, dan masing-masing memiliki properti name. Fungsi generik  printName yang kita buat akan menerima objek apa pun yang menjangkau People. Dengan kata lain, kamu dapat melewati keluarga atau objek selebriti ke fungsi ini, dan itu akan mencetak namanya tanpa keluhan. Kamu dapat mendefinisikan lebih banyak interface, dan selama mereka memiliki properti name, kamu akan dapat menggunakan fungsi printName tanpa masalah apa pun.

Ini adalah contoh yang sangat mendasar, tetapi kamu dapat membuat fungsi generik yang lebih berguna setelah kamu merasa lebih nyaman dengan seluruh prosesnya. Misalnya, kamu dapat membuat fungsi umum yang menghitung nilai total barang yang berbeda yang dijual dalam bulan tertentu selama setiap item memiliki properti price untuk menyimpan harga dan properti sold yang menyimpan jumlah barang yang terjual. Dengan menggunakan generik, kamu akan dapat menggunakan fungsi yang sama selama item memperluas antarmuka atau kelas yang sama.

Pemikiran Akhir

Dalam tutorial ini, saya telah mencoba untuk membahas dasar-dasar generik di TypeScript dengan cara yang ramah untuk pemula. Kita memulai artikel dengan membahas perlunya generik. Setelah itu, kami belajar tentang cara yang benar untuk menggunakan generik untuk menghindari duplikasi kode tanpa mengorbankan kemampuan pengecekan tipe. Setelah kamu memahami dasar-dasar yang dibahas di sini, kamu dapat membaca lebih lanjut tentang generik dalam dokumentasi resmi.

Jika kamu memiliki pertanyaan terkait dengan tutorial ini, saya akan dengan senang hati menjawabnya di komentar.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.