Pertemuan 2 — Variable, Type, dan Union Type
Pertanyaan Pemantik
- Pernahkah kamu menyimpan data yang berbeda dalam satu variable?
- Apa yang terjadi jika tipe data berubah tanpa disadari?
- Apakah semua variable perlu ditentukan tipenya?
1. Variable: let vs const
const
Dipakai untuk nilai yang tidak berubah.
const appName: string = "Belajar TypeScript";
let
Dipakai untuk nilai yang bisa berubah.
let total: number = 0;
total = 10000;
2. Type Annotation (Menentukan Tipe Secara Jelas)
let name: string = "Nur";
let age: number = 20;
let isActive: boolean = true;
Kelebihan:
- Kode lebih jelas
- Error lebih cepat ketahuan
- Cocok untuk teamwork
3. Type Inference (TypeScript Menebak Tipe)
let city = "Jakarta"; // string
let year = 2026; // number
Selama nilai tidak berubah tipe, ini aman.
Di industri, inference sering dipakai. Tapi untuk data penting (seperti DTO di NestJS), kita biasanya lebih tegas dengan tipe.
4. Union Type (Satu Variable, Beberapa Tipe)
Union type berguna ketika data bisa datang dalam dua bentuk.
Contoh: id dari database biasanya number, tapi dari route param sering string.
let id: number | string;
id = 1;
id = "1";
❌ Ini tidak boleh:
id = true;
5. Literal Union (Union untuk Pilihan yang Dibatasi)
Ini bagus untuk status.
type OrderStatus = "pending" | "success" | "failed";
let status: OrderStatus = "pending";
status = "success";
❌ Tidak boleh:
status = "done";
6. any — Cepat, Tapi Berbahaya
let payload: any;
payload = 123;
payload = "abc";
payload = { ok: true };
Masalahnya: - TypeScript jadi “mati” - Error mudah lolos - Kode jadi susah dirawat
Di industri,
anybiasanya dilarang kecuali sangat terpaksa dan diberi alasan.
Latihan Terarah
Latihan 1 — Buat Profil User yang Benar
Buat file latihan1.ts.
Buat variable:
- username (string)
- age (number)
- isVerified (boolean)
Contoh hasil yang diharapkan:
let username: string = "nur";
let age: number = 20;
let isVerified: boolean = false;
console.log(username, age, isVerified);
Latihan 2 — ID Bisa Number atau String
Buat file latihan2.ts.
Buat variable:
- userId bertipe number | string
Lalu:
1) isi userId = 10
2) isi userId = "10"
3) coba isi userId = true dan lihat error compile
let userId: number | string;
userId = 10;
userId = "10";
// userId = true; // sengaja salah
console.log(userId);
Tantangan Logika
Tantangan 1 — Normalisasi ID
Kamu menerima id dari luar yang bisa:
- number
- string angka seperti "12"
Tugas: buat normalizeId() yang mengembalikan number.
Nama filenya challenge2.ts
Tantangan tambahan
Coba input:
console.log(normalizeId("abc"));
Pertanyaan:
1. Apa hasilnya?
2. Kenapa itu bisa terjadi?
3. Di industri, apa yang harus dilakukan kalau input tidak valid?
Tantangan 2 — Status Harus Valid
Buat type status:
type PaymentStatus = "unpaid" | "paid" | "expired";
Tugas:
1) buat variable paymentStatus bertipe PaymentStatus
2) isi dengan salah satu nilai yang valid
3) coba isi nilai yang tidak ada (mis. "done") dan lihat error
Tujuan: kamu membatasi “pilihan” agar tidak liar.
Studi Kasus Mini
Di NestJS, data dari:
- query string
- param URL
- body request
Sering datang sebagai string.
Contoh:
- qty = "3" (string)
- price = "5000" (string)
TypeScript membantu di kode, tapi tidak otomatis mengubah data input.
Di backend nanti, kita akan pakai DTO + validation untuk ini.
Pertanyaan Diskusi
- Jika
qtydatang sebagai"3", apakah TypeScript otomatis menjadikannya number? - Menurutmu, siapa yang bertugas mengubah dan memvalidasi data input di server?
Ringkasan
- Type annotation membuat tipe jelas.
- Type inference membuat kode ringkas.
- Union type menangani data yang bervariasi.
- Literal union membatasi pilihan (status).
anysebaiknya dihindari.
Tugas (Output Pertemuan 2)
Kumpulkan:
1. latihan1.ts
2. latihan2.ts
3. challenge2.ts
Refleksi Pembelajaran
Jawab singkat:
1. Apa bedanya union type dan literal union?
2. Kapan kamu butuh union type di dunia nyata?
3. Apa risiko terbesar dari any?