TypeScript Academy · 课时

readonly 属性与参数属性

Q: 「readonly 属性与参数属性」这节课中我会学到什么？

使用 readonly 和构造函数属性简写 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 readonly 和构造函数属性简写

readonly 属性与参数属性 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

readonly 可以防止属性在初始化后发生更改。参数属性将声明和初始化合并为一行构造函数代码。

类属性中的 readonly

将属性声明为 readonly，可允许其设置一次（在构造函数中），但阻止之后的更改。

class Invoice {
  readonly invoiceId: string;
  constructor(id: string) { this.invoiceId = id; }
}
const inv = new Invoice('INV-001');
// inv.invoiceId = 'INV-002'; // Error!

接口中的 readonly

readonly 也适用于接口和对象类型，可以防止重新为属性赋值。

interface Point { readonly x: number; readonly y: number; }
const p: Point = { x: 5, y: 10 };
// p.x = 0; // Error

参数属性

在构造函数参数前添加访问修饰符，即可同时声明属性并为其赋值。

class Product {
  constructor(
    public name: string,
    public price: number,
    private sku: string
  ) {} // no need to write this.name = name; etc.
}

readonly 参数属性

将 `readonly` 与访问修饰符结合用于参数属性。

class Config {
  constructor(
    public readonly host: string,
    public readonly port: number = 3000
  ) {}
}

在声明时初始化

您可以在声明 readonly 属性时直接对其进行初始化。之后无法更改它。

class AppVersion {
  readonly version: string = '1.0.0';
  readonly buildDate: Date = new Date();
}

readonly 与 const

`const` 用于块级作用域变量。`readonly` 用于类属性和对象类型成员。它们适用于不同的作用域。

const API_KEY = 'secret'; // block variable
class Service {
  readonly key: string = API_KEY; // class property
}

只读对象类型

`Readonly` 工具类型会将 T 的所有属性设为 readonly。适合用于创建不可变快照。

interface User { name: string; age: number; }
const frozen: Readonly<User> = { name: 'Alice', age: 30 };
// frozen.name = 'Bob'; // Error

readonly 不会深度冻结

与 ReadonlyArray 一样，readonly 只能防止重新为属性本身赋值，不能防止修改该属性所指向的对象。

class Team {
  readonly members: string[] = [];
}
const t = new Team();
t.members.push('Alice'); // Allowed — the array itself is mutable!
// t.members = []; // Error — can't reassign the property

参数属性可减少样板代码

不使用参数属性时，您需要声明字段、声明构造函数参数并进行赋值。使用参数属性时，一行代码即可完成这三件事。

// Without parameter properties (verbose)
class A {
  private x: number;
  constructor(x: number) { this.x = x; }
}
// With parameter properties (concise)
class B {
  constructor(private x: number) {}
}

何时避免使用参数属性

一些团队会在大型类中避免使用参数属性，因为它们会将属性声明隐藏在类主体之外，降低一眼查看时的可读性。

快速检查

在 TypeScript 中使用参数属性时，关于 readonly 修饰符，哪项说法仍然为 TRUE？

回顾

readonly 可以防止属性在构造后发生修改。参数属性（访问修饰符 + 参数名）可以在一行中声明并初始化属性。将两者结合起来，可设计出简洁且不可变的类。

常见问题解答

「readonly 属性与参数属性」课时是免费的吗？

是的 — 「readonly 属性与参数属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「readonly 属性与参数属性」这节课中我会学到什么？

使用 readonly 和构造函数属性简写你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「readonly 属性与参数属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy