Properti readonly
Tandai properti objek sebagai tidak dapat diubah setelah inisialisasi.
Properti readonly adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.
Pengubah Hanya-Baca
Pengubah readonly menandai properti yang dapat ditetapkan sekali, tetapi tidak dapat ditetapkan ulang setelahnya. Pengubah ini menyatakan sifat tidak dapat diubah pada tingkat tipe dan membantu mencegah perubahan yang tidak disengaja.
interface Point {
readonly x: number;
readonly y: number;
}
const p: Point = { x: 1, y: 2 };
console.log(p.x, p.y);
// p.x = 5; // Error: cannot assign to readonly propertyHanya-Baca pada Antarmuka
Pada antarmuka, readonly mendokumentasikan bidang mana yang tetap setelah pembuatan. Pengguna dapat membacanya dengan bebas, tetapi kompiler akan memblokir penetapan ulang apa pun.
interface Config {
readonly env: string;
retries: number; // mutable
}
const c: Config = { env: 'prod', retries: 3 };
c.retries = 5; // allowed
console.log(c.env, c.retries);Kesalahan Kompilasi saat Penugasan Ulang
Mencoba menulis ke properti readonly menghasilkan kesalahan saat kompilasi. Hal ini menangkap seluruh kategori masalah ketika state bersama berubah tanpa sengaja.
interface User {
readonly id: number;
name: string;
}
const u: User = { id: 1, name: 'Ada' };
u.name = 'Grace'; // ok
// u.id = 2; // Error
console.log(u);Hanya-Baca pada Properti Kelas
Kelas juga mendukung readonly. Properti hanya-baca dapat diinisialisasi saat deklarasi atau di dalam konstruktor, tetapi tidak di tempat lain.
class Circle {
readonly radius: number;
constructor(r: number) {
this.radius = r; // allowed in constructor
}
}
const c = new Circle(5);
console.log(c.radius);Tetapkan Sekali dalam Konstruktor
Konstruktor adalah satu-satunya tempat di luar deklarasi yang memungkinkan Anda menetapkan properti hanya-baca. Setelah pembuatan, nilainya terkunci selama masa hidup objek.
class Account {
readonly owner: string;
constructor(owner: string) {
this.owner = owner;
}
rename() {
// this.owner = 'x'; // Error: readonly outside constructor
}
}
console.log(new Account('Sam').owner);Properti Parameter Hanya-Baca
Properti parameter TypeScript memungkinkan Anda mendeklarasikan dan menginisialisasi properti hanya-baca langsung dalam tanda tangan konstruktor, sehingga mengurangi kode berulang.
class Vector {
constructor(
readonly x: number,
readonly y: number
) {}
}
const v = new Vector(3, 4);
console.log(v.x, v.y);Hanya-Baca Hanya Berlaku saat Kompilasi
Yang penting, readonly hanya ada dalam sistem tipe. Pengubah ini dihapus saat program dijalankan—JavaScript tidak memiliki konsep tersebut. Pengubah ini mencegah penetapan ulang dalam kode TypeScript Anda, bukan pada keluaran terkompilasi yang diakses melalui jalur tanpa tipe.
interface Box { readonly value: number; }
const b: Box = { value: 10 };
// At runtime b is a plain object; readonly is not enforced by JS.
console.log(b.value);Hanya-Baca dibandingkan Konstanta
Jangan sampai tertukar. const mencegah variabel diikat ulang. readonly mencegah properti ditetapkan ulang. Objek const masih dapat memiliki properti yang dapat diubah, kecuali properti tersebut readonly.
const obj = { count: 0 }; // const binding
obj.count = 5; // allowed: property is mutable
console.log(obj.count);Secara Alami Bersifat Dangkal
readonly bersifat dangkal: pengubah ini melindungi properti itu sendiri, bukan isi objek atau larik yang dirujuknya. Referensi hanya-baca ke objek tetap memungkinkan perubahan pada bidang objek tersebut.
interface Holder { readonly data: { n: number }; }
const h: Holder = { data: { n: 1 } };
// h.data = {...}; // Error
h.data.n = 99; // allowed: inner field is not readonly
console.log(h.data.n);Menggunakan Hanya-Baca untuk Antarmuka yang Lebih Aman
Menandai bidang objek yang dikembalikan sebagai readonly memberi sinyal bahwa pemanggil tidak seharusnya mengubahnya. Hal ini menyatakan maksud dalam tipe, sehingga penyalahgunaan menjadi kesalahan kompilasi, bukan masalah yang terjadi secara diam-diam.
interface Snapshot { readonly takenAt: number; readonly size: number; }
function snapshot(): Snapshot {
return { takenAt: Date.now(), size: 1024 };
}
const s = snapshot();
console.log(s.size);Hanya-Baca dalam Deklarasi Indeks
Anda bahkan dapat membuat deklarasi indeks hanya-baca, sehingga menghasilkan tipe seperti peta yang entrinya dapat dibaca tetapi tidak dapat ditetapkan ulang melalui indeks.
interface Scores {
readonly [name: string]: number;
}
const scores: Scores = { ada: 95, sam: 88 };
console.log(scores.ada);
// scores.ada = 100; // ErrorPemeriksaan Singkat
Uji pemahaman Anda tentang properti hanya-baca.
Ringkasan: Properti Hanya-Baca
Anda telah mempelajari bahwa readonly:
- Memungkinkan properti ditetapkan sekali, lalu memblokir penetapan ulang.
- Dapat ditetapkan saat deklarasi atau di dalam konstruktor untuk bidang kelas.
- Hanya berlaku saat kompilasi dan bersifat dangkal—pengubah ini tidak membekukan data bertingkat secara mendalam.
- Berbeda dari
const: yang satu melindungi properti, sedangkan yang lain melindungi pengikatan variabel.
Selanjutnya, larik dan tupel hanya-baca.
interface Meta { readonly id: number; }
const m: Meta = { id: 42 };
console.log(m.id);Pertanyaan yang Sering Diajukan
Apakah pelajaran “Properti readonly” gratis?
Ya — teks lengkap “Properti readonly” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Properti readonly”?
Tandai properti objek sebagai tidak dapat diubah setelah inisialisasi. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai TypeScript Academy?
Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Properti readonly” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.