Vue搭配TypeScript开发时使用Object.freeze出现类型报错如何解决

错误原因 #

Object.freeze() 处理数组后会返回带 readonly 修饰的只读数组类型，与你在 DataOptions 中定义的普通可变数组类型 flags 不匹配，因此触发TypeScript类型报错。

解决方案 #

• 方案1：调整类型定义（推荐）
  直接将flags的类型声明为只读数组，完全匹配你冻结数组不做修改的使用预期，修改如下：

type DataOptions = {
  name: string
  age: number
  // 两种写法等价，选一种即可
  flags: readonly { t: number; l: number }[]
  // 或者 flags: ReadonlyArray<{ t: number; l: number }>
}

该方案符合类型规范，TypeScript会自动禁止你后续调用push/pop等数组变异方法、修改数组元素，和Object.freeze的运行时特性完全对齐，同时不会影响Vue的正常渲染，也能达到跳过响应式劫持降低开销的优化目的。

• 方案2：使用类型断言（仅临时兼容用，不推荐）
  如果你不想修改原有类型定义，可以在赋值时手动做类型断言绕过校验：

this.flags = Object.freeze(response) as { t: number; l: number }[]

该方案相当于主动关闭了TypeScript对这行赋值的类型检查，你需要自行保证后续不会修改冻结后的数组内容，否则运行时会抛出错误且TypeScript无法提前预警。

注意事项 #

Object.freeze 是浅冻结，如果你数组内部的对象属性也需要修改，不适合使用该优化；如果需要深层冻结，需要自行递归处理所有层级的对象/数组。

内容的提问来源于stack exchange，提问作者Richex