TypeScript中const与readonly的区别与应用解析

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要
- 一、引言
- 二、变量声明与赋值
- - [2.1 const关键字](#2.1 const关键字)
  - [2.2 readonly关键字](#2.2 readonly关键字)
- 三、类型推断差异
- - [3.1 const的类型推断](#3.1 const的类型推断)
  - [3.2 readonly的类型推断](#3.2 readonly的类型推断)
- 四、应用场景分析
- - [4.1 const的应用场景](#4.1 const的应用场景)
  - [4.2 readonly的应用场景](#4.2 readonly的应用场景)
- 五、总结

在TypeScript中，const和readonly都与数据的不可变性相关，但它们在作用范围、应用场景和实现机制上存在明显差异。下面我将从多个方面详细阐述二者的区别，帮助开发者准确运用这两个关键字优化代码。

摘要

本文深入剖析TypeScript中const和readonly关键字的本质区别，从变量声明、类型推断、对象属性修饰以及数组操作等维度展开分析，并结合实际代码示例，清晰呈现二者在功能特性与使用场景上的差异，为开发者合理选择和运用这两个关键字提供全面参考，助力提升TypeScript代码的严谨性与可靠性。

一、引言

在TypeScript编程中，保证数据的不可变性是确保代码稳定性和可维护性的重要手段。const和readonly关键字都能在一定程度上实现数据的不可变特性，但它们有着不同的适用场景和工作机制。深入理解二者的区别，有助于开发者根据具体需求准确使用，避免因误用导致的潜在问题。

二、变量声明与赋值

2.1 const关键字

const用于声明常量，一旦赋值便不可重新分配。在声明const变量时，必须同时进行初始化，否则会报错。它作用于整个变量，无论是基本数据类型还是复杂数据结构，都禁止重新赋值。

typescript 复制代码

const num: number = 10;
// num = 20; // 报错，不能重新赋值

const arr: number[] = [1, 2, 3];
// arr = [4, 5, 6]; // 报错，不能重新赋值数组变量

对于对象和数组等复杂数据类型，const只是禁止变量指向新的对象或数组，但其内部元素仍可修改。

typescript 复制代码

const obj: { name: string } = { name: "Alice" };
obj.name = "Bob"; // 允许，可修改对象属性

2.2 readonly关键字

readonly主要用于修饰对象的属性，使其在对象创建后不能被重新赋值。它通常用于类的属性声明或接口定义中，确保属性在初始化后保持不变。

typescript 复制代码

class Person {
    readonly name: string;
    constructor(name: string) {
        this.name = name;
    }
}
const person = new Person("Charlie");
// person.name = "David"; // 报错，不能修改readonly属性

在接口中使用readonly，可以约束实现该接口的对象属性不可变。

typescript 复制代码

interface Config {
    readonly version: string;
}
const config: Config = { version: "1.0" };
// config.version = "2.0"; // 报错，不能修改readonly属性

三、类型推断差异

3.1 const的类型推断

const声明的变量在类型推断时，会保留更具体的类型信息。当使用const断言时，TypeScript会将变量推断为字面量类型，这在一些需要精确类型控制的场景非常有用。

typescript 复制代码

const str = "hello"; // str的类型为"hello"，字面量类型
const num2 = 5; // num2的类型为5，字面量类型

const arr2 = [1, 2, 3] as const; // arr2的类型为readonly [1, 2, 3]
// arr2.push(4); // 报错，不能修改readonly数组

3.2 readonly的类型推断

readonly修饰的属性在类型推断时，主要强调属性的不可变性，不会改变属性本身的类型推断结果。

typescript 复制代码

interface User {
    readonly id: number;
    name: string;
}
const user: User = { id: 1, name: "Eve" };
// user.id的类型为number，只是不能重新赋值

四、应用场景分析

4.1 const的应用场景

声明全局常量：用于定义不会改变的全局配置项、魔法值等，如数学常量、系统默认参数等。

typescript 复制代码

const PI = 3.1415926;
const DEFAULT_TIMEOUT = 5000;

精确类型控制 ：结合const断言，在需要精确类型的场景（如函数参数、对象字面量属性等），确保类型的准确性和不可变性。

typescript 复制代码

function handleColor(color: "red" | "green" | "blue") {
    // 处理颜色逻辑
}
const myColor = "red" as const;
handleColor(myColor);

4.2 readonly的应用场景

类和接口属性定义：在类的属性声明或接口定义中，用于标识属性在初始化后不可修改，增强代码的语义表达和安全性。

typescript 复制代码

class Car {
    readonly brand: string;
    constructor(brand: string) {
        this.brand = brand;
    }
}

只读数据结构：定义只读的对象或数组结构，明确数据的不可变性质，防止意外修改。

typescript 复制代码

interface ReadonlyArrayExample {
    readonly data: readonly number[];
}
const arrayExample: ReadonlyArrayExample = { data: [1, 2, 3] };

五、总结

TypeScript中的const和readonly虽然都与数据不可变性相关，但在变量声明、类型推断和应用场景上存在显著差异。const侧重于变量级别的不可重新赋值，同时能实现更精确的类型推断；readonly主要用于修饰对象属性，强调属性在对象创建后的不可修改性。开发者在实际编程中，应根据需求准确选择使用，利用const控制变量的不可变性和精确类型，借助readonly保障对象属性的稳定，从而编写出更加严谨、可靠的TypeScript代码。