SAPUI5 TypeScript Error: Extending @sapui5/types Component Interface

This issue is related to TypeScript, but I believe seeking help from the SAPUI5 community might lead to a solution.

I'm working on a SAPUI5 project with Typescript, and I have the @sapui5/types package installed as a dev dependency. I have a function called getContentDensityClass() defined in my Component.ts file as follows:

// webapp/Component.ts
public getContentDensityClass() {
    // ...
    return this._sContentDensityClass;
}

In my App.controller.ts, I want to use this function like this:

// webapp/controller/App.controller.ts
public onMessagePopoverPress(oEvent: Event) {
    // ...
    syncStyleClass(this.getView()
                   .getController()
                   .getOwnerComponent()
                   .getContentDensityClass(), // here is the error
                   this.getView(),
                   oMessagePopover);
    // ...
}

However, TypeScript raises the following error:

• getContentDensityClass does not exist on getOwnerComponent of type Component

To address this issue, I tried extending the Component type from @sapui5/types as shown below:

declare module "@sapui5/types" {
    export interface Component {
        getContentDensityClass(): string;
    }
}

Despite this attempt, the error persists.

getOwnerComponent returns the generic UI5 component class. However, your custom method getContentDensityClass is defined in your custom component class.

You should assert the type of getOwnerComponent, for example:

import AppComponent from "../Component" // path to your Component.ts;
...
(this.getView()
   .getController()
   .getOwnerComponent() as AppComponent)
   .getContentDensityClass()

If you don't want to do this every time I'd suggest you put this in your BaseController

import AppComponent from "../Component";
getOwnerComponent(): AppComponent {
    return super.getOwnerComponent() as AppComponent;
}

Then your original code should work without any modification.