TypeScript - 只读属性：初学者指南

你好，未来的编程巨星！今天，我们将深入TypeScript的精彩世界，探索其强大的特性之一：只读属性。如果你是编程新手，不用担心；我会成为你这次激动人心旅程中的友好向导。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起开始这次TypeScript的冒险！

TypeScript - Readonly Properties

什么是只读属性？

在我们深入研究之前，先来理解一下什么是只读属性。想象你有一个珍贵的传家宝——也许是一块美丽的老式怀表。你可以观赏它，欣赏它，但你不能改变它。这正是TypeScript中只读属性的作用——你可以查看和使用这些值，但一旦设置后就不能修改。

语法

让我们从基础开始。如何声明一个只读属性？只需在属性名前加上readonly关键字即可。以下是一个基本示例：

class Heirloom {
readonly name: string;

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

const familyWatch = new Heirloom("祖父的怀表");
console.log(familyWatch.name); // 输出: 祖父的怀表
// familyWatch.name = "新怀表"; // 错误！不能修改只读属性

在这个示例中，一旦我们在构造函数中设置了name，之后就不能再更改它。就像把我们的传家宝的名字封印在时间里一样！

接口中的只读属性

TypeScript中的接口就像对象的蓝图。我们也可以在接口中使用只读属性。来看看如何操作：

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

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

console.log(person.name); // 输出: Alice
// person.age = 31; // 错误！不能修改只读属性

在这里，我们创建了一个ReadonlyPerson接口，其中name和age都是只读的。一旦根据这个接口创建对象，我们就不能更改这些属性。就像制作身份证——一旦打印出来，你就不能擦掉年龄并写上一个新数字！

类中的只读属性

类是创建带有数据和行为的对象的蓝图。让我们看看只读属性在类中是如何工作的：

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); // 输出: TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // 输出: 250
// myBook.title = "JavaScript 101"; // 错误！不能修改只读属性

在这个示例中，title和author是只读的，但我们仍然可以通过方法修改pageCount。就像一本书——一旦印刷，你就不能更改标题或作者，但你可以添加页面（也许在修订版中）。

类型别名中的只读属性

类型别名是类型的昵称。我们也可以在其中使用只读属性：

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

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // 输出: 10 20
// point.x = 30; // 错误！不能修改只读属性

在这里，我们创建了一个ReadonlyPoint类型，其中x和y都是只读的。就像在地图上设置坐标——一旦放置，你就不能移动这个点！

Const与只读属性

现在，你可能在想，“const和readonly之间有什么区别？”这是个好问题！让我们来分析一下：

const PI = 3.14159;
// PI = 3.14; // 错误！不能重新赋值给const变量

class Circle {
readonly radius: number;

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

const circle = new Circle(5);
// circle.radius = 10; // 错误！不能修改只读属性

const用于不能重新赋值的变量。readonly用于初始化后不能更改的属性。把const想象成不改变容器的承诺，而readonly是不改变内容的承诺。

何时使用只读属性

那么，你什么时候应该使用只读属性呢？以下是一些常见场景：

当你有初始化后不应更改的值时。
对于应保持不变的配置对象。
防止在大型代码库中意外修改。
当使用不可变数据结构时。

下面是总结我们讨论过的方法的表格：

方法	描述	示例
在接口中	在对象蓝图中定义只读属性	`interface ReadonlyPerson { readonly name: string; }`
在类中	创建初始化后不能修改的类属性	`class Book { readonly title: string; }`
使用类型别名	在自定义类型中定义只读属性	`type ReadonlyPoint = { readonly x: number; readonly y: number; }`
Const与Readonly	使用const声明变量，readonly声明属性	`const PI = 3.14; class Circle { readonly radius: number; }`

记住，使用只读属性就像为未来的自己和其他开发者设定规则。它可以帮助防止错误，并使代码更具可预测性和可维护性。

亲爱的学生们，就这样，我们一起穿越了TypeScript中只读属性的土地。我希望这个指南为你们照亮了道路。记住，熟能生巧，所以不要害怕在你们自己的项目中尝试这些概念。快乐编码，愿你们的只读属性始终忠于它们的值！

Credits: Image by storyset