Mulai memberi 'label' pada datamu! Pelajari cara mendeklarasikan variabel dengan tipe data eksplisit di TypeScript dan kenali tipe-tipe dasar seperti string, number, boolean, array, tuple, enum, any, unknown, void, null, dan undefined.
17m bacaanKuis WajibMicro Badge Lesson
Ngasih "Label" ke Data: Kenalan Sama Tipe-Tipe Dasar di TypeScript!
Udah berhasil nyiapin "penerjemah" TypeScript (tsc) dan file konfigurasinya (tsconfig.json)? Keren! Sekarang, saatnya kita mulai ngasih "label" atau tipe data ke variabel-variabel kita. Ini adalah inti dari kekuatan TypeScript!
Inget kan, di JavaScript biasa (yang dynamically typed), tipe data variabel itu baru ketauan pas program jalan dan bisa berubah-ubah. Nah, di TypeScript (yang statically typed), kita bisa (dan sangat disarankan buat) nentuin tipe data variabel secara eksplisit pas kita deklarasiin.
Type Annotation: "Ini Lho Tipe Dataku!"
Cara kita ngasih tau TypeScript tipe data sebuah variabel itu namanya Type Annotation. Sintaksnya gampang: setelah nama variabel (atau parameter fungsi, atau sebelum return type fungsi), kita kasih titik dua (:) diikuti nama tipe datanya.
Yuk, kita kenalan sama beberapa tipe data dasar yang sering dipake di TypeScript!
1. string: Buat Teks dan Kalimat
Sama kayak di JavaScript, tipe string dipake buat nyimpen data teks. Ditulis di antara kutip tunggal ('...'), kutip ganda ("..."), atau backtick (`...` buat template literals).
typescript
let namaLengkap: string = "Budi Sanjaya";let pesanSelamat: string = `Halo, ${namaLengkap}!`; // Template literal juga string// namaLengkap = 123; // ERROR! TypeScript bakal protes karena 123 bukan string
2. number: Buat Angka Bulat dan Desimal
Tipe number dipake buat semua jenis angka, baik itu integer (bilangan bulat) maupun floating-point (bilangan desimal). Gak ada beda antara int atau float di TypeScript, semuanya number.
typescript
let umur: number = 28;let harga: number = 1500.99;let jumlah: number = -10;// umur = "dua puluh delapan"; // ERROR! "dua puluh delapan" bukan number
3. boolean: Buat Nilai Benar atau Salah
Tipe boolean cuma punya dua kemungkinan nilai: true atau false.
typescript
let sudahLogin: boolean = true;let lampuMenyala: boolean = false;// sudahLogin = "iya"; // ERROR! "iya" bukan boolean
4. Array: Buat Kumpulan Data Sejenis (atau Campuran)
Buat ngedefinisiin tipe untuk array (kumpulan nilai), ada dua cara umum:
TipeData[]: Tipe data elemen diikuti kurung siku.
Array<TipeData>: Pake generic type Array dengan tipe data elemen di dalem kurung sudut.
Dua-duanya sama aja fungsinya.
typescript
let daftarAngka: number[] = [1, 2, 3, 4, 5];let daftarNama: Array<string> = ["Adi", "Budi", "Citra"];// daftarAngka.push("enam"); // ERROR! "enam" bukan number// daftarNama.push(123); // ERROR! 123 bukan string// Array dengan tipe campuran (kurang disarankan kalau bisa dihindari, tapi bisa)// Biasanya pake union type (nanti dibahas) atau any kalau terpaksalet dataCampur: (string | number | boolean)[] = ["Halo", 100, true];let dataApaAja: any[] = ["Teks", 50, false, {id: 1}]; // Pake 'any' kalau isinya bener-bener gak bisa diprediksi
5. Tuple: Array dengan "Aturan Main" Jumlah dan Tipe Elemen Tetap
Tuple itu kayak array spesial yang jumlah elemennya udah ditentuin dan tipe data buat tiap posisi elemennya juga udah ditentuin. Urutannya penting!
typescript
// Tuple yang isinya string dan numberlet biodata: [string, number]; biodata = ["Siti", 22]; // BENAR// biodata = [22, "Siti"]; // ERROR! Urutan tipe salah// biodata = ["Siti", 22, true]; // ERROR! Jumlah elemen kelebihanconsole.log(biodata[0].substring(0,2)); // "Si" (metode string bisa dipake)console.log(biodata[1].toFixed(2)); // "22.00" (metode number bisa dipake)
Tuple ini berguna kalau kamu punya data yang strukturnya udah pasti, kayak pasangan koordinat [number, number].
6. Enum (Enumeration): Bikin Sekumpulan Konstanta Bernama yang Berhubungan
Enum ngasih kita cara buat ngasih nama yang lebih gampang diinget ke sekumpulan nilai konstanta numerik (atau string).
typescript
enum Warna { Merah, // Secara default nilainya 0 Hijau, // Nilainya 1 Biru // Nilainya 2}let warnaFavorit: Warna = Warna.Hijau;console.log(warnaFavorit); // Output: 1 (nilai numeriknya)console.log(Warna[1]); // Output: Hijau (bisa juga dapet namanya dari nilainya)enum KodeStatus { Sukses = 200, ErrorKlien = 400, ErrorServer = 500}let statusRespons: KodeStatus = KodeStatus.Sukses;console.log(statusRespons); // Output: 200
Enum ngebantu bikin kode lebih terbaca, misalnya pas kerja sama kode status, hari dalam seminggu, dll.
7. any: Tipe "Sakti" yang Bisa Jadi Apa Aja (HATI-HATI!)
Tipe any ini kayak ngasih tau TypeScript, "Udah deh, TS, jangan urusin tipe data variabel ini, biarin aja dia bisa jadi apa aja." Variabel dengan tipe anyperilakunya jadi kayak variabel JavaScript biasa yang dinamis, semua pengecekan tipe dimatiin buat variabel itu.
typescript
let apaAjaDeh: any = "Ini string";console.log(apaAjaDeh.toUpperCase()); // OkeapaAjaDeh = 123;console.log(apaAjaDeh.toFixed(2)); // OkeapaAjaDeh = true;// apaAjaDeh.iniMetodeGakAda(); // Ini bakal error pas runtime, tapi TypeScript gak protes pas kompilasi!
Kapan Pake any?
Pas kamu bener-bener gak tau tipe datanya apa (misal, data dari API pihak ketiga yang strukturnya dinamis banget).
Pas lagi migrasi proyek JavaScript gede ke TypeScript pelan-pelan.
TAPI, SEBISA MUNGKIN HINDARI PENGGUNAAN any! Karena dia ngilangin semua manfaat utama TypeScript (deteksi error tipe). Kalau kamu kebanyakan pake any, ya sama aja kayak ngoding JavaScript biasa lagi. Lebih baik pake tipe yang lebih spesifik, atau unknown kalau emang bener-bener gak tau.
8. unknown: Saudaranya any yang Lebih Aman
unknown ini mirip any karena dia bisa nerima nilai tipe apa aja. TAPI, bedanya, kamu gak bisa langsung ngelakuin operasi apa pun ke variabel bertipe unknown tanpa ngecek tipenya dulu (pake type guard kayak typeof, instanceof, atau type assertion).
typescript
let nilaiGakJelas: unknown = "Mungkin string, mungkin angka";// console.log(nilaiGakJelas.toUpperCase()); // ERROR! TS gak tau nilaiGakJelas punya metode toUpperCase()if (typeof nilaiGakJelas === "string") { console.log(nilaiGakJelas.toUpperCase()); // Oke, di dalem if ini TS tau dia string} else if (typeof nilaiGakJelas === "number") { console.log(nilaiGakJelas.toFixed(2)); // Oke}
unknown lebih aman daripada any karena "maksa" kita buat lebih hati-hati sama tipe data.
9. void: Buat Fungsi yang Gak Ngembaliin Apa-Apa
Tipe void biasanya dipake sebagai return type buat fungsi yang gak nge-return nilai apa pun (atau nge-return undefined secara implisit).
typescript
function sapaSelamatPagi(): void { console.log("Selamat Pagi!"); // Gak ada return statement, atau return; aja}
10. null dan undefined: Tipe Mereka Sendiri
Di TypeScript, null dan undefined itu punya tipenya masing-masing: null dan undefined.
Secara default (kalau opsi strictNullChecks di tsconfig.json itu false), null dan undefined bisa di-assign ke variabel bertipe apa aja (misal, let nama: string = null;).
TAPII, kalau kamu ngaktifin "strictNullChecks": true (yang jadi bagian dari "strict": true dan sangat direkomendasikan!), maka null dan undefined cuma bisa di-assign ke variabel yang tipenya any, unknown, atau yang secara eksplisit ngebolehin null atau undefined (pake union type, misal string | null).
typescript
// Dengan "strictNullChecks": truelet namaBolehNull: string | null = "Budi";namaBolehNull = null; // Oke// let namaHarusString: string = null; // ERROR! Tipe 'null' gak bisa di-assign ke 'string'.
Ini ngebantu banget ngindarin error "cannot read property 'x' of undefined/null" yang sering kejadian di JavaScript.
11. never: Buat Sesuatu yang Gak Mungkin Terjadi
Tipe never ngewakilin nilai yang gak bakal pernah terjadi. Biasanya dipake buat:
Return type fungsi yang dijamin selalu throw error.
Return type fungsi yang punya infinite loop.
Jarang banget dipake langsung sama pemula.
Type Inference: TypeScript yang Pinter Nebak!
Meskipun kita bisa (dan seringkali bagus buat) nulis tipe data secara eksplisit, TypeScript juga punya fitur Type Inference. Artinya, kalau kamu ngasih nilai awal ke variabel pas deklarasi, TypeScript seringkali udah cukup pinter buat nebak tipe data variabel itu secara otomatis.
typescript
let namaKota = "Bandung"; // TypeScript otomatis nebak ini tipe 'string'// namaKota = 123; // ERROR! Karena udah ditebak stringlet jumlahPenduduk = 1000000; // TypeScript nebak ini 'number'let dataDitemukan = false; // TypeScript nebak ini 'boolean'
Kapan Sebaiknya Tetep Nulis Tipe Eksplisit?
Pas deklarasi variabel tanpa nilai awal: let namaFile: string;
Buat parameter fungsi dan return type fungsi: Ini praktik yang sangat baik buat kejelasan dan dokumentasi.
Kalau tipe datanya kompleks atau TypeScript mungkin salah nebak (jarang terjadi buat tipe dasar).
Dengan ngasih "label" tipe data ke variabel dan fungsionalitas kita, TypeScript ngebantu kita nulis kode yang lebih aman, lebih jelas, dan lebih gampang di-maintain. Awalnya mungkin kerasa nambah kerjaan, tapi manfaat jangka panjangnya gede banget, apalagi buat proyek yang makin kompleks.
Biasain diri buat mikirin tipe data dari tiap nilai yang kamu pake. Ini bakal jadi kebiasaan bagus seorang programmer yang solid!
Checkpoint KuisTarget: 70%
Kuis Tipe Data Dasar TypeScript
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
