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.

• Sintaks Dasar Type Annotation:

  let namaVariabel: TipeData;
  let variabelLain: TipeData = nilaiAwal;
  const konstantaIni: TipeData = nilaiKonstan;

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).

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.

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.

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:

1. TipeData[]: Tipe data elemen diikuti kurung siku.
2. Array<TipeData>: Pake generic type Array dengan tipe data elemen di dalem kurung sudut.

Dua-duanya sama aja fungsinya.

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 terpaksa
let 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!

// Tuple yang isinya string dan number
let biodata: [string, number]; 
biodata = ["Siti", 22]; // BENAR
 
// biodata = [22, "Siti"]; // ERROR! Urutan tipe salah
// biodata = ["Siti", 22, true]; // ERROR! Jumlah elemen kelebihan
 
console.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).

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 any perilakunya jadi kayak variabel JavaScript biasa yang dinamis, semua pengecekan tipe dimatiin buat variabel itu.

let apaAjaDeh: any = "Ini string";
console.log(apaAjaDeh.toUpperCase()); // Oke
 
apaAjaDeh = 123;
console.log(apaAjaDeh.toFixed(2)); // Oke
 
apaAjaDeh = 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).

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).

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).

// Dengan "strictNullChecks": true
let 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.

let namaKota = "Bandung"; // TypeScript otomatis nebak ini tipe 'string'
// namaKota = 123; // ERROR! Karena udah ditebak string
 
let 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!