Typescript高级: 深入理解const和readonly

概述

在编程语言中，const 和 readonly 是两种用于声明常量或只读属性的关键字
它们帮助开发者确保数据的不可变性，从而提高代码的安全性和可维护性
虽然这两个概念在不同的编程语言中可能有所差异
但本文将以 TypeScript 为例，深入探讨 const 和 readonly 的使用场景

const 关键字

在 TypeScript（以及JavaScript ES6之后的版本）中
const 关键字用于声明一个常量变量，其值在初始化后不能被重新赋值
这意味着一旦给 const 变量赋予了一个初始值，这个值就不能改变
例如，const pi = 3.14; 声明了一个名为 pi 的常量，尝试修改 pi 的值会引发编译错误
一般示例

const arr = [10, 30, 40, "abc"];
// arr = [100, 30, 40, "abc"]; // 错误：不能给常量赋新值

const arr2 = [10, 30, 40, "abc"] as const; // 使用 as const 使数组元素变为 readonly
// arr2[0] = 100; // 错误：无法修改只读元素

需要注意的是，对于数组或对象这样的复杂数据类型
const 只保证引用不变，数组或对象内部的元素仍然可以被修改
除非这些元素本身也是通过 const 或 readonly 声明的
对于对象和数组，const 保证的是引用的不可变，而非内部结构的冻结

使用 Object.freeze() 可以进一步使对象完全不可变

const frozenObj = Object.freeze({ key: 'value' }); // 对象及其属性均不可变

解构赋值与const：利用解构赋值，可以从 const 数组或对象中提取值

即使原始数据不可变，仍能灵活操作提取出的数据

const [a, b] = [10, 20] as const; // a 和 b 都是常量

readonly 关键字

readonly 是 TypeScript 提供的一个修饰符，用于标记类的属性或接口的成员为只读
与 const 不同，它不仅适用于基本类型，还能确保数组或对象的结构不会被改变

即不能添加、删除或修改元素（对于对象，则是不能修改其属性值）

interface ReadonlyArray<T> {
  readonly [index: number]: T;
}
function showArr(arr: readonly any[]) {
  // arr[0] = 100; // 错误：试图修改只读数组元素
  console.log(arr);
}

TypeScript 引入了 readonly 关键字，它主要用于类的属性和接口成员
以声明这些属性或成员只能被读取，而不能被赋值或修改

这对于设计具有不变性特性的类和接口非常有用，尤其是在构建复杂的数据模型时

class Person {
    public name: string;
    readonly birthDate: Date;

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