Types dalam TypeScript

Setelah kemarin kenalan sama TypeScript, di artikel ini kamu akan kenalan sama types di TypeScript, apa aja perbedaannya dan apa fungsinya.

Oh ya, ini adalah artikel kedua dari TypeScript 101, jadi kalau kamu belum baca artikel sebelumnya, kamu bisa baca artikel sebelumnya disini.

Mulai dari yg mungkin udah kamu kenal, di TypeScript ada type string, number, boolean, array, any, unknown, void dan never. Aku yakin kamu udah tau artinya beberapa type tadi, tapi mungkin agak asing sama sisanya. Jadi penjelasan soal 4 type yg pertama bakal aku cepetin aja.

String, Number, Boolean dan Array

Ini simpel, string seperti namanya adalah type yg bisa menerima karakter di TypeScript, number juga sama yaitu menerima angka, boolean menerima value true / false dan array bisa menerima kumpulan dari beberapa type tadi. Contoh penggunaan nya gini:

const nama: string = "Udin"
const umur: number = 20
const programmer: boolean = true
const hobi: string[] = ["Ngoding", "Main Game"]

Nah, khusus yg array itu pake syntax <type>[]. Jadi kalau kamu pengen bikin array dari number, ya nulisnya number[]. Kalau masih kurang jelas, ini penjelasan tentang semua type tadi pake gambar:

Kayaknya ini udah cukup buat perkenalan types yg sering kamu pake, jadi sekarang saatnya belajar tentang any.

Any, Type yg Sebaiknya Dihindari

any adalah salah satu type yg sebaiknya dihindari pas nulis TypeScript. Kenapa gitu?

Pada dasarnya, any ngebuat TypeScript gk ngecek variabel itu. Jadi, kamu bisa ngelakuin apa aja ke variabel itu, bahkan kalau harusnya gk bisa dan ngasih error. Contohnya gini:

const angka1: number = 10
const angka2: any = 16

angka1.toUppecCase() // Ini bakal Error karena TypeScript tau kalau gk ada toUpperCase() di dalam type "number"

angka2.toUpperCase() // Ini gk bakal Error karena TypeScript gk tau angka2 adalah type "number" dan nganggep kalau toUpperCase() itu ada.

Nah yg terjadi disini tuh, TypeScript ngeliat kalau angka1 nyoba buat manggil toUpperCase() dan ngasih Error karena toUpperCase() itu gk ada di type number setelah dicek sama TypeScript. Tapi di angka2, TypeScript ngebolehin itu karena variabel angka2 itu punya type any yg artinya bikin TypeScript gk ngecek variabel itu. Jadi kalau kamu manggil angka2.nama juga pasti gk bakal ada Error dari TypeScript (walaupun pas runtime, pasti hasilnya undefined).

Tapi, kadang kita emang butuh type kayak any, contohnya pas mau bikin function yg tipe argumennya gk diketahui. Nah, disinilah unknown muncul.

Unknown, Pengganti Any yg Lebih Type Safe

Simpelnya, unknown itu mirip kayak any yaitu bisa nerima value dengan type apapun, perbedaannya adalah variabel dengan typeunknown gk bisa ngelakuin apapun, selama belum dilakukan Type Narrowing.

Type Narrowing adalah salah satu teknik di TypeScript untuk membuat type suatu variabel menjadi lebih spesifik.

Coba lihat contoh ini:

const nama: unknown = "Udin"

name.toUpperCase() // Ini bakal Error, karena belum ada Type Narrowing

// Kita akan ngelakuin Type Narrowing dengan ngecek apakah value dari nama itu sesuai dengan type string
if(typeof nama === "string") {
	console.log(nama.toUpperCase()) // Ini gk bakal Error, karena udah Type Narrowing.
}

Disini, variabel nama punya type unknown dan bisa dikasih value apapun, tapi kamu gk bisa pake variabel nama sebelum ngelakuin Type Narrowing, setelah kamu udah pastiin kalau nama itu punya type string, barulah kamu bisa pake method toUpperCase().

Dengan unknown kamu masih bisa nerima semua value dan tetep dapet type safety gk kayak any.

Void dan Never di TypeScript

void dan never bisa dibilang agak unik, karena mereka berdua jarang banget kepake dan kesannya agak useless, walaupun tetep ada kasus dimana void dan never ini bisa berguna.

Langsung aja, void adalah sebuah type yg menandakan kalau sebuah function itu gk me-return apapun. void nyaris cuman dipakai pas kamu bikin function doang. Ini karena gk ada gunanya buat ngasih type void ke variabel. Ini contoh penggunaan nya:

function ucapSelamatPagi(nama: string): void {
	console.log("Selamat pagi " + nama)
}

ucapSelamatPagi("Udin")

Kamu bisa lihat kalau function ucapSelamatPagi() gk me-return apapun dan hanya ngelakuin console.log() aja. Kalau kamu coba buat me-return sesuatu di function nya, maka TypeScript akan ngasih kamu error karena type void itu gk boleh me-return sesuatu.

Type never sedikit lebih tricky buat dipake dan mungkin agak susah dimengerti, tapi intinya, type never berfungsi buat ngasih tau kalau sebuah function itu gk pernah selesai atau selalu melempar error, contohnya gini:

function selaluError(message: string): never {
	throw new Error(message)
}

selaluError("Ini Error")

Disini, selaluError() akan selalu melempar error yg membuat function nya gk pernah selesai. Ini adalah tempat yg pas buat ngasih type never. Kalau menurutmu masih susah dimengerti, tenang aja, never jarang banget kepake dan kamu harusnya udah cukup jago di TypeScript kalau sampai ketemu kasus dimana kamu harus pake never.

Oke, mungkin segitu aja dulu. Aku niatnya pengen kasih penjelasan juga tentang object, tapi kayaknya itu bisa dibahas di artikel selanjutnya. Kalau kamu suka sama artikel ini, kamu bisa share ke temen kamu yg mungkin pengen belajar TypeScript. Sampai ketemu di artikel selanjutnya!