编程前端开发者

在TypeScript中,关键字'readonly'是什么?何时该使用它?与const相比,它有什么特点?

用 Hintsage AI 助手通过面试

答案。

在TypeScript中,关键字readonly用于对象和数组的属性,以禁用它们在初始化后被修改:

  • 用于接口、类型和类的描述,以便在设置后不能更改字段的值。
  • readonly仅适用于对象的属性,而不适用于变量。
  • 与指示变量不能重新赋值的const不同,readonly实际禁止修改字段或数组元素。

示例:

interface User { readonly id: number; name: string; } const user: User = { id: 1, name: 'Anna' }; user.id = 2; // 错误:Cannot assign to 'id' because it is a read-only property.

对于数组:

const nums: readonly number[] = [1, 2, 3]; nums.push(4); // 错误:Property 'push' does not exist on type 'readonly number[]'.

带陷阱的问题。

TypeScript中的constreadonly有什么区别?它们可以互相替换吗?

**答案:**不可以。const是对变量本身的限制(不能重新赋值),而readonly是对对象的单独属性或数组元素的限制,但变量本身可以被修改(如果上下文允许的话)。

示例:

const arr: readonly number[] = [1, 2, 3]; // arr = [2, 3, 4]; // 错误因为const // arr[0] = 5; // 错误因为readonly

事件

在一个金融平台项目中,处理用户数据时使用了普通数组number[]而非readonly number[]。因此,一个函数意外地修改了输入数据——相关的数组值在不同地方使用,导致报告不一致。几天后发现错误,给公司带来了审计和数据恢复的时间成本。


事件

在内部API中混淆了constreadonly,认为const user: User会防止属性被修改。结果发现对象的字段可以被修改,尽管这是不允许的需求。由于不懂差异,导致保密数据在服务之间泄露。


事件

在一个开源库中,偶然将某个数据结构做成可修改的,因为在接口定义中忘记了readonly。这使得第三方开发人员可以在运行时修改私有数据,导致了需要重构的错误。