Deklarasi Variabel

Tujuan Pembelajaran

Setelah membaca halaman ini, kamu akan mampu:

Membedakan deklarasi dan inisialisasi variabel
Menulis deklarasi variabel dengan tipe eksplisit
Menulis deklarasi variabel tanpa tipe (type inference)
Memahami kapan variabel boleh tidak langsung diisi nilainya

Pendahuluan

Di halaman sebelumnya kita belajar bahwa variabel adalah tempat penyimpanan data. Sekarang kita akan belajar lebih dalam: bagaimana cara yang benar membuat variabel di TypeScript.

Ada beberapa cara menulis deklarasi variabel. Masing-masing cara punya kegunaan yang berbeda, dan memahami perbedaannya akan membuat kamu menjadi programmer yang lebih presisi.

Penjelasan Materi

Istilah Penting: Deklarasi vs Inisialisasi

Sebelum mulai, pahami dua istilah ini:

Deklarasi adalah proses memberitahu TypeScript bahwa variabel itu ada, beserta namanya (dan tipenya jika disebutkan).

Inisialisasi adalah proses mengisi variabel dengan nilai untuk pertama kalinya.

Keduanya bisa dilakukan sekaligus, atau terpisah.

Cara 1: Deklarasi + Inisialisasi Sekaligus (Paling Umum)

Ini adalah cara yang paling sering digunakan:

let namaSiswa: string = "Putra"
let umur: number = 17
let lulus: boolean = true

Format penulisannya:

let [namaVariabel]: [tipeData] = [nilai]

let — kata kunci untuk membuat variabel
namaSiswa — nama variabel
: string — anotasi tipe (memberitahu TypeScript bahwa variabel ini bertipe string)
= "Putra" — nilai awal variabel

Cara 2: Deklarasi Tanpa Anotasi Tipe (Type Inference)

TypeScript cukup cerdas — ia bisa menebak tipe variabel dari nilai yang diberikan:

let namaSiswa = "Putra"    // TypeScript tahu ini string
let umur = 17              // TypeScript tahu ini number
let lulus = true           // TypeScript tahu ini boolean

Cara ini lebih ringkas dan sangat umum digunakan. Kita akan membahasnya lebih dalam di halaman Type Inference.

Cara 3: Deklarasi Dulu, Isi Nanti

Terkadang kamu perlu mendeklarasikan variabel dahulu, lalu mengisinya nanti berdasarkan kondisi tertentu. Dalam kasus ini, kamu wajib mencantumkan tipe:

let nilaiAkhir: number

// ... beberapa proses terjadi ...

nilaiAkhir = 88

console.log("Nilai akhir:", nilaiAkhir)

Ilustrasi: Tiga Cara Deklarasi

CARA 1: Lengkap (dengan tipe)
┌──────────────────────────────────────────────┐
│  let  nama  :  string  =  "Putra"            │
│  ───  ────    ──────     ───────             │
│  kwd  nama   tipe        nilai               │
└──────────────────────────────────────────────┘

CARA 2: Singkat (type inference)
┌──────────────────────────────────────────────┐
│  let  nama  =  "Putra"                       │
│  ───  ────    ───────                        │
│  kwd  nama    nilai (tipe ditebak otomatis)  │
└──────────────────────────────────────────────┘

CARA 3: Deklarasi dulu
┌──────────────────────────────────────────────┐
│  let  nama  :  string                        │
│  ───  ────    ──────                         │
│  kwd  nama    tipe (nilai diisi belakangan)  │
└──────────────────────────────────────────────┘

Mari Mencoba

Buat file src/bab1/deklarasi-variabel.ts:

// Cara 1: Deklarasi dengan tipe eksplisit
let namaLengkap: string = "Dewi Rahayu"
let nilaiMatematika: number = 92
let sudahLulus: boolean = true

// Cara 2: Type inference (tipe otomatis)
let namaSekolah = "SMKS Antartika 1 Sidoarjo"
let tahunMasuk = 2023

// Cara 3: Deklarasi dulu, isi kemudian
let peringkat: number
peringkat = 1

// Tampilkan semua variabel
console.log("Nama:", namaLengkap)
console.log("Nilai Matematika:", nilaiMatematika)
console.log("Sudah lulus:", sudahLulus)
console.log("Sekolah:", namaSekolah)
console.log("Tahun masuk:", tahunMasuk)
console.log("Peringkat:", peringkat)

Jalankan:

tsx src/bab1/deklarasi-variabel.ts

Output yang diharapkan:

Nama: Dewi Rahayu
Nilai Matematika: 92
Sudah lulus: true
Sekolah: SMKS Antartika 1 Sidoarjo
Tahun masuk: 2023
Peringkat: 1

Penjelasan Baris per Baris

Baris	Penjelasan
`let namaLengkap: string = "Dewi Rahayu"`	Deklarasi variabel `namaLengkap` bertipe string dengan nilai “Dewi Rahayu”
`let nilaiMatematika: number = 92`	Variabel angka dengan nilai 92
`let sudahLulus: boolean = true`	Variabel boolean — hanya bisa berisi `true` atau `false`
`let namaSekolah = "SMKS..."`	Type inference — TypeScript otomatis tahu ini string
`let peringkat: number`	Deklarasi tanpa nilai — wajib tulis tipe
`peringkat = 1`	Mengisi nilai ke variabel yang sudah dideklarasikan

Kesalahan Umum

❌ Deklarasi tanpa tipe dan tanpa nilai

let data    // TypeScript akan memberi tipe 'any' — hindari ini

Cara memperbaiki:

let data: string   // atau
let data = ""      // type inference dari nilai kosong

❌ Mengisi nilai bertipe salah

let umur: number = "tujuh belas"  // Error!
// Type 'string' is not assignable to type 'number'

Cara memperbaiki:

let umur: number = 17   // ✓

❌ Menggunakan variabel sebelum diisi

let skor: number
console.log(skor)   // Error! Variable 'skor' is used before being assigned.

Cara memperbaiki:

let skor: number = 0
console.log(skor)   // ✓

Tips

Latihan

Buat file src/bab1/latihan-deklarasi.ts dan kerjakan:

Deklarasikan variabel judulFilm dengan tipe string dan isi dengan judul film favoritmu
Deklarasikan variabel tahunRilis menggunakan type inference (tanpa tulis tipenya)
Deklarasikan variabel rating dengan tipe number — tanpa nilai awal
Isi rating dengan nilai 8.5 di baris berikutnya
Tampilkan semua variabel

Ringkasan

Ada tiga cara deklarasi variabel: dengan tipe eksplisit, type inference, atau deklarasi dulu isi kemudian
Format lengkap: let namaVariabel: tipeData = nilai
Format singkat: let namaVariabel = nilai (type inference)
Jika deklarasi tanpa nilai awal, wajib cantumkan tipe
TypeScript akan error jika kamu menggunakan variabel sebelum diisi nilainya