[FEATURE REQUEST] Derive UI5 Control Interfaces from TypeScript "implements" Clause

[Thodd]

Derive UI5 Control Interfaces from TypeScript implements Clause

We (as in the UI5 framework runtime team, incl. @codeworrior) want to propose a feature to automatically derives interface definitions in UI5 control and component metadata from the implements clause in the corresponding TypeScript class definitions. This feature would complement existing UI5 TypeScript tooling nicely and align with the broader goal of improving the development experience for UI5 applications.

Motivation

Currently, when developing UI5 controls in TypeScript, developers need to manually maintain interface definitions in both:

1. The TypeScript class definition using the implements clause
2. The UI5 control/component metadata object

This duplication can lead to mismatches between TypeScript interfaces and UI5 metadata if the developer is not careful, and issues are most likely only detected at runtime, since there is no static check for the interface array in the UI5 metadata.

A similar topic has been raised by @pubmike in the OpenUI5 repository quite a while ago. At this point in time we think the TypeScript support of UI5 is sufficiently matured to allow for better dev experience.

Proposed Solution

Enhance babel-plugin-transform-ui5 to automatically extract interface information from TypeScript implements clauses and generate the corresponding UI5 control metadata interface definitions.

Example

Before (current manual approach):

import { Label } from "sap/ui/core/library";

class MyControl extends Control implements Label {
  static readonly metadata = {
    interfaces: ["sap.ui.core.Label"], // Manual declaration needed
    // ... 
  };
  //...
}

After (proposed automatic derivation):

import { Label } from "sap/ui/core/library";

class MyControl extends Control implements Label {
  static readonly metadata = {
    // interfaces automatically derived from implements clause during transformation, the JS result will contain the interfaces array with the corresponding entry
    // ... 
  };
}

Expected Behavior

1. Metadata Generation: Automatically populate the interfaces array in the UI5 metadata object
2. Namespace Mapping: Convert TypeScript interface names to appropriate UI5 namespace format
3. Backward Compatibility: Ensure existing manually defined interfaces continue to work, existing interfaces arrays must not be overwritten