Tipe Objek

Mendefinisikan bentuk objek, properti opsional dengan ?, dan modifier readonly.

Daftar isi

Objek menyatukan beberapa nilai dalam satu wadah, dan setiap anggotanya disebut properti. TypeScript mengetik objek berdasarkan bentuknya, yaitu daftar nama properti beserta tipe masing-masing. Topik ini membahas penulisan tipe objek, properti opsional dengan tanda tanya, serta modifier readonly yang melindungi properti dari penugasan ulang.

Tipe objek sebagai bentuk data#

Tipe objek ditulis dengan kurung kurawal yang memuat pasangan nama properti dan tipe, dipisahkan titik koma. Penulisan { judul: string; selesai: boolean } menyatakan objek dengan tepat dua properti tersebut. TypeScript memeriksa kesesuaian berdasarkan bentuk (shape) ini, sehingga objek dengan nama properti dan tipe yang sama dianggap kompatibel tanpa memandang asalnya.

Berkas berikut menyimpan satu tugas dari aplikasi catatan sebagai objek yang dianotasi langsung.

ts catatan-tugas.ts

const tugas: { judul: string; selesai: boolean } = {
  judul: "Susun laporan praktikum",
  selesai: false,
};

console.log(tugas.judul);
console.log(tugas.selesai);

text Keluaran

Susun laporan praktikum
false

Akses properti ditulis dengan tanda titik, dan hasilnya bertipe sesuai deklarasinya. Apabila ada properti wajib yang tidak disertakan dalam objek, compiler menolak objek tersebut dengan pesan yang menyebut properti yang kurang. Pemeriksaan berbentuk inilah yang membuat tipe objek menjadi sarana dokumentasi sekaligus pengaman.

Tipe objek juga boleh bersarang, yaitu properti yang tipenya objek lain. Penulisan { posisi: { x: number; y: number } } menyatakan properti posisi yang wajib memuat dua angka tersebut. Pemeriksaan berlaku sampai ke tingkat terdalam, sehingga properti bersarang yang kurang ataupun bertipe salah sama-sama ditolak. Sarang yang bertingkat membuat deklarasi cepat panjang, sehingga objek yang dipakai di banyak tempat biasanya diberi nama tipe tersendiri.

Properti opsional dengan tanda tanya#

Tanda tanya setelah nama properti menyatakan properti itu boleh tidak ada. Penulisan deskripsi?: string sama maknanya dengan deskripsi: string | undefined, yaitu berisi string ketika ada dan undefined ketika tidak. Karena itu, membaca properti opsional tanpa pemeriksaan terlebih dahulu berisiko memproses undefined.

Berkas berikut membaca properti opsional, lalu memeriksanya sebelum metode teks dipanggil.

ts tugas-opsional.ts

const tugas: { judul: string; tenggat: string; deskripsi?: string } = {
  judul: "Uji ulang modul kalkulator",
  tenggat: "2026-11-12",
  deskripsi: "Fokus pada pembagian dengan nol",
};

const deskripsi = tugas.deskripsi;

console.log(deskripsi);

if (deskripsi !== undefined) {
  console.log(deskripsi.toUpperCase());
}

text Keluaran

Fokus pada pembagian dengan nol
FOKUS PADA PEMBAGIAN DENGAN NOL

Nilai properti opsional disalin ke variabel deskripsi terlebih dahulu, lalu diperiksa terhadap undefined sebelum metode toUpperCase dipanggil. Pemeriksaan sederhana ini cukup karena compiler memperlakukan hasilnya sebagai jaminan tipe di dalam blok if. Pola serupa berlaku untuk properti wajib yang berasal dari sumber luar, misalnya data yang diuraikan dari teks.

Tanda tanya hanya berlaku pada anggota tipe objek, bukan pada variabel biasa, karena sifat boleh tidak ada memang khas anggota struktur. Properti opsional yang boleh berisi undefined diperiksa dengan perbandingan !== undefined sebelum dipakai, dan pola inilah yang tampak pada berkas di atas. Apabila properti opsional diteruskan ke fungsi yang parameternya wajib, compiler menolaknya sampai pemeriksaan dilakukan. Dengan begitu, ketiadaan nilai tidak pernah lolos diam-diam ke bagian program lain.

Modifier readonly#

Kata kunci readonly di depan nama properti melarang penugasan ulang setelah objek dibuat. Larangan ini bekerja pada waktu pemeriksaan saja, sehingga compiler menolak perubahan, sedangkan berkas hasil kompilasi tidak memuat perlindungan apa pun. Properti tanpa readonly tetap boleh diubah kapan saja.

ts konfigurasi-readonly.ts

const konfigurasi: {
  readonly host: string;
  readonly port: number;
  timeout: number;
} = {
  host: "localhost",
  port: 8080,
  timeout: 5000,
};

konfigurasi.timeout = 10000;

console.log(konfigurasi.host);
console.log(konfigurasi.timeout);

text Keluaran

localhost
10000

Properti timeout tanpa readonly diubah dari 5000 menjadi 10000 tanpa keluhan. Kedua properti hanya berbeda pada anotasinya, sehingga hasilnya mudah dibandingkan. Untuk menunjukkan sisi larangannya, berkas berikut mencoba mengubah properti host yang dianotasi readonly.

ts readonly-salah.ts

// tidak-dijalankan
const konfigurasi: { readonly host: string; timeout: number } = {
  host: "localhost",
  timeout: 5000,
};

konfigurasi.host = "127.0.0.1";

bash

# menampilkan pesan error tanpa mengeksekusi berkas
tsc --noEmit readonly-salah.ts

text Keluaran

readonly-salah.ts(7,13): error TS2540: Cannot assign to 'host' because it is a read-only property.

Kode error TS2540 menyebut langsung sifat read-only properti tersebut. Perlu dicatat bahwa readonly hanya melindungi properti itu sendiri, bukan isi objek bersarang di dalamnya, karena perlindungan tidak diterapkan berjenjang. Perlindungan penuh pada waktu runtime memerlukan mekanisme lain, misalnya Object.freeze dari JavaScript.

Penggunaan readonly juga bermanfaat pada tanda tangan fungsi. Parameter yang dianotasi readonly menjamin tidak ada properti yang diubah selama pemrosesan, sehingga pemanggil dapat membagikan objeknya dengan tenang. Perjanjian semacam ini tidak menambah kode sama sekali, tetapi mencegah banyak data berubah tanpa sengaja.

Kesalahan umum#

Kesalahan pertama adalah memuat properti tidak dikenal pada objek literal. Compiler menolaknya karena kemungkinan besar properti itu salah ketik. Pemeriksaan ini hanya berlaku pada objek literal yang ditulis langsung, sebagaimana dijelaskan pada catatan sebelumnya, dan berkas berikut menunjukkan pesannya.

ts excess-salah.ts

// tidak-dijalankan
const piket: { nama: string; hari: string } = {
  nama: "Citra",
  hari: "Senin",
  bulan: "November",
};

bash

# menampilkan pesan error tanpa mengeksekusi berkas
tsc --noEmit excess-salah.ts

text Keluaran

excess-salah.ts(5,3): error TS2353: Object literal may only specify known properties, and 'bulan' does not exist in type '{ nama: string; hari: string; }'.

Pesan error menyebut properti bulan tidak dikenal pada tipe sasarannya. Perbaikannya ada dua arah, yaitu menghapus properti yang salah ketik atau menambahkannya ke tipe bila memang diperlukan. Apabila properti itu memang tidak selalu ada, tanda tanya pada tipenya adalah solusi yang tepat.

Kesalahan kedua adalah memperlakukan properti opsional sebagai properti wajib. Pemanggilan metode langsung pada properti opsional gagal ketika properti itu tidak ada, dan error runtime yang muncul tidak mengarah ke anotasi tipenya. Selalu periksa terhadap undefined sebelum properti opsional dipakai, sebagaimana pola pada bagian properti opsional.

Kesalahan ketiga adalah menandai semua properti sebagai opsional hanya agar deklarasinya mudah ditulis. Tipe dengan banyak properti opsional nyaris tidak menjamin apa pun, sehingga pemeriksaan tersebar ke setiap pemakaiannya. Properti yang wajib ada sebaiknya tetap wajib, dan tanda tanya hanya untuk kebolehan yang benar-benar dimaksudkan. Dengan pembagian yang tepat ini, compiler menjadi penjaga yang berguna dan bukan sumber kebisingan.

Ringkasan#

Tipe objek mendefinisikan bentuk data berupa nama properti dan tipe masing-masing, dan pemeriksaan mengikuti kesesuaian bentuk tersebut.
Properti opsional ditulis dengan tanda tanya, setara dengan tipe | undefined, dan wajib diperiksa sebelum dipakai.
Modifier readonly melarang penugasan ulang properti pada waktu pemeriksaan tipe tanpa mengubah perilaku runtime.
Objek literal yang memuat properti tidak dikenal ditolak compiler, sehingga salah ketik tertangkap lebih awal.

Referensi#

Object Types — The TypeScript Handbook — Panduan tipe objek, properti opsional, dan modifier readonly.
Everyday Types — The TypeScript Handbook — Panduan tipe harian, termasuk penulisan tipe objek secara langsung.