TypeScript - Properti Readonly: Panduan untuk Pemula

Hai teman-teman, sang super bintang pemrograman masa depan! Hari ini, kita akan masuk ke dunia yang menakjubkan TypeScript dan menjelajahi salah satu fitur yang kuatnya: properti readonly. Jangan khawatir jika Anda baru saja memulai pemrograman; saya akan menjadi panduan temananda dalam perjalanan yang menarik ini. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita mulai petualangan TypeScript ini bersama!

Apa Itu Properti Readonly?

Sebelum kita masuk ke detail, mari kita mengerti apa itu properti readonly. Bayangkan Anda memiliki warisan keluarga yang berharga - mungkin sebuah jam antik yang indah. Anda bisa melihatnya, mengapresiasiinya, tapi Anda tidak bisa mengubahnya. Itu tepatnya apa arti properti readonly dalam TypeScript - nilai yang Anda bisa lihat dan gunakan, tapi Anda tidak bisa mengubahnya setelah diatur.

Sintaks

Mari kita mulai dari dasar. Bagaimana cara kita mendeklarasikan properti readonly? Itu sangat sederhana, tinggal tambahkan kata kunci readonly sebelum nama properti. Mari lihat contoh dasar:

class Heirloom {
readonly name: string;

constructor(name: string) {
this.name = name;
}
}

const familyWatch = new Heirloom("Grandfather's Watch");
console.log(familyWatch.name); // Output: Grandfather's Watch
// familyWatch.name = "New Watch"; // Error! Tidak bisa mengubah properti readonly

Dalam contoh ini, setelah kita mengatur name dalam constructor, kita tidak bisa mengubahnya kemudian. Itu seperti menutup nama warisan keluarga kita di dalam waktu!

Properti Readonly Dalam Interface

Interface dalam TypeScript adalah seperti blueprint untuk objek. Kita juga bisa menggunakan properti readonly dalam interface. Mari lihat bagaimana:

interface ReadonlyPerson {
readonly name: string;
readonly age: number;
}

const person: ReadonlyPerson = {
name: "Alice",
age: 30
};

console.log(person.name); // Output: Alice
// person.age = 31; // Error! Tidak bisa mengubah properti readonly

Di sini, kita membuat interface ReadonlyPerson dimana name dan age adalah readonly. Setelah kita membuat objek berdasarkan interface ini, kita tidak bisa mengubah properti ini. Itu seperti membuat kartu identitas - setelah dicetak, Anda tidak bisa menghapus umurnya dan menulis yang baru!

Properti Readonly Dalam Class

Class adalah seperti blueprint untuk membuat objek dengan baik data dan perilaku. Mari lihat bagaimana properti readonly bekerja dalam class:

class Book {
readonly title: string;
readonly author: string;
private _pageCount: number;

constructor(title: string, author: string, pageCount: number) {
this.title = title;
this.author = author;
this._pageCount = pageCount;
}

get pageCount(): number {
return this._pageCount;
}

addPages(pages: number) {
this._pageCount += pages;
}
}

const myBook = new Book("TypeScript 101", "Jane Doe", 200);
console.log(myBook.title); // Output: TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // Output: 250
// myBook.title = "JavaScript 101"; // Error! Tidak bisa mengubah properti readonly

Dalam contoh ini, title dan author adalah readonly, tapi kita masih bisa mengubah pageCount melalui metode. Itu seperti buku - setelah dicetak, Anda tidak bisa mengubah judul atau penulis, tapi Anda bisa menambah halaman (mungkin dalam revisi edisi).

Properti Readonly Dalam Type Aliases

Type aliases adalah seperti nama samaran untuk tipe. Kita juga bisa menggunakan properti readonly dengannya:

type ReadonlyPoint = {
readonly x: number;
readonly y: number;
};

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // Output: 10 20
// point.x = 30; // Error! Tidak bisa mengubah properti readonly

Di sini, kita membuat type ReadonlyPoint dimana x dan y adalah readonly. Itu seperti menentukan koordinat di peta - setelah ditempatkan, Anda tidak bisa memindahkan titik!

Const vs. Properti Readonly

Sekarang Anda mungkin berpikir, "Apa perbedaan antara const dan readonly?" Pernyataan bagus! Mari kitauraikan:

const PI = 3.14159;
// PI = 3.14; // Error! Tidak bisa mengubah variabel const

class Circle {
readonly radius: number;

constructor(radius: number) {
this.radius = radius;
}
}

const circle = new Circle(5);
// circle.radius = 10; // Error! Tidak bisa mengubah properti readonly

const digunakan untuk variabel yang tidak bisa diubah. readonly digunakan untuk properti yang tidak bisa diubah setelah inisialisasi. Berpikirkan const seperti janji untuk tidak mengubah wadah, sedangkan readonly adalah janji untuk tidak mengubah isi.

Kapan Harus Menggunakan Properti Readonly

Maka, kapan Anda harus menggunakan properti readonly? Berikut adalah beberapa scenario umum:

1. Ketika Anda memiliki nilai yang tidak boleh berubah setelah inisialisasi.
2. Untuk objek konfigurasi yang harus tetap konstan.
3. Untuk mencegah modifikasi yang tidak sengaja dalam basis kode besar.
4. Ketika bekerja dengan struktur data immutable.

Berikut adalah tabel yang menggabungkan metode yang kita diskusikan:

Metode	Deskripsi	Contoh
Dengan Interface	Definisikan properti readonly dalam blueprint objek	interface ReadonlyPerson { readonly name: string; }
Dalam Class	Buat properti class yang tidak bisa diubah setelah inisialisasi	class Book { readonly title: string; }
Dengan Type Aliases	Definisikan properti readonly dalam tipe khusus	type ReadonlyPoint = { readonly x: number; readonly y: number; }
Const vs Readonly	Gunakan const untuk variabel, readonly untuk properti	const PI = 3.14; class Circle { readonly radius: number; }

Ingat, menggunakan properti readonly adalah seperti menetapkan aturan untuk diri Anda sendiri dan pengembang lain. Itu membantu mencegah kesalahan dan membuat kode Anda lebih prediktif dan mudah dipelihara.

Dan begitulah, teman-teman saya! Kita telah menjelajahi negeri properti readonly dalam TypeScript. Saya harap panduan ini telah menerangi jalan bagi Anda. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini dalam proyek Anda sendiri. Selamat coding, dan may your readonly properties always stay true to their values!

Credits: Image by storyset