Belajar TypeScript 3: Complex Types

TL;DR — Selain mendukung Type Annotation dengan tipe data dan nilai primitif, TypeScript juga memungkinkan kita untuk menggunakan tipe data serta nilai yang lebih kompleks seperti Object dan Array. Kita bahkan bisa mendefinisikan sendiri Complex Types yang memenuhi kebutuhan kita.

Tulisan ini adalah bagian ketiga dari sebuah serial mempelajari TypeScript untuk pemula. Kamu bisa membaca tulisan sebelumnya melalui tautan berikut:

• Belajar TypeScript 1: Type and Type Annotations
• Belajar TypeScript 2: Menulis Functions

Daftar Isi — Klik untuk menuju ke bagian yang kamu inginkan

• Intro–Skippable Writing
• Array Type Annotation
• Multi–Dimentional Array
• Tuples
• TypeScript Type Alias
• TypeScript Function Type Alias
• Enums
• Generic Types

Intro — Skippable Writing

Dalam JavaScript, sebuah primitive (nilai atau tipe data) adalah sebuah data yang bukan merupakan Object dan tidak memiliki methods. Ada 7 tipe data primitif yang dikenali oleh JavaScript; string, number, bigint, boolean, undefined, symbol, dan null. Kamu bisa melihat informasi lebih lengkap mengenai primitif di halaman yang disediakan oleh Mozilla ini:

Primitive - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Pada bagian sebelumnya dari serial tulisan ini telah dibahas bahwa kita bisa mendefinisikan tipe data dari nilai yang bisa dimasukkan ke dalam sebuah variabel atau dikenal dengan Type Annotation. Dalam tulisan ini, secara spesifik kita akan mempelajari bagaimana cara menulis Custom Complex Types untuk digunakan dalam program yang kita tulis.

Array Type Annotation

Untuk membuat sebuah array dengan Type tertentu, kita hanya perlu menambahkan tanda kurung siku ([]) setelah jenis type yang diinginkan dalam sebuah Type Annotation.

let names: string[] = ['Amal','Rania']
let ages: number[] = [19,21]

Kurung siku pada baris pertama dari penggalan kode di atas akan membuat variabel names hanya akan menerima nilai berupa Array yang berisikan string. Sementara kurung siku pada barus kedua akan membuat variabel ages hanya bisa diisi dengan Array yang berisikan angka.

Lalu, bagaimana jika kita perlu membuat sebuah Array yang bisa diisi dengan string atau angka sekaligus? Kita bisa melakukannya dengan Union Type (ingkat istilah Union pada konsep himpunan) yang akan kita bahas pada bagian selanjutnya dari serial Belajar TypeScript ini.

Multi–Dimentional Arrays

Kita juga bisa membuat sebuah Array hanya bisa diisi dengan Array lainnya (Multi–Dimentional Array) dengan cara yang kurang lebih sama, yaitu menambahkan kurung siku setelah Array yang kita definisikan.

Type Annotation di atas ekuivalen dengan penulisan (string[])[]. Lalu, apakah bisa juga kita membuat sebuah variabel hanya bisa menerima nilai berupa Array yang juga hanya bisa diisi dengan Array lainnya yang boleh berisi string atau angka?

Tentu bisa! Kita bahas di bagian selanjutnya mengenai Union Type.

Tuples

Meski kita bisa membuat sebuah Array yang dapat menerima beberapa tipe data sekaligus dengan Union Type, ada kasus di mana kita perlu memastikan suatu tipe data menempati index tertentu yang kita inginkan dalam Array tersebut.

Misalnya saat kita ingin membuat sebuah Array berisi data seorang Mahasiswa yang terdiri dari [firstName, lastName, age, isActive] secara berurutan dan tidak boleh tertukar urutannya.

Untuk kebutuhan seperti itu, Array biasa sudah tidak relevan digunakan. Kita perlu menggunakan Tuples yang sebetulnya sangat lazim dikenal dalam bahasa pemrograman lain seperti Python. Meski secara default JavaScript tidak mendukung konsep tuples, TypeScript membuatnya menjadi mungkin.

Caranya adalah dengan mengisi kurung siku [] dengan tipe data yang kita inginkan secara berurutan.

Seperti yang terlihat di atas, selain mengharuskan tipe data tertentu berada pada index tertentu dari Tuple, elemen pembentuknya pun harus lengkap juga.

Nah, meski Tuple dan Array ini secara sekilas mirip, keduanya sebetulnya adalah entitas yang berbeda di TypeScript. Maka kita tidak bisa mengisi sebuah variabel ber-type tuple dengan Array. meskipun tipe data, urutan, serta panjangnya sama.

TypeScript Type Alias

Nah sekarang kita akan mulai masuk belajar membuat Custom Type. Bayangkan saat kamu memiliki sebuah struktur Type yang akan digunakan berulang kali dalam program yang kamu tulis. Maka pendekatan apa yang paling tepat dilakukan?

Benar. Abstraksi.

Tentu tidak efektif sekali jika kita perlu mendefinisikan strukturnya terus-menerus setiap membuat sebuah variabel.

Cukup definisikan sekali, lalu panggil definisi tersebut setiap kali struktur yang sama dibutuhkan.

Cara mendefinisikan sebuah custom object type adalah dengan membuat Alias dengan ‘type’

TypeScript Function Type Alias

Kita juga bisa membuat Function Type Alias. Gunanya adalah untuk mengabstraksi bentuk dari sebuah fungsi; baik parameter yang bisa diterima, serta bentuk keluarannya. Lihat contoh kode di bawah ini.

type NumArrayToNum = (ArrayOfNumber: number[]) => number

Baris kode di atas membuat fungsi yang dianotasikan dengan type tersebut hanya bisa menerima satu buah parameter berupa Array berisi angka, serta membuat keluaran angka saja.

let sumNumbers: NumArrayToNum = (numbers:number[]) => {  return numbers.reduce((a,b) => a + b,0) }

Enums

Saat kita menganotasikan sebuah variabel dengan suatu tipe data primitif, maka sebetulnya akan ada kemungkinan tak terbatas mengenai nilai yang bisa mengisi variabel tersebut.

Katakanlah begini:

let nama: string;

Berapa banyak nama yang kita bisa buat untuk mengisi variabel ‘nama’? Tak terbatas. Semua nilai yang bentuknya adalah string bisa mengisi ‘nama’.

Padahal dalam kasus tertentu, kita ingin membatasi kemungkinan nilai yang bisa dimasukkan ke dalam sebuah variabel. Nah di sinilah peran Enum kita butuhkan.

Di balik layar, TypeScript memproses enum type ini dengan angka. Setiap nilai yang didefinisikan di dalam sebuah tipe enum diberi angka sesuai urutannya.

Kita bisa melakukan ini:

mealTime = 0
//yang bernilai sama dengan
mealTime = Meals.Breakfast
//Secara berurutan, Lunch dan Dinner memiliki nilai 1 dan 2

Kita juga bisa menentukan nilai angka dimulainya urutan

atau bahkan kita juga bisa memberi nilai angka pada masing-masing tipe

Sayangnya, Numeric Enums ini masih rentan terhadap bug. Sebab, saat kita memasukkan sembarang angka pada Numeric Enum, tidak akan ada type error yang ditampilkan.

mealTime = 1233321233 //Tidak terjadi type error

Maka kita sangat disarankan untuk selalu menggunakan string Enum. Untuk membuatnya, cukup mendefinisikan nilai dari type yang kita buat di dalam sebuah Enum.

Generic Types

Generic Types di TypeScript ini adalah cara membuat sebuah koleksi dari type dengan kemiripan tertentu. Lihatlah contoh kode di bawah ini

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

1. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 1: Types
2. Belajar TypeScript 2: Menulis Functions
3. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 3: Complex Types (Artikel ini)
4. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 4: Union Types & Type Narrowing (Segera)
5. Tingkatkan Permainan JavaScript–mu: Belajar TypeScript 5: Advanced Object Types (Segera)