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 2: Jenis Data Dasar

Read Time: 10 mins
This post is part of a series called TypeScript for Beginners.
TypeScript for Beginners, Part 1: Getting Started
TypeScript for Beginners, Part 3: Interfaces

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Setelah membaca tutorial pengantar TypeScript, Anda sekarang harus dapat menulis kode TypeScript Anda sendiri di IDE yang mendukungnya dan kemudian mengkompilasinya ke JavaScript. Dalam tutorial ini, Anda akan belajar tentang berbagai tipe data yang tersedia di TypeScript.

JavaScript memiliki tujuh jenis data yang berbeda: Null, Undefined, Boolean, Number, String, Symbol (diperkenalkan di ES6), dan Object. TypeScript mendefinisikan beberapa jenis lagi, dan semuanya akan dibahas secara rinci dalam tutorial ini.

Tipe Data Null

Sama seperti di JavaScript, tipe data null di TypeScript hanya memiliki satu nilai valid: null. Variabel null tidak dapat berisi tipe data lain seperti angka dan string. Menetapkan variabel ke null akan menghapus isinya jika memang ada.

Ingat bahwa ketika flag strictNullChecks diset ke true di tsconfig.json, hanya nilai null yang dapat ditentukan untuk variabel dengan tipe null. Flag ini dimatikan secara default, yang berarti Anda juga bisa menugaskan nilai null ke variabel dengan tipe lain seperti number atau void.

Tipe Data Undefined

Variabel mana pun yang nilainya tidak Anda tetapkan maka ditetapkan ke undefined. Namun, Anda juga dapat secara eksplisit mengatur jenis variabel menjadi undefined, seperti pada contoh berikut.

Perlu diingat bahwa variabel dengan type yang ditetapkan ke undefined hanya dapat memiliki nilai undefined sebagai nilainya. Jika opsi strictNullChecks diset ke false, Anda juga akan dapat menetapkan undefined ke variabel dengan jenis angka dan string, dll.

Tipe Data Void

Tipe data void digunakan untuk menandakan kurangnya type dari variabel. Menetapkan variabel untuk memiliki tipe void mungkin tidak terlalu berguna, namun Anda dapat mengatur jenis fungsi kembalian yang tidak mengembalikan apapun ke void. Bila digunakan dengan variabel, tipe void hanya dapat memiliki dua nilai yang valid: null dan undefined.

Tipe Data Boolean

Berbeda dengan tipe data number dan string, boolean hanya memiliki dua nilai yang valid. Anda hanya bisa menetapkan nilainya baik ke true atau false. Nilai-nilai ini banyak digunakan pada struktur kontrol dimana satu bagian kode dieksekusi jika kondisi true dan potongan kode lainnya dijalankan jika false.

Berikut adalah contoh yang sangat mendasar untuk mendeklarasikan variabel Boolean:

Tipe Data Number

Tipe data number digunakan untuk mewakili bilangan bulat dan nilai floating-point dalam JavaScript dan juga TypeScript. Namun, Anda harus ingat bahwa semua nomor diwakili secara internal sebagai nilai floating-point. Number juga dapat ditentukan sebagai literatur Heksadesimal, Oktal atau Biner. Ingatlah bahwa representasi Oktal dan Biner diperkenalkan di ES6, dan ini dapat menghasilkan keluaran kode JavaScript yang berbeda berdasarkan versi yang Anda targetkan.

Ada juga tiga nilai simbolis khusus tambahan yang termasuk dalam tipe number: +Infinity, -Infinity, dan NaN. Berikut adalah beberapa contoh penggunaan tipe number.

Bila versi target diatur ke ES6, kode di atas akan dikompilasi ke JavaScript berikut:

Anda harus mencatat bahwa variabel JavaScript masih dinyatakan menggunakan let, yang diperkenalkan di ES6. Anda juga tidak melihat pesan kesalahan yang terkait dengan type variabel yang berbeda karena kode JavaScript tidak memiliki pengetahuan tentang jenis yang kami gunakan dalam kode TypeScript.

Jika versi target diatur ke ES5, kode TypeScript yang kami tulis sebelumnya akan dikompilasi ke JavaScript berikut:

Seperti yang bisa Anda lihat, kali ini semua kemunculan kata kunci let telah diubah menjadi var. Perhatikan juga bahwa number oktal dan biner telah diubah menjadi bentuk desimalnya.

Tipe Data String

Tipe data string digunakan untuk menyimpan informasi tekstual. Baik JavaScript dan TypeScript menggunakan tanda petik ganda (") serta tanda kutip tunggal (') untuk mengelilingi informasi tekstual Anda sebagai string. String dapat berisi karakter nol atau lebih yang disertakan dalam tanda petik.

TypeScript juga mendukung string template atau template literal. Literal template ini memungkinkan Anda menyematkan ekspresi di dalam string. Literal template ditutupi oleh karakter tanda centang belakang (`), bukan tanda petik ganda dan tanda kutip tunggal yang menyertakan string biasa. Mereka diperkenalkan di ES6. Ini berarti bahwa Anda akan mendapatkan keluaran JavaScript yang berbeda berdasarkan versi yang Anda targetkan. Berikut adalah contoh penggunaan literal template di TypeScript:

Setelah kompilasi, Anda akan mendapatkan JavaScript berikut ini:

Seperti yang Anda lihat, template literal diubah menjadi string biasa di ES5. Contoh ini menunjukkan bagaimana TypeScript memungkinkan Anda untuk menggunakan semua fitur JavaScript terbaru tanpa khawatir kompatibilitas.

Tipe Data Array dan Tuple

Anda dapat menentukan tipe array dengan dua cara yang berbeda dalam JavaScript. Pada metode pertama, Anda menentukan jenis elemen array diikuti oleh [] yang menunjukkan sebuah array dari jenis itu. Metode lain adalah dengan menggunakan array tipe generik Array<elemType>. Contoh berikut menunjukkan bagaimana membuat array dengan kedua metode ini. Menentukan null atau undefined sebagai salah satu elemen akan menghasilkan kesalahan saat flag strictNullChecks bernilai true.

Tipe data tupel memungkinkan Anda membuat array dimana jenis elemen angka tetap diketahui sebelumnya. Jenis elemen lainnya hanya bisa menjadi salah satu tipe yang telah Anda tentukan untuk tupel. Berikut adalah contoh yang akan membuatnya lebih jelas:

Untuk semua tupel dalam contoh kita, kita telah menetapkan type elemen pertama ke sebuah number dan type elemen kedua pada sebuah string. Karena kita hanya menentukan type untuk dua elemen pertama, sisanya bisa berupa string atau angka. Membuat tupel b dan c menghasilkan kesalahan karena kita mencoba menggunakan string sebagai nilai untuk elemen pertama ketika kita telah menyebutkan bahwa elemen pertama adalah sebuah angka.

Demikian pula, kita tidak bisa mengatur nilai elemen tupel menjadi false setelah menentukan bahwa ia hanya akan berisi string dan angka. Itu sebabnya baris terakhir menghasilkan kesalahan.

Tipe Data Enum

Tipe data enum hadir dalam banyak bahasa pemrograman seperti C dan Java. Telah hilang dari JavaScript, tapi TypeScript memungkinkan Anda untuk membuat dan bekerja dengan enum. Jika Anda tidak tahu apa itu enum, mereka memungkinkan Anda membuat koleksi nilai terkait menggunakan nama yang mudah diingat.

Secara default, penomoran enum dimulai pada 0, namun Anda juga dapat menetapkan nilai yang berbeda untuk anggota pertama atau anggota lainnya secara manual. Hal ini akan mengubah nilai semua anggota yang mengikuti mereka dengan meningkatkan nilainya sebesar 1. Anda juga bisa mengatur semua nilai secara manual dalam sebuah enum.

Berbeda dengan contoh sebelumnya, nilai Animals[3] adalah undefined kali ini. Ini karena nilai 3 akan diberikan pada dog, tapi kami secara eksplisit menetapkan nilainya menjadi 11. Nilai untuk cow bertahan pada 12 dan bukan 3 karena nilainya seharusnya lebih besar dari nilai anggota terakhir.

Tipe Any dan Never

Misalkan Anda menulis sebuah program dimana nilai variabel ditentukan oleh pengguna atau kode yang tertulis di perpustakaan pihak ketiga. Dalam kasus ini, Anda tidak dapat mengatur jenis variabel dengan benar. Variabel itu bisa berupa tipe seperti string, number, atau boolean. Masalah ini bisa diatasi dengan menggunakan tipe any. Ini juga berguna saat Anda membuat array dengan elemen tipe campuran.

Dalam kode di atas, kami dapat menetapkan angka ke b dan kemudian mengubah nilainya menjadi string tanpa mendapatkan kesalahan karena jenisnya dapat menerima jenis dari nilai any.

Tipe never digunakan untuk mewakili nilai yang tidak seharusnya terjadi. Misalnya, Anda dapat menetapkan never sebagai jenis pengembalian fungsi yang tidak pernah kembali. Hal ini bisa terjadi bila sebuah fungsi selalu melempar kesalahan atau saat macet dalam perulangan tak terbatas.

Pemikiran Akhir

Tutorial ini mengenalkan Anda pada semua jenis yang tersedia di TypeScript. Kita belajar bagaimana menugaskan jenis nilai variabel yang berbeda akan menunjukkan kesalahan pada TypeScript. Pemeriksaan ini dapat membantu Anda menghindari banyak kesalahan saat menulis program besar. Kita juga belajar bagaimana menargetkan berbagai versi JavaScript.

Jika Anda mencari sumber daya tambahan untuk dipelajari atau digunakan dalam pekerjaan Anda, lihat apa yang tersedia di pasar Envato.

Pada tutorial berikutnya, Anda akan belajar tentang antarmuka di TypeScript. Jika ada pertanyaan terkait tutorial ini, beri tahu saya 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.