Object, Type Alias & Properti Opsional
Menulis bentuk object dengan tipe, memberi nama memakai type alias, properti opsional (?), readonly, object bersarang, dan index signature.
Tipe object
Data di aplikasi nyata hampir selalu berbentuk object: pengguna, produk, pesanan. TypeScript membiarkanmu menjelaskan bentuk object itu — properti apa saja dan tipenya.
const produk: { id: number; nama: string; harga: number } = {
id: 1,
nama: "Buku TypeScript",
harga: 85000,
}
produk.harga = 90000 // ✅
produk.stok // ❌ Property 'stok' does not exist
produk.nama = 123 // ❌ Type 'number' is not assignable to type 'string'
Typo seperti produk.hrga langsung ketahuan — salah satu penyelamat terbesar TypeScript.
Type alias: memberi nama pada tipe
Menulis bentuk object berulang-ulang itu melelahkan. Pakai type untuk memberinya nama, lalu pakai nama itu di mana-mana:
type Produk = {
id: number
nama: string
harga: number
}
const buku: Produk = { id: 1, nama: "Buku TS", harga: 85000 }
const kaos: Produk = { id: 2, nama: "Kaos Dev", harga: 120000 }
function tampil(p: Produk): string {
return `${p.nama} — Rp${p.harga}`
}
Konvensi: nama tipe diawali huruf kapital (PascalCase).
Properti opsional (?)
Tanda tanya setelah nama properti berarti properti itu boleh tidak ada. Tipe nilainya otomatis menjadi T | undefined.
type Pengguna = {
nama: string
email: string
telepon?: string // opsional
}
const a: Pengguna = { nama: "Ani", email: "ani@mail.com" } // ✅ tanpa telepon
const b: Pengguna = { nama: "Budi", email: "b@mail.com", telepon: "0812" } // ✅
console.log(a.telepon.length) // ❌ 'a.telepon' is possibly 'undefined'
console.log(a.telepon?.length) // ✅ optional chaining → undefined bila kosong
console.log(a.telepon ?? "-") // ✅ nilai cadangan
readonly: tidak boleh diubah
type Akun = {
readonly id: number // hanya boleh diisi saat dibuat
saldo: number
}
const akun: Akun = { id: 7, saldo: 1000 }
akun.saldo += 500 // ✅
akun.id = 8 // ❌ Cannot assign to 'id' because it is a read-only property
Object bersarang
type Alamat = { kota: string; kodePos: string }
type Pelanggan = {
nama: string
alamat: Alamat // tipe lain dipakai sebagai tipe properti
tag: string[]
}
const p: Pelanggan = { nama: "Sari", alamat: { kota: "Bandung", kodePos: "40111" }, tag: ["vip"] }
console.log(p.alamat.kota)
Index signature: kunci dinamis
Kalau nama propertinya tidak diketahui sebelumnya (kamus, peta nilai), pakai index signature:
type Nilai = { [mapel: string]: number }
const rapor: Nilai = { matematika: 90, bahasa: 85 }
rapor.fisika = 78 // ✅ properti baru bertipe number
rapor.kimia = "bagus" // ❌
Ada cara yang lebih rapi untuk ini, yaitu Record<string, number> (bab 15).
Pemeriksaan properti berlebih
Saat membuat object literal langsung, properti yang tidak ada di tipe dianggap kesalahan — biasanya itu typo:
const p2: Produk = { id: 3, nama: "Topi", harga: 50000, warna: "merah" }
// ❌ Object literal may only specify known properties, and 'warna' does not exist in type 'Produk'
Kesalahan umum pemula
- Memakai tipe
objectatau{}yang terlalu longgar — jelaskan bentuknya dengan benar. - Lupa memberi
?pada properti yang memang boleh kosong, lalu mengisinya denganundefinedsecara paksa. - Memisahkan properti dengan koma/titik koma secara tidak konsisten — keduanya boleh, pilih satu gaya (di kursus ini baris baru atau titik koma).