博客站

在 TypeScript 中，readonly 和 const 都用于创建不可变的变量或属性，但它们的使用场景和行为有所不同。以下是它们的详细对比：

const

const 是 JavaScript 中的关键字，用于声明一个不可变的变量。const 声明的变量必须在声明时初始化，并且不能重新赋值。

示例

const PI = 3.14159;
PI = 3.14; // Error: Cannot assign to 'PI' because it is a constant or a read-only property.

特点

• 块级作用域：const 声明的变量具有块级作用域。
• 不可重新赋值：const 声明的变量不能重新赋值。
• 必须初始化：const 声明的变量必须在声明时初始化。

readonly

readonly 是 TypeScript 中的关键字，用于修饰类属性或接口属性，使其成为只读属性。readonly 修饰的属性只能在声明时或构造函数中初始化，之后不能修改。

示例

class Circle {
    readonly radius: number;

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

    setRadius(newRadius: number) {
        this.radius = newRadius; // Error: Cannot assign to 'radius' because it is a read-only property.
    }
}

const circle = new Circle(5);
console.log(circle.radius); // 输出: 5
circle.radius = 10; // Error: Cannot assign to 'radius' because it is a read-only property.

特点

• 类属性或接口属性：readonly 用于修饰类属性或接口属性。
• 不可重新赋值：readonly 修饰的属性只能在声明时或构造函数中初始化，之后不能修改。
• 可以在构造函数中初始化：readonly 修饰的属性可以在构造函数中初始化。

readonly 和 const 的区别

使用建议

• 使用 const：当你需要声明一个不可变的变量时，使用 const。例如，用于声明常量值。
• 使用 readonly：当你需要声明一个不可变的类属性或接口属性时，使用 readonly。例如，用于声明只读的对象属性。

示例对比

// 使用 const
const MAX_SIZE = 100;
MAX_SIZE = 200; // Error: Cannot assign to 'MAX_SIZE' because it is a constant or a read-only property.

// 使用 readonly
class Rectangle {
    readonly width: number;
    readonly height: number;

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    setWidth(newWidth: number) {
        this.width = newWidth; // Error: Cannot assign to 'width' because it is a read-only property.
    }
}

const rect = new Rectangle(10, 20);
console.log(rect.width); // 输出: 10
rect.width = 15; // Error: Cannot assign to 'width' because it is a read-only property.

总结

const 和 readonly 都用于创建不可变的变量或属性，但它们的使用场景和行为有所不同。const 用于声明不可变的变量，具有块级作用域，必须在声明时初始化。readonly 用于声明不可变的类属性或接口属性，可以在声明时或构造函数中初始化。理解它们的区别和使用场景，可以帮助你编写出更安全、更易维护的代码。