Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 1: Types

TL;DR — TypeScript dapat mengantisipasi bug pada program yang ditulis dengan JavaScript, serta membuat basis kode JavaScript lebih mudah dibaca.

Daftar Isi — Klik untuk langsung menuju ke bagian yang kamu inginkan

• Pendahuluan — skippable reading
• Type Inference — Menjaga konsistensi tipe data sebuah variable
• Any — How to skip that type–inference stuff
• Variable Type Annotation — Declaring variables’ type

Pendahuluan — skippable reading

JavaScript membuat dunia pemrograman menjadi lebih mengasyikkan untuk dieksplorasi. Sebab, dengan menguasai JavaScript saja, kamu bisa membangun aplikasi di sisi server (Backend), aplikasi sisi klien (Frontend), Aplikasi Mobile & desktop, bahkan membangun model Machine Learning.

Jika kamu sudah cukup familiar dengan sintaks JavaScript dan berpengalaman menulis program dengannya, mungkin sudah saatnya kamu bertimbang untuk meningkatkan level permainan tulis-menulis kode JavaScript–mu dengan mempelajari TypeScript.

TypeScript sendiri bukanlah sebuah bahasa pemrograman baru yang sangat berbeda dengan JavaScript, menuntut kamu untuk tahu ekosistemnya secara mendalam, dan perlu waktu yang lama untuk dipelajari. Pada dasarnya, apapun yang bisa kamu lakukan di JavaScript juga bisa dilakukan di TypeScript karena TS adalah superset dari ECMAScript.

Nah, trus kenapa perlu bertimbang untuk menulis kode dengan TypeScript alih-alih memakai JavaScript aja? Untuk tahu lebih lanjut soal itu kamu bisa baca artikel dari frontend developer panutan saya, Mas Jihad di sini:

Mengapa Typescript?

Secara ringkas, menulis program dengan TypeScript akan membuat basis kode lebih mudah dibaca (sehingga kolaborasi menulis kode lebih mudah), dan membuat program lebih aman karena TypeScript juga bisa dianggap hanya sebagai static type–checking tool.

Oke, nggak usah berpanjang lebar lagi, jadi tujuan dari serial artikel ini sendiri adalah memberikan pendahuluan yang ringkas untuk mulai menulis kode menggunakan TypeScript. Saat selesai membaca serial artikel ini kamu akan merasa lebih mudah untuk membaca basis kode TypeScript karena tahu guna dari suatu sintaks, dan bakal siap pelan-pelan bermigrasi dari JavaScript ke TypeScript. Enjoy! ✨

Type Inference — Menjaga konsistensi tipe data sebuah variabel

Kalau kamu sudah pernah membuat program dengan JavaScript sebelumnya, maka mungkin kamu sudah tahu bahwa JavaScript memungkinkan kita untuk menetapkan nilai dari sebuah variabel dengan bebas.

Lihat contoh kode ini:

Potongan kode JavaScript tersebut tidak akan menghasilkan error karena JavaScript bukanlah strongly-typed language. Sementara, Kode serupa akan menghasilkan error di TypeScript:

Hal itu karena TypeScript mengharuskan tipe data sebuah variabel selalu konsisten dengan tipe data variabel itu sendiri pada saat didelarasikan. Kemampuan TypeScript mengetahui tipe data sebuah variabel itu disebut type inference.

Maka, variabel stringVariabel hanya akan bisa diisi dengan nilai dengan tipe data string di sepanjang program, sebagaimana tipe datanya pada saat deklarasi.

Dengan kemampuan type inference itu, dan sama seperti JavaScript, TypeScript juga bisa mengetahui methods serta properti dari sebuah obyek.

Selain memungkinkan kita untuk membentuk suatu type sendiri (kita pelajari nanti), TypeScript juga mengadopsi tipe data primitif dari JavaScript:

• boolean
• number
• null
• string
• undefined

Any — How to skip that Type-Inference stuff

Meski kemampuan TypeScript untuk memastikan sebuah variabel selalu diisi dengan nilai yang tipe datanya sama itu sangat membantu, dalam kondisi tertentu mungkin kamu perlu membuat sebuah variabel dalam program bisa menerima segala jenis tipe data.

Untuk melakukan itu, caranya gampang saja: deklarasikan sebuah variabel tanpa nilai dan tanpa anotasi (Baca sampai bawah untuk tahu soal anotasi).

Penggalan kode di atas tidak akan menghasilkan error karena TypeScript menganggap variabelBebas sebagai Any yang bisa diisi dengan nilai apapun.

Variable Type Annotation — Declaring variable’s type

Nah, kadang-kadang kita mau menentukan tipe data sebuah variabel tanpa memasukkan (assigning) nilai pada saat deklarasi. Bisa karena datanya belum tersedia, misal karena diambil dari REST API, atau lainnya.

Untuk itu, kita bisa menganotasikan sebuah tipe yang kita kehendaki pada variabel saat dideklarasikan.

Dengan menggunakan colon (:) serta diikuti dengan tipe data yang diinginkan (dalam hal ini number), kita membuat variabelAngka hanya bsia diisi dengan nilai yang bertipe number di sepanjang program nantinya.

Kode di atas akan menghasilkan error karena nilai baru yang akan dimasukkan ke variabelAngka bertipe string sementara variabelAngka sudah direservasi untuk number saja. Selain dengan tipe data primitif, Kamu juga bisa menganotasikan sebuah variabel dengan tipe data buatan sendiri. Akan kita pelajari nanti!

Terima kasih sudah membaca! ✨ Baca juga bagian lain dari serial Belajar TypeScript ini:

1. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 1: Types
2. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 2: Functions
3. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 3: Complex Types
4. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 4: Union Types & Type Narrowing
5. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 5: Advanced Object Types