Object Types — TypeScript

Kamu bisa menentukan bentuk object dengan type annotation: let user: { nama: string; umur: number } = { nama: "Budi", umur: 17 }; Optional properties dengan…

Object type menulis bentuk sebuah object: property apa saja yang harus ada, dan type isi masing-masing. Bayangin formulir pendaftaran. Ada kolom wajib, ada kolom yang ditandai "opsional", dan ada kolom yang terkunci setelah diisi. Object type adalah formulir kosongnya, dan object adalah formulir yang sudah diisi: TypeScript mengecek isiannya cocok dengan formulir itu.

🧪 Tebakan cepat: type-nya minta nama dan umur. Object { nama: "Budi", umur: 17, hobi: "futsal" } punya keduanya, plus satu property lagi. Diterima atau ditolak? Tebak dulu, jawabannya ada di bagian "Isi yang kurang, salah, atau lebih".

Menulis bentuk object

let user: { nama: string; umur: number } = { nama: "Budi", umur: 17 };

console.log(user.nama); // Budi

{ nama: string; umur: number } sesudah titik dua adalah object type: tiap property ditulis nama: type, dipisah titik koma.
Sesudah = baru object-nya: tiap property ditulis nama: isi, dipisah koma.
TypeScript tahu user.nama itu string. Salah ketik user.nmaa ditolak: Property 'nmaa' does not exist on type '{ nama: string; umur: number; }'. ts(2339).

Isi yang kurang, salah, atau lebih

Ini kata TypeScript untuk empat object di bawah type { nama: string; umur: number }, sama seperti di Lab:

Object	Kata TypeScript
`{ nama: "Budi", umur: 17 }`	gak ada error
`{ nama: "Budi", umur: "17" }`	`Type 'string' is not assignable to type 'number'. ts(2322)`
`{ nama: "Budi" }`	`Property 'umur' is missing in type '{ nama: string; }' but required in type '{ nama: string; umur: number; }'. ts(2741)`
`{ nama: "Budi", umur: 17, hobi: "futsal" }`	`Object literal may only specify known properties, and 'hobi' does not exist in type '{ nama: string; umur: number; }'. ts(2353)`

Salah type: "17" teks, padahal umur minta angka.
Kurang: umur gak ada, padahal wajib (required).
Lebih: hobi gak ada di type. Itu jawaban tebakannya: ditolak. Object yang ditulis langsung gak boleh punya property yang gak dikenal, karena property asing biasanya salah ketik, misalnya umr padahal maksudnya umur.

Property opsional dengan ?

let user: { nama: string; umur?: number } = { nama: "Budi" };

console.log(user.umur); // undefined

Tanda ? sesudah nama property artinya property itu opsional: boleh ada, boleh gak. Object tanpa umur sekarang diterima.
Karena bisa gak ada, type user.umur jadi number | undefined, dibaca "number atau undefined". Tanda | dibahas di materi Union & Literal.
Jadi sebelum dipakai sebagai angka, TypeScript minta dicek dulu. user.umur.toFixed(0) ditolak: 'user.umur' is possibly 'undefined'. ts(18048).

readonly: terkunci setelah diisi

let user: { readonly nama: string; umur: number } = { nama: "Budi", umur: 17 };

user.umur = 18;    // boleh
user.nama = "Ani";

readonly di depan nama property artinya isinya cuma boleh dibaca setelah object dibuat.
Baris terakhir ditolak: Cannot assign to 'nama' because it is a read-only property. ts(2540).
Sama seperti readonly di array, ini cuma dicek sebelum jalan. Di JavaScript hasil compile kata itu hilang, dan kalau tetap dijalankan, nama benar-benar jadi "Ani".

⚠️ Jebakan yang sering ketemu

Type ditulis sebagai isi. let user = { nama: string, umur: number }; ditolak dengan 'string' only refers to a type, but is being used as a value here. ts(2693). Type ditaruh sesudah titik dua di samping nama variabel, isinya sesudah =.
Angka ditulis sebagai teks. Di latihan, user.umur dinilai harus angka 17. umur: "17" gagal dua kali: isinya bukan angka, dan pemeriksa TypeScript di latihan menolaknya dengan error TS2322.
Lupa type annotation. let user = { nama: "Budi", umur: 17 }; sah, TypeScript menebak bentuknya sendiri. Tapi latihan ini memeriksa kodemu memakai type annotation, jadi tulis object type-nya.
Mengira ? dan readonly berlaku waktu jalan. Keduanya cuma aturan untuk TypeScript. Data dari server yang gak punya nama tetap masuk tanpa protes.

TL;DR: Object type ditulis { nama: string; umur: number } sesudah titik dua, lalu object-nya { nama: "Budi", umur: 17 } sesudah =. Property yang salah type (ts(2322)), kurang (ts(2741)), atau lebih (ts(2353)) ditolak. umur?: number membuat property opsional, dan type-nya jadi number | undefined, jadi cek dulu sebelum dipakai. readonly nama: string melarang nama diganti (ts(2540)). Semua aturan ini cuma dicek sebelum jalan.