TypeScript - Thuộc tính readonly: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn, những siêu sao lập trình tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của TypeScript và khám phá một trong những tính năng mạnh mẽ của nó: các thuộc tính readonly. Đừng lo lắng nếu bạn mới bắt đầu lập trình; tôi sẽ là người bạn thân thiện dẫn đường cho bạn trong hành trình thú vị này. Hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu TypeScript này nhé!

Thuộc tính readonly là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu thuộc tính readonly là gì. Hãy tưởng tượng bạn có một bảo vật gia đình quý giá - có thể là một chiếc đồng hồ cổ. Bạn có thể nhìn nó, ngắm nó, nhưng bạn không thể thay đổi nó. Đó chính xác là thuộc tính readonly trong TypeScript - các giá trị mà bạn có thể nhìn và sử dụng, nhưng không thể thay đổi một khi đã được đặt.

Cú pháp

Hãy bắt đầu từ những điều cơ bản. Làm thế nào để chúng ta宣布 một thuộc tính readonly? Nó đơn giản như thêm từ khóa readonly trước tên thuộc tính. Dưới đây là một ví dụ cơ bản:

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! Không thể thay đổi thuộc tính readonly

Trong ví dụ này, một khi chúng ta đặt name trong constructor, chúng ta không thể thay đổi nó sau này. Nó giống như seal tên của bảo vật gia đình chúng ta trong thời gian!

Thuộc tính readonly trong Interface

Các interface trong TypeScript giống như bản vẽ cho các đối tượng. Chúng ta cũng có thể sử dụng thuộc tính readonly trong interface. Hãy xem như thế nào:

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! Không thể thay đổi thuộc tính readonly

Ở đây, chúng ta đã tạo một interface ReadonlyPerson trong đó cả name và age đều là readonly. Một khi chúng ta tạo một đối tượng dựa trên interface này, chúng ta không thể thay đổi các thuộc tính này. Nó giống như tạo một thẻ ID - một khi đã in, bạn không thể xóa age và viết một cái mới!

Thuộc tính readonly trong Class

Các class giống như bản vẽ cho việc tạo các đối tượng có cả dữ liệu và hành vi. Hãy xem thuộc tính readonly hoạt động như thế nào trong 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! Không thể thay đổi thuộc tính readonly

Trong ví dụ này, title và author là readonly, nhưng chúng ta vẫn có thể thay đổi pageCount thông qua một phương thức. Nó giống như một cuốn sách - một khi đã in, bạn không thể thay đổi tiêu đề hoặc tác giả, nhưng bạn có thể thêm trang (có thể trong một phiên bản đã được hiệu đính).

Thuộc tính readonly trong Type Aliases

Type aliases giống như biệt danh cho các loại. Chúng ta cũng có thể sử dụng thuộc tính readonly với chúng:

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! Không thể thay đổi thuộc tính readonly

Ở đây, chúng ta đã tạo một type ReadonlyPoint trong đó cả x và y đều là readonly. Nó giống như đặt tọa độ trên bản đồ - một khi đã đặt, bạn không thể di chuyển điểm!

Const vs. Thuộc tính readonly

Bây giờ, bạn có thể đang tự hỏi, "Vậy sự khác biệt giữa const và readonly là gì?" Câu hỏi tuyệt vời! Hãy phân tích nó:

const PI = 3.14159;
// PI = 3.14; // Error! Không thể gán lại một biến const

class Circle {
readonly radius: number;

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

const circle = new Circle(5);
// circle.radius = 10; // Error! Không thể thay đổi thuộc tính readonly

const được sử dụng cho các biến không thể gán lại. readonly được sử dụng cho các thuộc tính không thể thay đổi sau khi khởi tạo. Hãy nghĩ const như một lời hứa không thay đổi容器, trong khi readonly là một lời hứa không thay đổi nội dung.

Khi nào nên sử dụng readonly

Vậy khi nào bạn nên sử dụng thuộc tính readonly? Dưới đây là một số tình huống phổ biến:

1. Khi bạn có các giá trị không nên thay đổi sau khi khởi tạo.
2. Cho các đối tượng cấu hình nên giữ nguyên.
3. Để ngăn chặn việc thay đổi không chủ ý trong các mã lớn.
4. Khi làm việc với các cấu trúc dữ liệu bất biến.

Dưới đây là bảng tóm tắt các phương thức chúng ta đã thảo luận:

Phương thức	Mô tả	Ví dụ
Với Interfaces	Định nghĩa thuộc tính readonly trong bản vẽ đối tượng	interface ReadonlyPerson { readonly name: string; }
Trong Classes	Tạo thuộc tính class không thể thay đổi sau khi khởi tạo	class Book { readonly title: string; }
Với Type Aliases	Định nghĩa thuộc tính readonly trong các loại tùy chỉnh	type ReadonlyPoint = { readonly x: number; readonly y: number; }
Const vs Readonly	Sử dụng const cho biến, readonly cho thuộc tính	const PI = 3.14; class Circle { readonly radius: number; }

Nhớ rằng, sử dụng thuộc tính readonly giống như đặt ra các quy tắc cho bản thân bạn và các nhà phát triển khác. Nó giúp ngăn chặn lỗi và làm cho mã của bạn dễ dự đoán và duy trì hơn.

Và đây là tất cả, các học sinh yêu quý của tôi! Chúng ta đã cùng nhau hành trình qua thế giới của các thuộc tính readonly trong TypeScript. Tôi hy vọng hướng dẫn này đã chiếu sáng con đường cho bạn. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại thử nghiệm các khái niệm này trong các dự án của riêng bạn. Chúc các bạn may mắn và các thuộc tính readonly của bạn luôn trung thành với giá trị của chúng!

Credits: Image by storyset