I stumbled upon some code that seems confusing to me: I am still relatively new to TypeScript, but this doesn't seem like it should be functioning correctly:
There are 2 classes involved in this scenario (pertaining to an automation framework, specifically playwright): a Base page and a Home page that inherits from the base page.
Base Page:
import type { Page } from "@playwright/test";
export abstract class BasePage {
constructor(public readonly page: Page) {}
async open(path: string) {
await this.page.goto(path);
}
}
Home Page:
import { BasePage } from "../base.page";
export default class HomePage extends BasePage {
public readonly HomePageButton = this.page.getByTestId("home-button");
async open() {
await super.open("/");
}
}
When I try to implement something similar in my own code, it results in errors. Specifically, how does the HomePage know what this.page refers to? Wouldn't we need to create a new constructor and call super(page)?
I understand that TypeScript will generate "Parameter properties," but is there a way to make VSCode recognize it? If the approach of declaring child classes of an abstract base class is incorrect, what would be the recommended alternative?