TypeScript只读修饰符怎么用

在TypeScript中，readonly修饰符用于将类属性、接口属性或索引签名标记为只读。这意味着一旦属性被赋值，就不能再被修改。readonly修饰符可以帮助我们在编译时捕获意外的属性修改，从而提高代码的安全性和可维护性。

1. 类属性中的readonly

在类中，我们可以使用readonly修饰符来标记属性为只读。只读属性必须在声明时或在构造函数中被初始化。

class Person {
    readonly name: string;

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

const person = new Person("Alice");
console.log(person.name); // 输出: Alice

// person.name = "Bob"; // 错误: 无法分配到 "name" ，因为它是只读属性

在上面的例子中，name属性被标记为readonly，因此一旦Person实例被创建，name属性就不能再被修改。

2. 接口中的readonly

在接口中，我们也可以使用readonly修饰符来标记属性为只读。

interface Point {
    readonly x: number;
    readonly y: number;
}

const point: Point = { x: 10, y: 20 };
console.log(point.x); // 输出: 10

// point.x = 30; // 错误: 无法分配到 "x" ，因为它是只读属性

在这个例子中，Point接口的x和y属性都被标记为readonly，因此一旦point对象被创建，这些属性就不能再被修改。

3. 只读数组

TypeScript还提供了ReadonlyArray<T>类型，用于表示只读数组。只读数组不能被修改，例如不能添加、删除或修改数组中的元素。

const numbers: ReadonlyArray<number> = [1, 2, 3, 4];

console.log(numbers[0]); // 输出: 1

// numbers.push(5); // 错误: 类型“readonly number[]”上不存在属性“push”
// numbers[0] = 10; // 错误: 无法分配到 "0" ，因为它是只读属性

在这个例子中，numbers是一个只读数组，因此不能对其进行修改操作。

4. 只读索引签名

在TypeScript中，我们还可以使用readonly修饰符来标记索引签名为只读。

interface ReadonlyDictionary {
    readonly [key: string]: string;
}

const dict: ReadonlyDictionary = {
    foo: "bar",
    baz: "qux"
};

console.log(dict["foo"]); // 输出: bar

// dict["foo"] = "new value"; // 错误: 无法分配到 "foo" ，因为它是只读属性

在这个例子中，ReadonlyDictionary接口的索引签名被标记为readonly，因此一旦dict对象被创建，就不能再修改其属性。

5. 只读修饰符的使用场景

readonly修饰符在以下场景中非常有用：

• 不可变数据：当你希望确保某些数据在初始化后不会被修改时，可以使用readonly修饰符。
• 防止意外修改：在大型项目中，readonly可以帮助防止开发人员意外修改不应该被修改的属性。
• 提高代码可读性：通过标记属性为只读，可以清晰地表达该属性的意图，从而提高代码的可读性。

6. 总结

readonly修饰符是TypeScript中一个非常有用的特性，它可以帮助我们创建不可变的数据结构，防止意外的属性修改，并提高代码的可读性和安全性。通过在类属性、接口属性、数组和索引签名中使用readonly修饰符，我们可以更好地控制数据的可变性，从而编写出更加健壮和可维护的代码。