在 TypeScript 中使用 readonly 时的注意事项

只读属性的基础

在 Type Script 中，您可以将对象的属性设置为只读。

const person: { readonly name: string  } = { name: 'Mike' }

person.name = 21;
// → Cannot assign to 'name' because it is a read-only property.

---

⚠️① readonly 仅在编译时

在编译后的 JavaScript 代码中，只读声明被删除，因此在运行时不会被检测为错误。

⚠️② readonly 不是递归。

const person: {
  readonly name: string;
  readonly academicBackground: {
    primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// You can change `person.academicBackground.primarySchool`

如果你想将其设为只读，还需要将 readonly 设为 PrimarySchool。

const person: {
  readonly name: string;
  readonly academicBackground: {
    readonly primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// → Cannot assign to 'primarySchool' because it is a read-only property.

---

只读

当属性数量增加时，为每个属性添加 readonly 会变得很麻烦，并且会增加代码量。
您可以使用 Readonly 进行重构。

const obj: {
  readonly a : string;
  readonly b: string;
  readonly c: string;
  readonly d: string;
} = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

// ↓

const obj: Readonly<{
  a : string;
  b: string;
  c: string;
  d: string;
}> = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

快乐编码☀️

以上是在 TypeScript 中使用 readonly 时的注意事项的详细内容。更多信息请关注PHP中文网其他相关文章！