SAPUI5 TypeScript错误:扩展@sapui5/types组件接口

huangapple go评论89阅读模式
英文:

SAPUI5 TypeScript Error: Extending @sapui5/types Component Interface

问题

这个问题与TypeScript有关,但我认为寻求SAPUI5社区的帮助可能会导致解决方案。

我正在处理一个带有TypeScript的SAPUI5项目,并且已将@sapui5/types包安装为开发依赖项。我在我的Component.ts文件中定义了一个名为getContentDensityClass()的函数,如下所示:

  1. // webapp/Component.ts
  2. public getContentDensityClass() {
  3. // ...
  4. return this._sContentDensityClass;
  5. }

在我的App.controller.ts中,我想像这样使用这个函数:

  1. // webapp/controller/App.controller.ts
  2. public onMessagePopoverPress(oEvent: Event) {
  3. // ...
  4. syncStyleClass(this.getView()
  5. .getController()
  6. .getOwnerComponent()
  7. .getContentDensityClass(), // 这里出错了
  8. this.getView(),
  9. oMessagePopover);
  10. // ...
  11. }

然而,TypeScript引发了以下错误:

  • getContentDensityClass在类型为Component的getOwnerComponent上不存在

为了解决这个问题,我尝试扩展来自@sapui5/types的Component类型,如下所示:

  1. declare module "@sapui5/types" {
  2. export interface Component {
  3. getContentDensityClass(): string;
  4. }
  5. }

尽管尝试了这种方法,错误仍然存在。

英文:

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:

  1. // webapp/Component.ts
  2. public getContentDensityClass() {
  3. // ...
  4. return this._sContentDensityClass;
  5. }

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

  1. // webapp/controller/App.controller.ts
  2. public onMessagePopoverPress(oEvent: Event) {
  3. // ...
  4. syncStyleClass(this.getView()
  5. .getController()
  6. .getOwnerComponent()
  7. .getContentDensityClass(), // here is the error
  8. this.getView(),
  9. oMessagePopover);
  10. // ...
  11. }

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:

  1. declare module "@sapui5/types" {
  2. export interface Component {
  3. getContentDensityClass(): string;
  4. }
  5. }

Despite this attempt, the error persists.

答案1

得分: 1

getOwnerComponent 返回通用的UI5组件类。然而,您自定义的方法 getContentDensityClass 是在您自定义的组件类中定义的。

您应该断言 getOwnerComponent 的类型,例如:

  1. import AppComponent from "../Component" // 指向您的 Component.ts 的路径;
  2. ...
  3. (this.getView()
  4. .getController()
  5. .getOwnerComponent() as AppComponent)
  6. .getContentDensityClass()

如果您不想每次都这样做,我建议您将这个代码放在您的 BaseController 中:

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

然后,您的原始代码应该可以正常运行,无需进行任何修改。

英文:

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:

  1. import AppComponent from "../Component" // path to your Component.ts;
  2. ...
  3. (this.getView()
  4. .getController()
  5. .getOwnerComponent() as AppComponent)
  6. .getContentDensityClass()

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

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

Then your original code should work without any modification.

huangapple
  • 本文由 发表于 2023年7月27日 23:44:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76781432.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定