TypeScript：为何继承类无需构造函数即可自动赋值readonly属性？

你的写法完全合法，核心原因可以拆解成两个TypeScript的基础规则：

1. 子类默认构造函数自动调用父类构造 #

当子类没有显式声明构造函数时，TypeScript会自动生成一个默认构造函数，等价于：

constructor(page: Page) {
  super(page);
}

这个默认构造函数会调用父类BasePage的构造函数，把传入的Page实例赋值给this.page。所以当子类的实例属性开始初始化时，this.page已经是一个有效的实例了。

2. 类体属性初始化符合readonly的赋值规则 #

你在TestPage里直接写的public readonly someButton = this.page.getByRole(...)属于实例属性初始化语法，这是TypeScript的语法糖，它的执行时机是：

• 先执行父类构造函数（完成this.page的赋值）
• 再初始化子类的实例属性（也就是给someButton赋值）
• 如果子类有显式构造函数，最后执行子类构造函数

而TypeScript对readonly修饰符的要求是：属性只能在声明时或者构造函数内部赋值。类体里的直接赋值属于「声明时赋值」的范畴，完全符合规则，所以readonly属性可以正常赋值并使用。

和官方写法的差异 #

Playwright官方示例里在构造函数中给readonly属性赋值，只是风格不同的合法写法而已。两种写法的本质都是在实例初始化阶段完成属性赋值，没有功能上的区别：

• 官方写法把所有初始化逻辑集中在构造函数，适合属性多或初始化逻辑复杂的场景
• 你的写法把属性定义和初始化绑定在一起，代码更紧凑直观，适合简单的定位器声明

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