[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-cline-ui5-typescript-conversion":3,"mdc--22yb8u-key":33,"related-repo-cline-ui5-typescript-conversion":10298,"related-org-cline-ui5-typescript-conversion":10421},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":28,"sourceUrl":31,"mdContent":32},"ui5-typescript-conversion","convert UI5 projects to TypeScript","A skill for converting UI5 (SAPUI5\u002FOpenUI5) projects to TypeScript.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"cline","Cline","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcline.png",[12,16,19],{"name":13,"slug":14,"type":15},"TypeScript","typescript","tag",{"name":17,"slug":18,"type":15},"Migration","migration",{"name":20,"slug":21,"type":15},"Engineering","engineering",10,"https:\u002F\u002Fgithub.com\u002Fcline\u002Fskills","2026-07-12T08:13:56.991564",null,4,[],{"repoUrl":23,"stars":22,"forks":26,"topics":29,"description":30},[],"A collection of skills used at Cline","https:\u002F\u002Fgithub.com\u002Fcline\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fui5-typescript-conversion","---\nname: ui5-typescript-conversion\ndescription: A skill for converting UI5 (SAPUI5\u002FOpenUI5) projects to TypeScript.\n---\n\n# UI5 TypeScript Conversion Guidelines\n\n> This document outlines how a UI5 (SAPUI5\u002FOpenUI5) project can be converted to TypeScript. It consists of the following parts:\n> 1. Important general rules\n> 2. How the setup of the project needs to be changed\n> 3. Converting the code itself\n> 4. Converting tests (reference to separate file)\n\n\n## General Conversion Rules\n\n### Preserve ALL comments\n\nYou MUST preserve existing JSDoc, documentation and comments - never remove JSDoc or comments during the conversion.\n\nExample input:\n\n```js\n\u002F**\n * My cool controller, it does things.\n *\u002F\nreturn Controller.extend(\"com.myorg.myapp.controller.BaseController\", {\n    \u002F**\n     * Convenience method for accessing the component of the controller's view.\n     * @returns {sap.ui.core.Component} The component of the controller's view\n     *\u002F\n    getOwnerComponent: function () {\n        \u002F\u002F comment\n        return Controller.prototype.getOwnerComponent.call(this);\n    },\n    ...\n});\n```\n\nWrong output:\n\n```ts\nexport default class BaseController extends Controller {\n    public getOwnerComponent(): UIComponent {\n        return super.getOwnerComponent() as UIComponent;\n    }\n}\n```\n\nCorrect output:\n\n```ts\n\u002F**\n * My cool controller, it does things.\n * @namespace com.myorg.myapp.controller\n *\u002F\nexport default class BaseController extends Controller {\n    \u002F**\n     * Convenience method for accessing the component of the controller's view.\n     * @returns {sap.ui.core.Component} The component of the controller's view\n     *\u002F\n    public getOwnerComponent(): UIComponent {\n        \u002F\u002F comment\n        return super.getOwnerComponent() as UIComponent;\n    }\n}\n```\n\n### Be diligent\n\nCarefully respect all guidelines in this document (and adapt appropriately where required). Before each conversion step, consider all relevant details from this document.\n\n### Go step-by-step\n\nYou should convert the project step by step, starting with the TypeScript project setup and then the most central files on which other files depend, so those other files can use the typed version of those central files once they are converted as well. `\"allowJs\": true` in the `tsconfig.json`'s `compilerOptions` may be useful to run semi-converted projects if needed.\n\n### Avoid `any` type\n\nDo not take shortcuts, but try to find the proper type or create an interface instead of `any`.\n\nBAD:\n```ts\n(this.getOwnerComponent() as any).getContentDensityClass();\n```\n\nGOOD:\n```ts\n(this.getOwnerComponent() as AppComponent).getContentDensityClass()\n```\n\n### Avoid `unknown` casts\n\nImport and use actual UI5 control types instead (either the base class `sap\u002Fui\u002Fcore\u002FControl` or more specific classes if needed to access the respective property). Inspect the XMLView to find out which control type you actually get when calling `this.byId(...)` in a controller!\nDon't forget using the specific event types like e.g. `Route$PatternMatchedEvent` for routing events.\n\n#### Casting Example\n \nBAD:\n```ts\n(this.byId(\"form\") as unknown as {setVisible: (v: boolean) => void}).setVisible(false);\n```\n \nGOOD:\n \n```ts\nimport SimpleForm from \"sap\u002Fui\u002Flayout\u002Fform\u002FSimpleForm\";\n(this.byId(\"form\") as SimpleForm).setVisible(false);\n```\n\n### Create shared type definitions\n\nMany type definitions you create are useful in different files. Create those in a central location like a file in `src\u002Ftypes\u002F`.\n\n\n## Project Setup Conversion\n\n### 1. package.json\nYou must add the following dev dependencies in the package.json file (very important) if they are not already present:\n\n{{dependencies}}\n\nHowever, if a dependency is already present in package.json, do not increase the major version number of it.\nDo not remove existing dependencies, you must only add new configuration. Install the dependencies early to verify the types are found.\n\n**IMPORTANT**: In addition, you **MUST** also add the `@sapui5\u002Ftypes` (or `@openui5\u002Ftypes`) package in a version matching the UI5 project as dev dependency. Framework type and version can be found in ui5.yaml or using the `get_project_info` MCP tool.\n\nIn addition, if (and ONLY if) dependencies or their versions changed, ensure (or tell the user) to execute npm install \u002F yarn install (whatever is used in the project) to get the changed dependencies in the project.\n\nThe `typescript-eslint` dependency is only relevant when the project already has an eslint setup (details are below).\n\nAlso add the `\"ts-typecheck\": \"tsc --noEmit\"` script to `package.json`, so you and the developer can easily check for TypeScript errors.\n\n### 2. tsconfig.json\n\nAdd a tsconfig.json file. Use the following sample as reference, but adapt to the needs of the current project, e.g. adapt the paths map:\n\n```json\n{\n\t\"compilerOptions\": {\n\t\t\"target\": \"es2023\",\n\t\t\"module\": \"es2022\",\n\t\t\"moduleResolution\": \"node\",\n\t\t\"skipLibCheck\": true,\n\t\t\"allowJs\": true,\n\t\t\"strict\": true,\n\t\t\"strictNullChecks\": false,\n\t\t\"strictPropertyInitialization\": false,\n\t\t\"outDir\": \".\u002Fdist\",\n\t\t\"rootDir\": \".\u002Fwebapp\",\n\t\t\"types\": [\"@sapui5\u002Ftypes\", \"@types\u002Fjquery\", \"@types\u002Fqunit\"],\n\t\t\"paths\": {\n\t\t\t\"com\u002Fmyorg\u002Fmyapp\u002F*\": [\".\u002Fwebapp\u002F*\"],\n\t\t\t\"unit\u002F*\": [\".\u002Fwebapp\u002Ftest\u002Funit\u002F*\"],\n\t\t\t\"integration\u002F*\": [\".\u002Fwebapp\u002Ftest\u002Fintegration\u002F*\"]\n\t\t}\n\t},\n\t\"exclude\": [\".\u002Fwebapp\u002Ftest\u002Fe2e\u002F**\u002F*\"],\n\t\"include\": [\".\u002Fwebapp\u002F**\u002F*\"]\n}\n```\n\n### 3. ui5.yaml\n\nUpdate the ui5.yaml file to use the `ui5-tooling-transpile-task` and `ui5-tooling-transpile-middleware` and ensure that at least the following config is present:\n\n```yaml\nbuilder:\n  customTasks:\n    - name: ui5-tooling-transpile-task\n      afterTask: replaceVersion\nserver:\n  customMiddleware:\n    - name: ui5-tooling-transpile-middleware\n      afterMiddleware: compression\n    - name: ui5-middleware-livereload\n      afterMiddleware: compression\n```\n\nEnsure that the generated ui5.yaml file is valid - avoid duplicate entries, each root configuration must only exist once.\nIf a configuration like `server` already exists, you must add to it instead of adding a second entry.\n\n### 4. Eslint configuration\n\nOnly when the project has eslint set up, enhance the eslint configuration with TypeScript-specific parts. If eslint is not set up with dependency in package.json and an eslint config, then do nothing.\nA complete eslint v9 compatible `eslint.config.mjs` file could e.g. look like this, but the actual content depends on the specific project, so you MUST adapt it!\n\n```js\nimport eslint from \"@eslint\u002Fjs\";\nimport globals from \"globals\";\nimport tseslint from \"typescript-eslint\";\n\nexport default tseslint.config(\n\teslint.configs.recommended,\n\t...tseslint.configs.recommended,\n\t...tseslint.configs.recommendedTypeChecked,\n\t{\n\t\tlanguageOptions: {\n\t\t\tglobals: {\n\t\t\t\t...globals.browser,\n\t\t\t\tsap: \"readonly\"\n\t\t\t},\n\t\t\tecmaVersion: 2023,\n\t\t\tparserOptions: {\n\t\t\t\tproject: true,\n\t\t\t\ttsconfigRootDir: import.meta.dirname\n\t\t\t}\n\t\t}\n\t},\n\t{\n\t\tignores: [\"eslint.config.mjs\"]\n\t}\n);\n```\n\n\n## Application Code Conversion\n \n### Step 1: Change proprietary UI5 class syntax to standard ES class syntax\n \nEvery UI5 class definitions (`SuperClass.extend(...)`) must be converted to a standard JavaScript `class`.\nThe properties in the UI5 class configuration object (second parameter of `extend`) become members of the standard JavaScript class.\nIt is important to annotate the class with the namespace in a JSDoc comment, so the back transformation can re-add it. This @namespace comment MUST immediately precede the class declaration.\nThe namespace is the part of the full package+class name (first parameter of `extend`) that precedes the class name.\n \nBefore (example):\n \n```js\n[... other code, e.g. loading the dependencies \"App\", \"Controller\" etc. ...]\n \nvar App = Controller.extend(\"ui5tssampleapp.controller.App\", {\n    onInit: function _onInit() {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());\n    }\n});\n```\n\n \nAfter (example, do not use this code verbatim):\n \n```js\n[... other code, e.g. loading the dependencies \"App\", \"Controller\" etc. ...]\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nclass App extends Controller {\n    public onInit() {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass((this.getOwnerComponent()).getContentDensityClass());\n    };\n};\n```\n\n \n### Step 2: Change to ECMAScript modules and imports\n \nTypeScript UI5 apps must use modern ES modules and imports.\nHence, convert all UI5 module definition and dependency loading calls (`sap.ui.require(...)`, `sap.ui.define(...)`)\nto ES modules with imports (and in case of `sap.ui.define` a module export).\n \nIn the above example, this looks as follows.\n \nBefore:\n \n```js\nsap.ui.define([\"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\"], function (Controller) {\n    \u002F**\n     * @namespace ui5tssampleapp.controller\n     *\u002F\n    class App extends Controller {\n        ... \u002F\u002F as above\n    };\n \n  return App;\n});\n```\n \nAfter:\n \n```js\nimport Controller from \"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\";\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nexport default class App extends Controller {\n    ... \u002F\u002F as above\n};\n```\n \n`sap.ui.require` shall be converted to just the imports and no export.\nAvoid name clashes for the imported modules.\n \n> Hint: importing `sap\u002Fui\u002Fcore\u002FCore` does not provide the class (like for most other UI5 modules), but the singleton instance of the UI5 Core. So the imported module can be used directly for methods like `byId(...)` instead of calls to `sap.ui.getCore()` which return the singleton in JavaScript.\n\nWhen `sap.ui.require` is used dynamically, e.g. `sap.ui.require([\"sap\u002Fm\u002FMessageBox\"], function(MessageBox) { ... })` inside a method body, then convert this to a dynamic import like `import(\"sap\u002Fm\u002FMessageBox\").then((MessageBox) => { ... })`.\n \n### Step 3: Standard TypeScript Code Adaptations\n \nApply your general knowledge about converting JavaScript code to TypeScript. In particular:\n \n- Add type information to method parameters and variables where needed.\n- Add missing private member class variables (with type information) to the beginning of the class definition. (In JavaScript they are often created later on-the-fly during the lifetime of a class instance.)\n- Convert conventional `function`s to arrow functions when `someFunction.bind(...)` is used because TypeScript does not seem to propagate the type of the bound \"this\" context into the function body.\n- Define further types and structures needed within the code, if applicable.\n \n> IMPORTANT: whenever you use a UI5 type, e.g. for annotating a variable or method parameter\u002Freturntype, do NOT use the UI5 type with its global namespace (like `sap.m.Button` or `sap.ui.core.Popup`)! Instead, import this UI5 type from the respective module (like `sap\u002Fm\u002FButton` or `sap\u002Fui\u002Fcore\u002FPopup` - add an import if needed) and use the imported module.\n \nExample:\n \nWrong:\n```ts\nconst b: sap.m.Button;\nfunction getPopup(): sap.ui.core.Popup  { ... }\n```\n \nCorrect:\n```ts\nimport Button from \"sap\u002Fm\u002FButton\";\nimport Popup from \"sap\u002Fui\u002Fcore\u002FPopup\";\n \nconst b: Button;\nfunction getPopup(): Popup  { ... }\n```\n \nHint: use the actual UI5 control events, not browser events like `Event` or `MouseEvent`, in event handlers of UI5 controls. UI5 events are different. E.g. use the `Button$PressEvent` and `Button$PressEventParameters` from the `sap\u002Fm\u002FButton` module when the `press` event of the `sap\u002Fm\u002FButton` is handled.\n\n> Note: for any event XYZ of a UI5 control ABC, types like `ABC$XYZEvent` and `ABC$XYZEventParameters` are available!\n\n\nExample:\n\nBefore:\n\n```js\nsap.ui.define([\".\u002FBaseController\"], function (BaseController) {\n    return BaseController.extend(\"my.app.controller.Main\", {\n        onPress: function(oEvent) {\n            const button = oEvent.getSource();\n        },\n        \n        onSelectionChange: function(oEvent) {\n            const items = oEvent.getParameter(\"selectedItems\");\n        }\n    });\n});\n```\n\nAfter:\n\n```ts\nimport BaseController from \".\u002FBaseController\";\nimport Button from \"sap\u002Fm\u002FButton\";\nimport {Button$PressEvent} from \"sap\u002Fm\u002FButton\";\nimport {Table$RowSelectionChangeEvent} from \"sap\u002Fui\u002Ftable\u002FTable\";\n\nexport default class Main extends BaseController {\n    onPress(oEvent: Button$PressEvent): void {\n        const button = oEvent.getSource() as Button;\n    }\n    \n    onRowSelectionChange(oEvent: Table$RowSelectionChangeEvent): void {\n        const selectedContext = oEvent.getParameter(\"rowContext\");\n    }\n}\n```\n\n \nHint: use the most specific type which does provide all needed properties. Examples:\n- Use specific types like `KeyboardEvent` or `MouseEvent`, not just `Event` for browser events.\n- Use the `Button$PressEvent` from the `sap\u002Fm\u002FButton` module, not the `sap\u002Fui\u002Fbase\u002FEvent`.\n- The same is valid for all types, not only events.\n \n \n### Step 4: Casts for Return Values of Generic Methods\n \nGeneric getter methods like `document.getElementById(...)` or `someUI5Control.getModel()` or inside a controller `this.byId()` return the super-type of all possible types (in the examples `HTMLElement` and `sap.ui.model.Model` and `sap.ui.core.Element`) although in practice it will usually be a specific sub-type (e.g. an `HTMLAnchorElement` or a `sap.ui.model.odata.v4.ODataModel` or a `sap.m.Input`).\n \nIn many cases you will have to cast the return value to the specific type to use it. The actual type can usually be derived from the context. If not, rather avoid the cast than guessing a wrong one. Also, do not cast to a superclass like `sap.ui.model.Model` when this is anyway the returned type.\n \nThe same is valid for several UI5 methods, most prominently the following:\n- core.byId() \u002F view.byId()\n- control.getBinding()\n- ownerComponent.getModel()\n- event.getSource()\n- component.getRootControl()  \n- this.getOwnerComponent()\n \nThis cast will sometimes also require an additional module import to make the type (like `ODataModel` above) known.\n \nIn the app controller example above, this step would add an additional import of the app's component (called `AppComponent`), so within the `onInit` implementation the required typecast can be done. Without this typecast, the return type of `getOwnerComponent` would be a `sap.ui.core.Component`, which does not have the `getContentDensityClass` method defined in the app component.\n \nBefore:\n```js\nimport Controller from \"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\";\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nexport default class App extends Controller {\n \n    public onInit() {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());\n    };\n \n};\n```\n \nAfter:\n```ts\nimport Controller from \"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\";\nimport AppComponent from \"..\u002FComponent\";\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nexport default class App extends Controller {\n \n    public onInit() : void {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass((this.getOwnerComponent() as AppComponent).getContentDensityClass());\n    };\n \n};\n```\n\n \n(Note: the \"void\" definition of the method return type is not strictly demanded by TypeScript, but is beneficial e.g. depending on the linting settings.)\n\n\n### Step 5: Solving any Remaining Issues\n \nAt this point, the number of remaining TypeScript errors should be vastly reduced.\nIf you clearly recognize some, fix them, but in case of doubt mention the last remaining issues to the developer.\n\n\n## UI5 Control TypeScript Conversion Guidelines\n\n> *This section covers the conversion of UI5 custom controls from JavaScript to TypeScript. This applies both to single custom controls within applications and to control libraries.*\n\nConverting custom UI5 controls to TypeScript requires specific patterns in addition to the general TypeScript conversion (converting the proprietary UI5 class and syntax).\n\n### The Runtime-Generated Methods Problem (CRITICAL)\n\n**This is the most important aspect to understand.**\n\nUI5 generates getter\u002Fsetter (and more) methods for all properties, aggregations, associations, and events at **runtime**. This means TypeScript cannot see these methods at development time, causing type errors.\n\n#### The Problem\n\nIn a control with a `text` property defined in metadata:\n\n```typescript\nstatic readonly metadata: MetadataOptions = {\n    properties: {\n        \"text\": \"string\"\n    }\n};\n```\n\nTypeScript will show errors when trying to use the generated methods:\n\n```typescript\nrm.text(control.getText());  \u002F\u002F ERROR: Property 'getText' does not exist on type 'MyControl'\n```\n\nAdditionally, TypeScript doesn't know the constructor signature structure for initializing controls:\n\n```typescript\nnew MyControl(\"myId\", {text: \"Hello\"}); \u002F\u002F TypeScript doesn't know about the settings object structure\n```\n\nThis affects:\n- Property getters\u002Fsetters: `getText()`, `setText()`, `bindText()`\n- Aggregation methods: `addItem()`, `removeItem()`, `getItems()`, ...\n- Association methods: `getLabel()`, `setLabel()`\n- Event methods: `attachPress()`, `detachPress()`, `firePress()`\n- Constructor settings object structure\n\n#### The Solution: @ui5\u002Fts-interface-generator\n\nInstall the interface generator tool as a dev dependency:\n\n```sh\nnpm install --save-dev @ui5\u002Fts-interface-generator@{{ts-interface-generator-version}}\n```\n\nTo make subsequent development easier, add a script like this to `package.json`:\n\n```json\n{\n    \"scripts\": {\n        \"watch:controls\": \"npx @ui5\u002Fts-interface-generator --watch\"\n    }\n}\n```\n\nNOTE: the tsconfig file related to the controls must be in the same directory in which the interface generator is launched. If you launch it in the root of your project and the tsconfig covering the TypeScript controls is in a subdirectory or has a different name than `tsconfig.json`, then call it like ` npx @ui5\u002Fts-interface-generator --watch --config path\u002Fto\u002Ftsconfig.json`.\n\nAfter TypeScript conversion of all controls, run the generator once to generate the needed control interfaces:\n\n```bash\nnpm run watch:controls\n```\n\nThis generates a `*.gen.d.ts` file (e.g., `MyControl.gen.d.ts`) containing TypeScript interfaces with all the runtime-generated methods. TypeScript merges these interfaces with the control class.\n\nThese generated files should be committed to version control and never edited manually.\n\n#### Required Constructor Signatures (CRITICAL MANUAL STEP)\n\nAfter running the interface generator, you must manually copy the constructor signatures from the terminal output into the respective control class.\n\nThe generator outputs something like:\n\n```\n===== BEGIN =====\n\u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \nconstructor(id?: string | $MyControlSettings);\nconstructor(id?: string, settings?: $MyControlSettings);\nconstructor(id?: string, settings?: $MyControlSettings) { super(id, settings); }\n===== END =====\n```\n\n**Copy these lines into the beginning of the class body**, before the metadata definition:\n\n```typescript\nexport default class MyControl extends Control {\n    \u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \n    constructor(id?: string | $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings) { super(id, settings); }\n\n    static readonly metadata: MetadataOptions = {\n        \u002F\u002F ...\n    };\n}\n```\n\n### Control Metadata Typing\n\nThe control metadata must be typed as `MetadataOptions`:\n\n```typescript\nimport type { MetadataOptions } from \"sap\u002Fui\u002Fcore\u002FElement\";\n\nexport default class MyControl extends Control {\n    static readonly metadata: MetadataOptions = {\n        properties: {\n            \"text\": \"string\"\n        }\n    };\n}\n```\n\n**Important points:**\n- Import `MetadataOptions` from `sap\u002Fui\u002Fcore\u002FElement` for controls (or closest base class - also available for `sap\u002Fui\u002Fcore\u002FObject`, `sap\u002Fui\u002Fcore\u002FManagedObject`, and `sap\u002Fui\u002Fcore\u002FComponent`)\n- Use `import type` instead of `import` (design-time only, no runtime impact)\n- `MetadataOptions` available since UI5 1.110; use `object` for earlier versions\n- Typing prevents issues when inheriting from the control (inherited properties should not be repeated)\n\n### Namespace Annotation Required\n\nThe `@namespace` JSDoc annotation is **required** for the transformer to generate correct UI5 class names:\n\n```typescript\n\u002F**\n * @namespace ui5.typescript.helloworld.control\n *\u002F\nexport default class MyControl extends Control {\n    \u002F\u002F ...\n}\n```\n\n### Export Pattern\n\n**Must use `export default` immediately when defining the class**, otherwise ts-interface-generator will fail:\n\n```typescript\n\u002F\u002F CORRECT:\nexport default class MyControl extends Control {\n    \u002F\u002F ...\n}\n\n\u002F\u002F WRONG - separate export:\nclass MyControl extends Control {\n    \u002F\u002F ...\n}\nexport default MyControl;\n```\n\n### Static Members for Metadata and Renderer\n\nBoth metadata and renderer are defined as `static` class members:\n\n```typescript\nimport RenderManager from \"sap\u002Fui\u002Fcore\u002FRenderManager\";\n\nexport default class MyControl extends Control {\n    static readonly metadata: MetadataOptions = {\n        properties: {\n            \"text\": \"string\"\n        }\n    };\n\n    static renderer = {\n        apiVersion: 2,\n        render: function (rm: RenderManager, control: MyControl): void {\n            rm.openStart(\"div\", control);\n            rm.openEnd();\n            rm.text(control.getText());\n            rm.close(\"div\");\n        }\n    };\n}\n```\n\nThe renderer can also be in a separate file (common in libraries) and should in this case stay separate when converting to TypeScript.\n\nThe following JavaScript code:\n\n```javascript\nsap.ui.define([\n    \"sap\u002Fui\u002Fcore\u002FControl\",\n    \".\u002FMyControlRenderer\"\n], function (Control, MyControlRenderer) {\n    \"use strict\";\n\n    return Control.extend(\"com.myorg.myapp.control.MyControl\", {\n        ...\n        renderer: MyControlRenderer,\n        ...\n```\n\nis then converted to this TypeScript code:\n\n```typescript\nimport Control from \"sap\u002Fui\u002Fcore\u002FControl\";\nimport type { MetadataOptions } from \"sap\u002Fui\u002Fcore\u002FElement\";\nimport MyControlRenderer from \".\u002FMyControlRenderer\";\n\n\u002F**\n * @namespace com.myorg.myapp.control\n *\u002F\nexport default class MyControl extends Control {\n    ...\n    static renderer = MyControlRenderer;\n    ...\n```\n\n### Complete Control Example\n\n#### JavaScript (Before):\n\n```javascript\nsap.ui.define([\n    \"sap\u002Fui\u002Fcore\u002FControl\",\n    \"sap\u002Fui\u002Fcore\u002FRenderManager\"\n], function (Control, RenderManager) {\n    \"use strict\";\n    \n    var MyControl = Control.extend(\"ui5.typescript.helloworld.control.MyControl\", {\n        metadata: {\n            properties: {\n                \"text\": \"string\"\n            },\n            events: {\n                \"press\": {}\n            }\n        },\n        \n        renderer: function (rm, control) {\n            rm.openStart(\"div\", control);\n            rm.openEnd();\n            rm.text(control.getText());\n            rm.close(\"div\");\n        },\n        \n        onclick: function() {\n            this.firePress();\n        }\n    });\n\n    return MyControl;\n});\n```\n\n#### TypeScript (After):\n\n```typescript\nimport Control from \"sap\u002Fui\u002Fcore\u002FControl\";\nimport type { MetadataOptions } from \"sap\u002Fui\u002Fcore\u002FElement\";\nimport RenderManager from \"sap\u002Fui\u002Fcore\u002FRenderManager\";\n\n\u002F**\n * @namespace ui5.typescript.helloworld.control\n *\u002F\nexport default class MyControl extends Control {\n    \u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \n    constructor(id?: string | $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings) { super(id, settings); }\n\n    static readonly metadata: MetadataOptions = {\n        properties: {\n            \"text\": \"string\"\n        },\n        events: {\n            \"press\": {}\n        }\n    };\n\n    static renderer = {\n        apiVersion: 2,\n        render: function (rm: RenderManager, control: MyControl): void {\n            rm.openStart(\"div\", control);\n            rm.openEnd();\n            rm.text(control.getText());\n            rm.close(\"div\");\n        }\n    };\n\n    onclick(): void {\n        this.firePress();\n    }\n}\n```\n\n### Library-Specific Guidelines\n\nWhen converting entire control libraries (not just single controls in apps), additional steps are required:\n\n#### Library Module with Enums (CRITICAL to avoid XSS issues!)\n\nIn `library.ts`, enums must be attached to the global library object for UI5 runtime compatibility:\n\n```typescript\nimport ObjectPath from \"sap\u002Fbase\u002Futil\u002FObjectPath\";\n\n\u002F\u002F Define enum as TypeScript enum\nexport enum ExampleColor {\n    Red = \"Red\",\n    Green = \"Green\",\n    Blue = \"Blue\"\n}\n\n\u002F\u002F CRITICAL: Attach to global library object\nconst thisLib = ObjectPath.get(\"com.myorg.myui5lib\") as {[key: string]: unknown};\nthisLib.ExampleColor = ExampleColor;\n```\n\n**Why this is critical for every enum in the library:**\n- Control properties reference types as global names: `type: \"com.myorg.myui5lib.ExampleColor\"`\n- UI5 runtime needs to find the enum via this global path\n- Without this, UI5 cannot validate the property type\n- This breaks type checking and can create XSS vulnerabilities as unchecked content can be written to HTML unexpectedly\n\n\n#### Path Mapping in tsconfig.json\n\nFor libraries, add path mappings for the library namespace:\n\n```json\n{\n    \"compilerOptions\": {\n        \"paths\": {\n            \"com\u002Fmyorg\u002Fmylib\u002F*\": [\".\u002Fsrc\u002F*\"]\n        }\n    }\n}\n```\n\n### Control Conversion Checklist\n\nWhen converting a control from JavaScript to TypeScript:\n\n1. Convert to ES6 class\u002Fmodule like regular UI5 modules\n2. Add `@namespace` JSDoc annotation\n3. Use `export default` **immediately** with class definition\n4. Type metadata as `MetadataOptions` (import from appropriate base class)\n5. Define metadata and renderer as `static` members\n6. Install and run `@ui5\u002Fts-interface-generator`\n7. Copy constructor signatures from generator output into class\n8. If in a library: manually attach enums to global library object\n9. Preserve all JSDoc comments and documentation\n\n\n## Test Conversion\n\nThere are critical, non-obvious patterns for converting UI5 test code from JavaScript to TypeScript. See [the test conversion document](.\u002Freferences\u002Ftest_conversion.md) for details when tests need to be converted.. ",{"data":34,"body":35},{"name":4,"description":6},{"type":36,"children":37},"root",[38,47,82,89,96,101,106,405,410,536,541,754,760,765,771,800,814,825,830,888,893,945,958,987,994,998,1137,1141,1256,1262,1274,1280,1286,1291,1299,1304,1346,1351,1364,1385,1391,1396,2084,2090,2111,2280,2292,2298,2311,2824,2830,2836,2871,2876,3157,3162,3418,3424,3453,3458,3463,3658,3663,3791,3802,3834,3861,3867,3872,3912,3951,3956,3961,4072,4077,4211,4268,4291,4295,4299,4633,4637,5028,5033,5092,5098,5171,5183,5188,5221,5234,5276,5280,5498,5502,5774,5779,5785,5790,5796,5808,5813,5819,5827,5839,5845,5857,5957,5962,6013,6018,6101,6106,6209,6215,6220,6252,6263,6348,6367,6372,6398,6419,6424,6430,6435,6440,6450,6460,6736,6742,6754,6943,6951,7038,7044,7063,7150,7156,7174,7305,7311,7324,7760,7765,7770,7991,7996,8219,8225,8231,8862,8868,9671,9677,9682,9688,9701,10003,10011,10040,10046,10051,10173,10179,10184,10272,10278,10292],{"type":39,"tag":40,"props":41,"children":43},"element","h1",{"id":42},"ui5-typescript-conversion-guidelines",[44],{"type":45,"value":46},"text","UI5 TypeScript Conversion Guidelines",{"type":39,"tag":48,"props":49,"children":50},"blockquote",{},[51,57],{"type":39,"tag":52,"props":53,"children":54},"p",{},[55],{"type":45,"value":56},"This document outlines how a UI5 (SAPUI5\u002FOpenUI5) project can be converted to TypeScript. It consists of the following parts:",{"type":39,"tag":58,"props":59,"children":60},"ol",{},[61,67,72,77],{"type":39,"tag":62,"props":63,"children":64},"li",{},[65],{"type":45,"value":66},"Important general rules",{"type":39,"tag":62,"props":68,"children":69},{},[70],{"type":45,"value":71},"How the setup of the project needs to be changed",{"type":39,"tag":62,"props":73,"children":74},{},[75],{"type":45,"value":76},"Converting the code itself",{"type":39,"tag":62,"props":78,"children":79},{},[80],{"type":45,"value":81},"Converting tests (reference to separate file)",{"type":39,"tag":83,"props":84,"children":86},"h2",{"id":85},"general-conversion-rules",[87],{"type":45,"value":88},"General Conversion Rules",{"type":39,"tag":90,"props":91,"children":93},"h3",{"id":92},"preserve-all-comments",[94],{"type":45,"value":95},"Preserve ALL comments",{"type":39,"tag":52,"props":97,"children":98},{},[99],{"type":45,"value":100},"You MUST preserve existing JSDoc, documentation and comments - never remove JSDoc or comments during the conversion.",{"type":39,"tag":52,"props":102,"children":103},{},[104],{"type":45,"value":105},"Example input:",{"type":39,"tag":107,"props":108,"children":113},"pre",{"className":109,"code":110,"language":111,"meta":112,"style":112},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F**\n * My cool controller, it does things.\n *\u002F\nreturn Controller.extend(\"com.myorg.myapp.controller.BaseController\", {\n    \u002F**\n     * Convenience method for accessing the component of the controller's view.\n     * @returns {sap.ui.core.Component} The component of the controller's view\n     *\u002F\n    getOwnerComponent: function () {\n        \u002F\u002F comment\n        return Controller.prototype.getOwnerComponent.call(this);\n    },\n    ...\n});\n","js","",[114],{"type":39,"tag":115,"props":116,"children":117},"code",{"__ignoreMap":112},[118,130,139,148,205,214,223,264,273,302,310,371,380,389],{"type":39,"tag":119,"props":120,"children":123},"span",{"class":121,"line":122},"line",1,[124],{"type":39,"tag":119,"props":125,"children":127},{"style":126},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[128],{"type":45,"value":129},"\u002F**\n",{"type":39,"tag":119,"props":131,"children":133},{"class":121,"line":132},2,[134],{"type":39,"tag":119,"props":135,"children":136},{"style":126},[137],{"type":45,"value":138}," * My cool controller, it does things.\n",{"type":39,"tag":119,"props":140,"children":142},{"class":121,"line":141},3,[143],{"type":39,"tag":119,"props":144,"children":145},{"style":126},[146],{"type":45,"value":147}," *\u002F\n",{"type":39,"tag":119,"props":149,"children":150},{"class":121,"line":26},[151,157,163,169,175,180,185,191,195,200],{"type":39,"tag":119,"props":152,"children":154},{"style":153},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[155],{"type":45,"value":156},"return",{"type":39,"tag":119,"props":158,"children":160},{"style":159},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[161],{"type":45,"value":162}," Controller",{"type":39,"tag":119,"props":164,"children":166},{"style":165},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[167],{"type":45,"value":168},".",{"type":39,"tag":119,"props":170,"children":172},{"style":171},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[173],{"type":45,"value":174},"extend",{"type":39,"tag":119,"props":176,"children":177},{"style":159},[178],{"type":45,"value":179},"(",{"type":39,"tag":119,"props":181,"children":182},{"style":165},[183],{"type":45,"value":184},"\"",{"type":39,"tag":119,"props":186,"children":188},{"style":187},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[189],{"type":45,"value":190},"com.myorg.myapp.controller.BaseController",{"type":39,"tag":119,"props":192,"children":193},{"style":165},[194],{"type":45,"value":184},{"type":39,"tag":119,"props":196,"children":197},{"style":165},[198],{"type":45,"value":199},",",{"type":39,"tag":119,"props":201,"children":202},{"style":165},[203],{"type":45,"value":204}," {\n",{"type":39,"tag":119,"props":206,"children":208},{"class":121,"line":207},5,[209],{"type":39,"tag":119,"props":210,"children":211},{"style":126},[212],{"type":45,"value":213},"    \u002F**\n",{"type":39,"tag":119,"props":215,"children":217},{"class":121,"line":216},6,[218],{"type":39,"tag":119,"props":219,"children":220},{"style":126},[221],{"type":45,"value":222},"     * Convenience method for accessing the component of the controller's view.\n",{"type":39,"tag":119,"props":224,"children":226},{"class":121,"line":225},7,[227,232,237,243,248,254,259],{"type":39,"tag":119,"props":228,"children":229},{"style":126},[230],{"type":45,"value":231},"     * ",{"type":39,"tag":119,"props":233,"children":234},{"style":153},[235],{"type":45,"value":236},"@",{"type":39,"tag":119,"props":238,"children":240},{"style":239},"--shiki-light:#9C3EDA;--shiki-light-font-style:italic;--shiki-default:#C792EA;--shiki-default-font-style:italic;--shiki-dark:#C792EA;--shiki-dark-font-style:italic",[241],{"type":45,"value":242},"returns",{"type":39,"tag":119,"props":244,"children":245},{"style":153},[246],{"type":45,"value":247}," {",{"type":39,"tag":119,"props":249,"children":251},{"style":250},"--shiki-light:#E2931D;--shiki-light-font-style:italic;--shiki-default:#FFCB6B;--shiki-default-font-style:italic;--shiki-dark:#FFCB6B;--shiki-dark-font-style:italic",[252],{"type":45,"value":253},"sap.ui.core.Component",{"type":39,"tag":119,"props":255,"children":256},{"style":153},[257],{"type":45,"value":258},"}",{"type":39,"tag":119,"props":260,"children":261},{"style":126},[262],{"type":45,"value":263}," The component of the controller's view\n",{"type":39,"tag":119,"props":265,"children":267},{"class":121,"line":266},8,[268],{"type":39,"tag":119,"props":269,"children":270},{"style":126},[271],{"type":45,"value":272},"     *\u002F\n",{"type":39,"tag":119,"props":274,"children":276},{"class":121,"line":275},9,[277,282,287,293,298],{"type":39,"tag":119,"props":278,"children":279},{"style":171},[280],{"type":45,"value":281},"    getOwnerComponent",{"type":39,"tag":119,"props":283,"children":284},{"style":165},[285],{"type":45,"value":286},":",{"type":39,"tag":119,"props":288,"children":290},{"style":289},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[291],{"type":45,"value":292}," function",{"type":39,"tag":119,"props":294,"children":295},{"style":165},[296],{"type":45,"value":297}," ()",{"type":39,"tag":119,"props":299,"children":300},{"style":165},[301],{"type":45,"value":204},{"type":39,"tag":119,"props":303,"children":304},{"class":121,"line":22},[305],{"type":39,"tag":119,"props":306,"children":307},{"style":126},[308],{"type":45,"value":309},"        \u002F\u002F comment\n",{"type":39,"tag":119,"props":311,"children":313},{"class":121,"line":312},11,[314,319,324,328,333,337,342,346,351,356,361,366],{"type":39,"tag":119,"props":315,"children":316},{"style":153},[317],{"type":45,"value":318},"        return",{"type":39,"tag":119,"props":320,"children":322},{"style":321},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[323],{"type":45,"value":162},{"type":39,"tag":119,"props":325,"children":326},{"style":165},[327],{"type":45,"value":168},{"type":39,"tag":119,"props":329,"children":330},{"style":159},[331],{"type":45,"value":332},"prototype",{"type":39,"tag":119,"props":334,"children":335},{"style":165},[336],{"type":45,"value":168},{"type":39,"tag":119,"props":338,"children":339},{"style":159},[340],{"type":45,"value":341},"getOwnerComponent",{"type":39,"tag":119,"props":343,"children":344},{"style":165},[345],{"type":45,"value":168},{"type":39,"tag":119,"props":347,"children":348},{"style":171},[349],{"type":45,"value":350},"call",{"type":39,"tag":119,"props":352,"children":354},{"style":353},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[355],{"type":45,"value":179},{"type":39,"tag":119,"props":357,"children":358},{"style":165},[359],{"type":45,"value":360},"this",{"type":39,"tag":119,"props":362,"children":363},{"style":353},[364],{"type":45,"value":365},")",{"type":39,"tag":119,"props":367,"children":368},{"style":165},[369],{"type":45,"value":370},";\n",{"type":39,"tag":119,"props":372,"children":374},{"class":121,"line":373},12,[375],{"type":39,"tag":119,"props":376,"children":377},{"style":165},[378],{"type":45,"value":379},"    },\n",{"type":39,"tag":119,"props":381,"children":383},{"class":121,"line":382},13,[384],{"type":39,"tag":119,"props":385,"children":386},{"style":165},[387],{"type":45,"value":388},"    ...\n",{"type":39,"tag":119,"props":390,"children":392},{"class":121,"line":391},14,[393,397,401],{"type":39,"tag":119,"props":394,"children":395},{"style":165},[396],{"type":45,"value":258},{"type":39,"tag":119,"props":398,"children":399},{"style":159},[400],{"type":45,"value":365},{"type":39,"tag":119,"props":402,"children":403},{"style":165},[404],{"type":45,"value":370},{"type":39,"tag":52,"props":406,"children":407},{},[408],{"type":45,"value":409},"Wrong output:",{"type":39,"tag":107,"props":411,"children":415},{"className":412,"code":413,"language":414,"meta":112,"style":112},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default class BaseController extends Controller {\n    public getOwnerComponent(): UIComponent {\n        return super.getOwnerComponent() as UIComponent;\n    }\n}\n","ts",[416],{"type":39,"tag":115,"props":417,"children":418},{"__ignoreMap":112},[419,455,482,520,528],{"type":39,"tag":119,"props":420,"children":421},{"class":121,"line":122},[422,427,432,437,442,447,451],{"type":39,"tag":119,"props":423,"children":424},{"style":153},[425],{"type":45,"value":426},"export",{"type":39,"tag":119,"props":428,"children":429},{"style":153},[430],{"type":45,"value":431}," default",{"type":39,"tag":119,"props":433,"children":434},{"style":289},[435],{"type":45,"value":436}," class",{"type":39,"tag":119,"props":438,"children":439},{"style":321},[440],{"type":45,"value":441}," BaseController",{"type":39,"tag":119,"props":443,"children":444},{"style":289},[445],{"type":45,"value":446}," extends",{"type":39,"tag":119,"props":448,"children":449},{"style":321},[450],{"type":45,"value":162},{"type":39,"tag":119,"props":452,"children":453},{"style":165},[454],{"type":45,"value":204},{"type":39,"tag":119,"props":456,"children":457},{"class":121,"line":132},[458,463,468,473,478],{"type":39,"tag":119,"props":459,"children":460},{"style":289},[461],{"type":45,"value":462},"    public",{"type":39,"tag":119,"props":464,"children":465},{"style":353},[466],{"type":45,"value":467}," getOwnerComponent",{"type":39,"tag":119,"props":469,"children":470},{"style":165},[471],{"type":45,"value":472},"():",{"type":39,"tag":119,"props":474,"children":475},{"style":321},[476],{"type":45,"value":477}," UIComponent",{"type":39,"tag":119,"props":479,"children":480},{"style":165},[481],{"type":45,"value":204},{"type":39,"tag":119,"props":483,"children":484},{"class":121,"line":141},[485,489,494,498,502,507,512,516],{"type":39,"tag":119,"props":486,"children":487},{"style":153},[488],{"type":45,"value":318},{"type":39,"tag":119,"props":490,"children":491},{"style":159},[492],{"type":45,"value":493}," super",{"type":39,"tag":119,"props":495,"children":496},{"style":165},[497],{"type":45,"value":168},{"type":39,"tag":119,"props":499,"children":500},{"style":171},[501],{"type":45,"value":341},{"type":39,"tag":119,"props":503,"children":504},{"style":353},[505],{"type":45,"value":506},"() ",{"type":39,"tag":119,"props":508,"children":509},{"style":153},[510],{"type":45,"value":511},"as",{"type":39,"tag":119,"props":513,"children":514},{"style":321},[515],{"type":45,"value":477},{"type":39,"tag":119,"props":517,"children":518},{"style":165},[519],{"type":45,"value":370},{"type":39,"tag":119,"props":521,"children":522},{"class":121,"line":26},[523],{"type":39,"tag":119,"props":524,"children":525},{"style":165},[526],{"type":45,"value":527},"    }\n",{"type":39,"tag":119,"props":529,"children":530},{"class":121,"line":207},[531],{"type":39,"tag":119,"props":532,"children":533},{"style":165},[534],{"type":45,"value":535},"}\n",{"type":39,"tag":52,"props":537,"children":538},{},[539],{"type":45,"value":540},"Correct output:",{"type":39,"tag":107,"props":542,"children":544},{"className":412,"code":543,"language":414,"meta":112,"style":112},"\u002F**\n * My cool controller, it does things.\n * @namespace com.myorg.myapp.controller\n *\u002F\nexport default class BaseController extends Controller {\n    \u002F**\n     * Convenience method for accessing the component of the controller's view.\n     * @returns {sap.ui.core.Component} The component of the controller's view\n     *\u002F\n    public getOwnerComponent(): UIComponent {\n        \u002F\u002F comment\n        return super.getOwnerComponent() as UIComponent;\n    }\n}\n",[545],{"type":39,"tag":115,"props":546,"children":547},{"__ignoreMap":112},[548,555,562,585,592,623,630,637,668,675,698,705,740,747],{"type":39,"tag":119,"props":549,"children":550},{"class":121,"line":122},[551],{"type":39,"tag":119,"props":552,"children":553},{"style":126},[554],{"type":45,"value":129},{"type":39,"tag":119,"props":556,"children":557},{"class":121,"line":132},[558],{"type":39,"tag":119,"props":559,"children":560},{"style":126},[561],{"type":45,"value":138},{"type":39,"tag":119,"props":563,"children":564},{"class":121,"line":141},[565,570,574,579],{"type":39,"tag":119,"props":566,"children":567},{"style":126},[568],{"type":45,"value":569}," * ",{"type":39,"tag":119,"props":571,"children":572},{"style":153},[573],{"type":45,"value":236},{"type":39,"tag":119,"props":575,"children":576},{"style":239},[577],{"type":45,"value":578},"namespace",{"type":39,"tag":119,"props":580,"children":582},{"style":581},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[583],{"type":45,"value":584}," com.myorg.myapp.controller\n",{"type":39,"tag":119,"props":586,"children":587},{"class":121,"line":26},[588],{"type":39,"tag":119,"props":589,"children":590},{"style":126},[591],{"type":45,"value":147},{"type":39,"tag":119,"props":593,"children":594},{"class":121,"line":207},[595,599,603,607,611,615,619],{"type":39,"tag":119,"props":596,"children":597},{"style":153},[598],{"type":45,"value":426},{"type":39,"tag":119,"props":600,"children":601},{"style":153},[602],{"type":45,"value":431},{"type":39,"tag":119,"props":604,"children":605},{"style":289},[606],{"type":45,"value":436},{"type":39,"tag":119,"props":608,"children":609},{"style":321},[610],{"type":45,"value":441},{"type":39,"tag":119,"props":612,"children":613},{"style":289},[614],{"type":45,"value":446},{"type":39,"tag":119,"props":616,"children":617},{"style":321},[618],{"type":45,"value":162},{"type":39,"tag":119,"props":620,"children":621},{"style":165},[622],{"type":45,"value":204},{"type":39,"tag":119,"props":624,"children":625},{"class":121,"line":216},[626],{"type":39,"tag":119,"props":627,"children":628},{"style":126},[629],{"type":45,"value":213},{"type":39,"tag":119,"props":631,"children":632},{"class":121,"line":225},[633],{"type":39,"tag":119,"props":634,"children":635},{"style":126},[636],{"type":45,"value":222},{"type":39,"tag":119,"props":638,"children":639},{"class":121,"line":266},[640,644,648,652,656,660,664],{"type":39,"tag":119,"props":641,"children":642},{"style":126},[643],{"type":45,"value":231},{"type":39,"tag":119,"props":645,"children":646},{"style":153},[647],{"type":45,"value":236},{"type":39,"tag":119,"props":649,"children":650},{"style":239},[651],{"type":45,"value":242},{"type":39,"tag":119,"props":653,"children":654},{"style":153},[655],{"type":45,"value":247},{"type":39,"tag":119,"props":657,"children":658},{"style":250},[659],{"type":45,"value":253},{"type":39,"tag":119,"props":661,"children":662},{"style":153},[663],{"type":45,"value":258},{"type":39,"tag":119,"props":665,"children":666},{"style":126},[667],{"type":45,"value":263},{"type":39,"tag":119,"props":669,"children":670},{"class":121,"line":275},[671],{"type":39,"tag":119,"props":672,"children":673},{"style":126},[674],{"type":45,"value":272},{"type":39,"tag":119,"props":676,"children":677},{"class":121,"line":22},[678,682,686,690,694],{"type":39,"tag":119,"props":679,"children":680},{"style":289},[681],{"type":45,"value":462},{"type":39,"tag":119,"props":683,"children":684},{"style":353},[685],{"type":45,"value":467},{"type":39,"tag":119,"props":687,"children":688},{"style":165},[689],{"type":45,"value":472},{"type":39,"tag":119,"props":691,"children":692},{"style":321},[693],{"type":45,"value":477},{"type":39,"tag":119,"props":695,"children":696},{"style":165},[697],{"type":45,"value":204},{"type":39,"tag":119,"props":699,"children":700},{"class":121,"line":312},[701],{"type":39,"tag":119,"props":702,"children":703},{"style":126},[704],{"type":45,"value":309},{"type":39,"tag":119,"props":706,"children":707},{"class":121,"line":373},[708,712,716,720,724,728,732,736],{"type":39,"tag":119,"props":709,"children":710},{"style":153},[711],{"type":45,"value":318},{"type":39,"tag":119,"props":713,"children":714},{"style":159},[715],{"type":45,"value":493},{"type":39,"tag":119,"props":717,"children":718},{"style":165},[719],{"type":45,"value":168},{"type":39,"tag":119,"props":721,"children":722},{"style":171},[723],{"type":45,"value":341},{"type":39,"tag":119,"props":725,"children":726},{"style":353},[727],{"type":45,"value":506},{"type":39,"tag":119,"props":729,"children":730},{"style":153},[731],{"type":45,"value":511},{"type":39,"tag":119,"props":733,"children":734},{"style":321},[735],{"type":45,"value":477},{"type":39,"tag":119,"props":737,"children":738},{"style":165},[739],{"type":45,"value":370},{"type":39,"tag":119,"props":741,"children":742},{"class":121,"line":382},[743],{"type":39,"tag":119,"props":744,"children":745},{"style":165},[746],{"type":45,"value":527},{"type":39,"tag":119,"props":748,"children":749},{"class":121,"line":391},[750],{"type":39,"tag":119,"props":751,"children":752},{"style":165},[753],{"type":45,"value":535},{"type":39,"tag":90,"props":755,"children":757},{"id":756},"be-diligent",[758],{"type":45,"value":759},"Be diligent",{"type":39,"tag":52,"props":761,"children":762},{},[763],{"type":45,"value":764},"Carefully respect all guidelines in this document (and adapt appropriately where required). Before each conversion step, consider all relevant details from this document.",{"type":39,"tag":90,"props":766,"children":768},{"id":767},"go-step-by-step",[769],{"type":45,"value":770},"Go step-by-step",{"type":39,"tag":52,"props":772,"children":773},{},[774,776,782,784,790,792,798],{"type":45,"value":775},"You should convert the project step by step, starting with the TypeScript project setup and then the most central files on which other files depend, so those other files can use the typed version of those central files once they are converted as well. ",{"type":39,"tag":115,"props":777,"children":779},{"className":778},[],[780],{"type":45,"value":781},"\"allowJs\": true",{"type":45,"value":783}," in the ",{"type":39,"tag":115,"props":785,"children":787},{"className":786},[],[788],{"type":45,"value":789},"tsconfig.json",{"type":45,"value":791},"'s ",{"type":39,"tag":115,"props":793,"children":795},{"className":794},[],[796],{"type":45,"value":797},"compilerOptions",{"type":45,"value":799}," may be useful to run semi-converted projects if needed.",{"type":39,"tag":90,"props":801,"children":803},{"id":802},"avoid-any-type",[804,806,812],{"type":45,"value":805},"Avoid ",{"type":39,"tag":115,"props":807,"children":809},{"className":808},[],[810],{"type":45,"value":811},"any",{"type":45,"value":813}," type",{"type":39,"tag":52,"props":815,"children":816},{},[817,819,824],{"type":45,"value":818},"Do not take shortcuts, but try to find the proper type or create an interface instead of ",{"type":39,"tag":115,"props":820,"children":822},{"className":821},[],[823],{"type":45,"value":811},{"type":45,"value":168},{"type":39,"tag":52,"props":826,"children":827},{},[828],{"type":45,"value":829},"BAD:",{"type":39,"tag":107,"props":831,"children":833},{"className":412,"code":832,"language":414,"meta":112,"style":112},"(this.getOwnerComponent() as any).getContentDensityClass();\n",[834],{"type":39,"tag":115,"props":835,"children":836},{"__ignoreMap":112},[837],{"type":39,"tag":119,"props":838,"children":839},{"class":121,"line":122},[840,844,849,853,857,861,866,870,874,879,884],{"type":39,"tag":119,"props":841,"children":842},{"style":159},[843],{"type":45,"value":179},{"type":39,"tag":119,"props":845,"children":846},{"style":165},[847],{"type":45,"value":848},"this.",{"type":39,"tag":119,"props":850,"children":851},{"style":171},[852],{"type":45,"value":341},{"type":39,"tag":119,"props":854,"children":855},{"style":159},[856],{"type":45,"value":506},{"type":39,"tag":119,"props":858,"children":859},{"style":153},[860],{"type":45,"value":511},{"type":39,"tag":119,"props":862,"children":863},{"style":321},[864],{"type":45,"value":865}," any",{"type":39,"tag":119,"props":867,"children":868},{"style":159},[869],{"type":45,"value":365},{"type":39,"tag":119,"props":871,"children":872},{"style":165},[873],{"type":45,"value":168},{"type":39,"tag":119,"props":875,"children":876},{"style":171},[877],{"type":45,"value":878},"getContentDensityClass",{"type":39,"tag":119,"props":880,"children":881},{"style":159},[882],{"type":45,"value":883},"()",{"type":39,"tag":119,"props":885,"children":886},{"style":165},[887],{"type":45,"value":370},{"type":39,"tag":52,"props":889,"children":890},{},[891],{"type":45,"value":892},"GOOD:",{"type":39,"tag":107,"props":894,"children":896},{"className":412,"code":895,"language":414,"meta":112,"style":112},"(this.getOwnerComponent() as AppComponent).getContentDensityClass()\n",[897],{"type":39,"tag":115,"props":898,"children":899},{"__ignoreMap":112},[900],{"type":39,"tag":119,"props":901,"children":902},{"class":121,"line":122},[903,907,911,915,919,923,928,932,936,940],{"type":39,"tag":119,"props":904,"children":905},{"style":159},[906],{"type":45,"value":179},{"type":39,"tag":119,"props":908,"children":909},{"style":165},[910],{"type":45,"value":848},{"type":39,"tag":119,"props":912,"children":913},{"style":171},[914],{"type":45,"value":341},{"type":39,"tag":119,"props":916,"children":917},{"style":159},[918],{"type":45,"value":506},{"type":39,"tag":119,"props":920,"children":921},{"style":153},[922],{"type":45,"value":511},{"type":39,"tag":119,"props":924,"children":925},{"style":321},[926],{"type":45,"value":927}," AppComponent",{"type":39,"tag":119,"props":929,"children":930},{"style":159},[931],{"type":45,"value":365},{"type":39,"tag":119,"props":933,"children":934},{"style":165},[935],{"type":45,"value":168},{"type":39,"tag":119,"props":937,"children":938},{"style":171},[939],{"type":45,"value":878},{"type":39,"tag":119,"props":941,"children":942},{"style":159},[943],{"type":45,"value":944},"()\n",{"type":39,"tag":90,"props":946,"children":948},{"id":947},"avoid-unknown-casts",[949,950,956],{"type":45,"value":805},{"type":39,"tag":115,"props":951,"children":953},{"className":952},[],[954],{"type":45,"value":955},"unknown",{"type":45,"value":957}," casts",{"type":39,"tag":52,"props":959,"children":960},{},[961,963,969,971,977,979,985],{"type":45,"value":962},"Import and use actual UI5 control types instead (either the base class ",{"type":39,"tag":115,"props":964,"children":966},{"className":965},[],[967],{"type":45,"value":968},"sap\u002Fui\u002Fcore\u002FControl",{"type":45,"value":970}," or more specific classes if needed to access the respective property). Inspect the XMLView to find out which control type you actually get when calling ",{"type":39,"tag":115,"props":972,"children":974},{"className":973},[],[975],{"type":45,"value":976},"this.byId(...)",{"type":45,"value":978}," in a controller!\nDon't forget using the specific event types like e.g. ",{"type":39,"tag":115,"props":980,"children":982},{"className":981},[],[983],{"type":45,"value":984},"Route$PatternMatchedEvent",{"type":45,"value":986}," for routing events.",{"type":39,"tag":988,"props":989,"children":991},"h4",{"id":990},"casting-example",[992],{"type":45,"value":993},"Casting Example",{"type":39,"tag":52,"props":995,"children":996},{},[997],{"type":45,"value":829},{"type":39,"tag":107,"props":999,"children":1001},{"className":412,"code":1000,"language":414,"meta":112,"style":112},"(this.byId(\"form\") as unknown as {setVisible: (v: boolean) => void}).setVisible(false);\n",[1002],{"type":39,"tag":115,"props":1003,"children":1004},{"__ignoreMap":112},[1005],{"type":39,"tag":119,"props":1006,"children":1007},{"class":121,"line":122},[1008,1012,1016,1021,1025,1029,1034,1038,1043,1047,1052,1057,1061,1066,1070,1075,1080,1084,1089,1093,1098,1103,1107,1111,1115,1119,1123,1129,1133],{"type":39,"tag":119,"props":1009,"children":1010},{"style":159},[1011],{"type":45,"value":179},{"type":39,"tag":119,"props":1013,"children":1014},{"style":165},[1015],{"type":45,"value":848},{"type":39,"tag":119,"props":1017,"children":1018},{"style":171},[1019],{"type":45,"value":1020},"byId",{"type":39,"tag":119,"props":1022,"children":1023},{"style":159},[1024],{"type":45,"value":179},{"type":39,"tag":119,"props":1026,"children":1027},{"style":165},[1028],{"type":45,"value":184},{"type":39,"tag":119,"props":1030,"children":1031},{"style":187},[1032],{"type":45,"value":1033},"form",{"type":39,"tag":119,"props":1035,"children":1036},{"style":165},[1037],{"type":45,"value":184},{"type":39,"tag":119,"props":1039,"children":1040},{"style":159},[1041],{"type":45,"value":1042},") ",{"type":39,"tag":119,"props":1044,"children":1045},{"style":153},[1046],{"type":45,"value":511},{"type":39,"tag":119,"props":1048,"children":1049},{"style":321},[1050],{"type":45,"value":1051}," unknown",{"type":39,"tag":119,"props":1053,"children":1054},{"style":153},[1055],{"type":45,"value":1056}," as",{"type":39,"tag":119,"props":1058,"children":1059},{"style":165},[1060],{"type":45,"value":247},{"type":39,"tag":119,"props":1062,"children":1063},{"style":353},[1064],{"type":45,"value":1065},"setVisible",{"type":39,"tag":119,"props":1067,"children":1068},{"style":165},[1069],{"type":45,"value":286},{"type":39,"tag":119,"props":1071,"children":1072},{"style":165},[1073],{"type":45,"value":1074}," (",{"type":39,"tag":119,"props":1076,"children":1077},{"style":581},[1078],{"type":45,"value":1079},"v",{"type":39,"tag":119,"props":1081,"children":1082},{"style":165},[1083],{"type":45,"value":286},{"type":39,"tag":119,"props":1085,"children":1086},{"style":321},[1087],{"type":45,"value":1088}," boolean",{"type":39,"tag":119,"props":1090,"children":1091},{"style":165},[1092],{"type":45,"value":365},{"type":39,"tag":119,"props":1094,"children":1095},{"style":289},[1096],{"type":45,"value":1097}," =>",{"type":39,"tag":119,"props":1099,"children":1100},{"style":321},[1101],{"type":45,"value":1102}," void",{"type":39,"tag":119,"props":1104,"children":1105},{"style":165},[1106],{"type":45,"value":258},{"type":39,"tag":119,"props":1108,"children":1109},{"style":159},[1110],{"type":45,"value":365},{"type":39,"tag":119,"props":1112,"children":1113},{"style":165},[1114],{"type":45,"value":168},{"type":39,"tag":119,"props":1116,"children":1117},{"style":171},[1118],{"type":45,"value":1065},{"type":39,"tag":119,"props":1120,"children":1121},{"style":159},[1122],{"type":45,"value":179},{"type":39,"tag":119,"props":1124,"children":1126},{"style":1125},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1127],{"type":45,"value":1128},"false",{"type":39,"tag":119,"props":1130,"children":1131},{"style":159},[1132],{"type":45,"value":365},{"type":39,"tag":119,"props":1134,"children":1135},{"style":165},[1136],{"type":45,"value":370},{"type":39,"tag":52,"props":1138,"children":1139},{},[1140],{"type":45,"value":892},{"type":39,"tag":107,"props":1142,"children":1144},{"className":412,"code":1143,"language":414,"meta":112,"style":112},"import SimpleForm from \"sap\u002Fui\u002Flayout\u002Fform\u002FSimpleForm\";\n(this.byId(\"form\") as SimpleForm).setVisible(false);\n",[1145],{"type":39,"tag":115,"props":1146,"children":1147},{"__ignoreMap":112},[1148,1184],{"type":39,"tag":119,"props":1149,"children":1150},{"class":121,"line":122},[1151,1156,1161,1166,1171,1176,1180],{"type":39,"tag":119,"props":1152,"children":1153},{"style":153},[1154],{"type":45,"value":1155},"import",{"type":39,"tag":119,"props":1157,"children":1158},{"style":159},[1159],{"type":45,"value":1160}," SimpleForm ",{"type":39,"tag":119,"props":1162,"children":1163},{"style":153},[1164],{"type":45,"value":1165},"from",{"type":39,"tag":119,"props":1167,"children":1168},{"style":165},[1169],{"type":45,"value":1170}," \"",{"type":39,"tag":119,"props":1172,"children":1173},{"style":187},[1174],{"type":45,"value":1175},"sap\u002Fui\u002Flayout\u002Fform\u002FSimpleForm",{"type":39,"tag":119,"props":1177,"children":1178},{"style":165},[1179],{"type":45,"value":184},{"type":39,"tag":119,"props":1181,"children":1182},{"style":165},[1183],{"type":45,"value":370},{"type":39,"tag":119,"props":1185,"children":1186},{"class":121,"line":132},[1187,1191,1195,1199,1203,1207,1211,1215,1219,1223,1228,1232,1236,1240,1244,1248,1252],{"type":39,"tag":119,"props":1188,"children":1189},{"style":159},[1190],{"type":45,"value":179},{"type":39,"tag":119,"props":1192,"children":1193},{"style":165},[1194],{"type":45,"value":848},{"type":39,"tag":119,"props":1196,"children":1197},{"style":171},[1198],{"type":45,"value":1020},{"type":39,"tag":119,"props":1200,"children":1201},{"style":159},[1202],{"type":45,"value":179},{"type":39,"tag":119,"props":1204,"children":1205},{"style":165},[1206],{"type":45,"value":184},{"type":39,"tag":119,"props":1208,"children":1209},{"style":187},[1210],{"type":45,"value":1033},{"type":39,"tag":119,"props":1212,"children":1213},{"style":165},[1214],{"type":45,"value":184},{"type":39,"tag":119,"props":1216,"children":1217},{"style":159},[1218],{"type":45,"value":1042},{"type":39,"tag":119,"props":1220,"children":1221},{"style":153},[1222],{"type":45,"value":511},{"type":39,"tag":119,"props":1224,"children":1225},{"style":321},[1226],{"type":45,"value":1227}," SimpleForm",{"type":39,"tag":119,"props":1229,"children":1230},{"style":159},[1231],{"type":45,"value":365},{"type":39,"tag":119,"props":1233,"children":1234},{"style":165},[1235],{"type":45,"value":168},{"type":39,"tag":119,"props":1237,"children":1238},{"style":171},[1239],{"type":45,"value":1065},{"type":39,"tag":119,"props":1241,"children":1242},{"style":159},[1243],{"type":45,"value":179},{"type":39,"tag":119,"props":1245,"children":1246},{"style":1125},[1247],{"type":45,"value":1128},{"type":39,"tag":119,"props":1249,"children":1250},{"style":159},[1251],{"type":45,"value":365},{"type":39,"tag":119,"props":1253,"children":1254},{"style":165},[1255],{"type":45,"value":370},{"type":39,"tag":90,"props":1257,"children":1259},{"id":1258},"create-shared-type-definitions",[1260],{"type":45,"value":1261},"Create shared type definitions",{"type":39,"tag":52,"props":1263,"children":1264},{},[1265,1267,1273],{"type":45,"value":1266},"Many type definitions you create are useful in different files. Create those in a central location like a file in ",{"type":39,"tag":115,"props":1268,"children":1270},{"className":1269},[],[1271],{"type":45,"value":1272},"src\u002Ftypes\u002F",{"type":45,"value":168},{"type":39,"tag":83,"props":1275,"children":1277},{"id":1276},"project-setup-conversion",[1278],{"type":45,"value":1279},"Project Setup Conversion",{"type":39,"tag":90,"props":1281,"children":1283},{"id":1282},"_1-packagejson",[1284],{"type":45,"value":1285},"1. package.json",{"type":39,"tag":52,"props":1287,"children":1288},{},[1289],{"type":45,"value":1290},"You must add the following dev dependencies in the package.json file (very important) if they are not already present:",{"type":39,"tag":52,"props":1292,"children":1293},{},[1294],{"type":39,"tag":1295,"props":1296,"children":1298},"binding",{"value":1297},"dependencies",[],{"type":39,"tag":52,"props":1300,"children":1301},{},[1302],{"type":45,"value":1303},"However, if a dependency is already present in package.json, do not increase the major version number of it.\nDo not remove existing dependencies, you must only add new configuration. Install the dependencies early to verify the types are found.",{"type":39,"tag":52,"props":1305,"children":1306},{},[1307,1313,1315,1320,1322,1328,1330,1336,1338,1344],{"type":39,"tag":1308,"props":1309,"children":1310},"strong",{},[1311],{"type":45,"value":1312},"IMPORTANT",{"type":45,"value":1314},": In addition, you ",{"type":39,"tag":1308,"props":1316,"children":1317},{},[1318],{"type":45,"value":1319},"MUST",{"type":45,"value":1321}," also add the ",{"type":39,"tag":115,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":45,"value":1327},"@sapui5\u002Ftypes",{"type":45,"value":1329}," (or ",{"type":39,"tag":115,"props":1331,"children":1333},{"className":1332},[],[1334],{"type":45,"value":1335},"@openui5\u002Ftypes",{"type":45,"value":1337},") package in a version matching the UI5 project as dev dependency. Framework type and version can be found in ui5.yaml or using the ",{"type":39,"tag":115,"props":1339,"children":1341},{"className":1340},[],[1342],{"type":45,"value":1343},"get_project_info",{"type":45,"value":1345}," MCP tool.",{"type":39,"tag":52,"props":1347,"children":1348},{},[1349],{"type":45,"value":1350},"In addition, if (and ONLY if) dependencies or their versions changed, ensure (or tell the user) to execute npm install \u002F yarn install (whatever is used in the project) to get the changed dependencies in the project.",{"type":39,"tag":52,"props":1352,"children":1353},{},[1354,1356,1362],{"type":45,"value":1355},"The ",{"type":39,"tag":115,"props":1357,"children":1359},{"className":1358},[],[1360],{"type":45,"value":1361},"typescript-eslint",{"type":45,"value":1363}," dependency is only relevant when the project already has an eslint setup (details are below).",{"type":39,"tag":52,"props":1365,"children":1366},{},[1367,1369,1375,1377,1383],{"type":45,"value":1368},"Also add the ",{"type":39,"tag":115,"props":1370,"children":1372},{"className":1371},[],[1373],{"type":45,"value":1374},"\"ts-typecheck\": \"tsc --noEmit\"",{"type":45,"value":1376}," script to ",{"type":39,"tag":115,"props":1378,"children":1380},{"className":1379},[],[1381],{"type":45,"value":1382},"package.json",{"type":45,"value":1384},", so you and the developer can easily check for TypeScript errors.",{"type":39,"tag":90,"props":1386,"children":1388},{"id":1387},"_2-tsconfigjson",[1389],{"type":45,"value":1390},"2. tsconfig.json",{"type":39,"tag":52,"props":1392,"children":1393},{},[1394],{"type":45,"value":1395},"Add a tsconfig.json file. Use the following sample as reference, but adapt to the needs of the current project, e.g. adapt the paths map:",{"type":39,"tag":107,"props":1397,"children":1401},{"className":1398,"code":1399,"language":1400,"meta":112,"style":112},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n    \"compilerOptions\": {\n        \"target\": \"es2023\",\n        \"module\": \"es2022\",\n        \"moduleResolution\": \"node\",\n        \"skipLibCheck\": true,\n        \"allowJs\": true,\n        \"strict\": true,\n        \"strictNullChecks\": false,\n        \"strictPropertyInitialization\": false,\n        \"outDir\": \".\u002Fdist\",\n        \"rootDir\": \".\u002Fwebapp\",\n        \"types\": [\"@sapui5\u002Ftypes\", \"@types\u002Fjquery\", \"@types\u002Fqunit\"],\n        \"paths\": {\n            \"com\u002Fmyorg\u002Fmyapp\u002F*\": [\".\u002Fwebapp\u002F*\"],\n            \"unit\u002F*\": [\".\u002Fwebapp\u002Ftest\u002Funit\u002F*\"],\n            \"integration\u002F*\": [\".\u002Fwebapp\u002Ftest\u002Fintegration\u002F*\"]\n        }\n    },\n    \"exclude\": [\".\u002Fwebapp\u002Ftest\u002Fe2e\u002F**\u002F*\"],\n    \"include\": [\".\u002Fwebapp\u002F**\u002F*\"]\n}\n","json",[1402],{"type":39,"tag":115,"props":1403,"children":1404},{"__ignoreMap":112},[1405,1413,1437,1476,1513,1550,1575,1599,1623,1648,1672,1709,1746,1822,1846,1890,1932,1975,1984,1992,2034,2076],{"type":39,"tag":119,"props":1406,"children":1407},{"class":121,"line":122},[1408],{"type":39,"tag":119,"props":1409,"children":1410},{"style":165},[1411],{"type":45,"value":1412},"{\n",{"type":39,"tag":119,"props":1414,"children":1415},{"class":121,"line":132},[1416,1421,1425,1429,1433],{"type":39,"tag":119,"props":1417,"children":1418},{"style":165},[1419],{"type":45,"value":1420},"    \"",{"type":39,"tag":119,"props":1422,"children":1423},{"style":289},[1424],{"type":45,"value":797},{"type":39,"tag":119,"props":1426,"children":1427},{"style":165},[1428],{"type":45,"value":184},{"type":39,"tag":119,"props":1430,"children":1431},{"style":165},[1432],{"type":45,"value":286},{"type":39,"tag":119,"props":1434,"children":1435},{"style":165},[1436],{"type":45,"value":204},{"type":39,"tag":119,"props":1438,"children":1439},{"class":121,"line":141},[1440,1445,1450,1454,1458,1462,1467,1471],{"type":39,"tag":119,"props":1441,"children":1442},{"style":165},[1443],{"type":45,"value":1444},"        \"",{"type":39,"tag":119,"props":1446,"children":1447},{"style":321},[1448],{"type":45,"value":1449},"target",{"type":39,"tag":119,"props":1451,"children":1452},{"style":165},[1453],{"type":45,"value":184},{"type":39,"tag":119,"props":1455,"children":1456},{"style":165},[1457],{"type":45,"value":286},{"type":39,"tag":119,"props":1459,"children":1460},{"style":165},[1461],{"type":45,"value":1170},{"type":39,"tag":119,"props":1463,"children":1464},{"style":187},[1465],{"type":45,"value":1466},"es2023",{"type":39,"tag":119,"props":1468,"children":1469},{"style":165},[1470],{"type":45,"value":184},{"type":39,"tag":119,"props":1472,"children":1473},{"style":165},[1474],{"type":45,"value":1475},",\n",{"type":39,"tag":119,"props":1477,"children":1478},{"class":121,"line":26},[1479,1483,1488,1492,1496,1500,1505,1509],{"type":39,"tag":119,"props":1480,"children":1481},{"style":165},[1482],{"type":45,"value":1444},{"type":39,"tag":119,"props":1484,"children":1485},{"style":321},[1486],{"type":45,"value":1487},"module",{"type":39,"tag":119,"props":1489,"children":1490},{"style":165},[1491],{"type":45,"value":184},{"type":39,"tag":119,"props":1493,"children":1494},{"style":165},[1495],{"type":45,"value":286},{"type":39,"tag":119,"props":1497,"children":1498},{"style":165},[1499],{"type":45,"value":1170},{"type":39,"tag":119,"props":1501,"children":1502},{"style":187},[1503],{"type":45,"value":1504},"es2022",{"type":39,"tag":119,"props":1506,"children":1507},{"style":165},[1508],{"type":45,"value":184},{"type":39,"tag":119,"props":1510,"children":1511},{"style":165},[1512],{"type":45,"value":1475},{"type":39,"tag":119,"props":1514,"children":1515},{"class":121,"line":207},[1516,1520,1525,1529,1533,1537,1542,1546],{"type":39,"tag":119,"props":1517,"children":1518},{"style":165},[1519],{"type":45,"value":1444},{"type":39,"tag":119,"props":1521,"children":1522},{"style":321},[1523],{"type":45,"value":1524},"moduleResolution",{"type":39,"tag":119,"props":1526,"children":1527},{"style":165},[1528],{"type":45,"value":184},{"type":39,"tag":119,"props":1530,"children":1531},{"style":165},[1532],{"type":45,"value":286},{"type":39,"tag":119,"props":1534,"children":1535},{"style":165},[1536],{"type":45,"value":1170},{"type":39,"tag":119,"props":1538,"children":1539},{"style":187},[1540],{"type":45,"value":1541},"node",{"type":39,"tag":119,"props":1543,"children":1544},{"style":165},[1545],{"type":45,"value":184},{"type":39,"tag":119,"props":1547,"children":1548},{"style":165},[1549],{"type":45,"value":1475},{"type":39,"tag":119,"props":1551,"children":1552},{"class":121,"line":216},[1553,1557,1562,1566,1570],{"type":39,"tag":119,"props":1554,"children":1555},{"style":165},[1556],{"type":45,"value":1444},{"type":39,"tag":119,"props":1558,"children":1559},{"style":321},[1560],{"type":45,"value":1561},"skipLibCheck",{"type":39,"tag":119,"props":1563,"children":1564},{"style":165},[1565],{"type":45,"value":184},{"type":39,"tag":119,"props":1567,"children":1568},{"style":165},[1569],{"type":45,"value":286},{"type":39,"tag":119,"props":1571,"children":1572},{"style":165},[1573],{"type":45,"value":1574}," true,\n",{"type":39,"tag":119,"props":1576,"children":1577},{"class":121,"line":225},[1578,1582,1587,1591,1595],{"type":39,"tag":119,"props":1579,"children":1580},{"style":165},[1581],{"type":45,"value":1444},{"type":39,"tag":119,"props":1583,"children":1584},{"style":321},[1585],{"type":45,"value":1586},"allowJs",{"type":39,"tag":119,"props":1588,"children":1589},{"style":165},[1590],{"type":45,"value":184},{"type":39,"tag":119,"props":1592,"children":1593},{"style":165},[1594],{"type":45,"value":286},{"type":39,"tag":119,"props":1596,"children":1597},{"style":165},[1598],{"type":45,"value":1574},{"type":39,"tag":119,"props":1600,"children":1601},{"class":121,"line":266},[1602,1606,1611,1615,1619],{"type":39,"tag":119,"props":1603,"children":1604},{"style":165},[1605],{"type":45,"value":1444},{"type":39,"tag":119,"props":1607,"children":1608},{"style":321},[1609],{"type":45,"value":1610},"strict",{"type":39,"tag":119,"props":1612,"children":1613},{"style":165},[1614],{"type":45,"value":184},{"type":39,"tag":119,"props":1616,"children":1617},{"style":165},[1618],{"type":45,"value":286},{"type":39,"tag":119,"props":1620,"children":1621},{"style":165},[1622],{"type":45,"value":1574},{"type":39,"tag":119,"props":1624,"children":1625},{"class":121,"line":275},[1626,1630,1635,1639,1643],{"type":39,"tag":119,"props":1627,"children":1628},{"style":165},[1629],{"type":45,"value":1444},{"type":39,"tag":119,"props":1631,"children":1632},{"style":321},[1633],{"type":45,"value":1634},"strictNullChecks",{"type":39,"tag":119,"props":1636,"children":1637},{"style":165},[1638],{"type":45,"value":184},{"type":39,"tag":119,"props":1640,"children":1641},{"style":165},[1642],{"type":45,"value":286},{"type":39,"tag":119,"props":1644,"children":1645},{"style":165},[1646],{"type":45,"value":1647}," false,\n",{"type":39,"tag":119,"props":1649,"children":1650},{"class":121,"line":22},[1651,1655,1660,1664,1668],{"type":39,"tag":119,"props":1652,"children":1653},{"style":165},[1654],{"type":45,"value":1444},{"type":39,"tag":119,"props":1656,"children":1657},{"style":321},[1658],{"type":45,"value":1659},"strictPropertyInitialization",{"type":39,"tag":119,"props":1661,"children":1662},{"style":165},[1663],{"type":45,"value":184},{"type":39,"tag":119,"props":1665,"children":1666},{"style":165},[1667],{"type":45,"value":286},{"type":39,"tag":119,"props":1669,"children":1670},{"style":165},[1671],{"type":45,"value":1647},{"type":39,"tag":119,"props":1673,"children":1674},{"class":121,"line":312},[1675,1679,1684,1688,1692,1696,1701,1705],{"type":39,"tag":119,"props":1676,"children":1677},{"style":165},[1678],{"type":45,"value":1444},{"type":39,"tag":119,"props":1680,"children":1681},{"style":321},[1682],{"type":45,"value":1683},"outDir",{"type":39,"tag":119,"props":1685,"children":1686},{"style":165},[1687],{"type":45,"value":184},{"type":39,"tag":119,"props":1689,"children":1690},{"style":165},[1691],{"type":45,"value":286},{"type":39,"tag":119,"props":1693,"children":1694},{"style":165},[1695],{"type":45,"value":1170},{"type":39,"tag":119,"props":1697,"children":1698},{"style":187},[1699],{"type":45,"value":1700},".\u002Fdist",{"type":39,"tag":119,"props":1702,"children":1703},{"style":165},[1704],{"type":45,"value":184},{"type":39,"tag":119,"props":1706,"children":1707},{"style":165},[1708],{"type":45,"value":1475},{"type":39,"tag":119,"props":1710,"children":1711},{"class":121,"line":373},[1712,1716,1721,1725,1729,1733,1738,1742],{"type":39,"tag":119,"props":1713,"children":1714},{"style":165},[1715],{"type":45,"value":1444},{"type":39,"tag":119,"props":1717,"children":1718},{"style":321},[1719],{"type":45,"value":1720},"rootDir",{"type":39,"tag":119,"props":1722,"children":1723},{"style":165},[1724],{"type":45,"value":184},{"type":39,"tag":119,"props":1726,"children":1727},{"style":165},[1728],{"type":45,"value":286},{"type":39,"tag":119,"props":1730,"children":1731},{"style":165},[1732],{"type":45,"value":1170},{"type":39,"tag":119,"props":1734,"children":1735},{"style":187},[1736],{"type":45,"value":1737},".\u002Fwebapp",{"type":39,"tag":119,"props":1739,"children":1740},{"style":165},[1741],{"type":45,"value":184},{"type":39,"tag":119,"props":1743,"children":1744},{"style":165},[1745],{"type":45,"value":1475},{"type":39,"tag":119,"props":1747,"children":1748},{"class":121,"line":382},[1749,1753,1758,1762,1766,1771,1775,1779,1783,1787,1791,1796,1800,1804,1808,1813,1817],{"type":39,"tag":119,"props":1750,"children":1751},{"style":165},[1752],{"type":45,"value":1444},{"type":39,"tag":119,"props":1754,"children":1755},{"style":321},[1756],{"type":45,"value":1757},"types",{"type":39,"tag":119,"props":1759,"children":1760},{"style":165},[1761],{"type":45,"value":184},{"type":39,"tag":119,"props":1763,"children":1764},{"style":165},[1765],{"type":45,"value":286},{"type":39,"tag":119,"props":1767,"children":1768},{"style":165},[1769],{"type":45,"value":1770}," [",{"type":39,"tag":119,"props":1772,"children":1773},{"style":165},[1774],{"type":45,"value":184},{"type":39,"tag":119,"props":1776,"children":1777},{"style":187},[1778],{"type":45,"value":1327},{"type":39,"tag":119,"props":1780,"children":1781},{"style":165},[1782],{"type":45,"value":184},{"type":39,"tag":119,"props":1784,"children":1785},{"style":165},[1786],{"type":45,"value":199},{"type":39,"tag":119,"props":1788,"children":1789},{"style":165},[1790],{"type":45,"value":1170},{"type":39,"tag":119,"props":1792,"children":1793},{"style":187},[1794],{"type":45,"value":1795},"@types\u002Fjquery",{"type":39,"tag":119,"props":1797,"children":1798},{"style":165},[1799],{"type":45,"value":184},{"type":39,"tag":119,"props":1801,"children":1802},{"style":165},[1803],{"type":45,"value":199},{"type":39,"tag":119,"props":1805,"children":1806},{"style":165},[1807],{"type":45,"value":1170},{"type":39,"tag":119,"props":1809,"children":1810},{"style":187},[1811],{"type":45,"value":1812},"@types\u002Fqunit",{"type":39,"tag":119,"props":1814,"children":1815},{"style":165},[1816],{"type":45,"value":184},{"type":39,"tag":119,"props":1818,"children":1819},{"style":165},[1820],{"type":45,"value":1821},"],\n",{"type":39,"tag":119,"props":1823,"children":1824},{"class":121,"line":391},[1825,1829,1834,1838,1842],{"type":39,"tag":119,"props":1826,"children":1827},{"style":165},[1828],{"type":45,"value":1444},{"type":39,"tag":119,"props":1830,"children":1831},{"style":321},[1832],{"type":45,"value":1833},"paths",{"type":39,"tag":119,"props":1835,"children":1836},{"style":165},[1837],{"type":45,"value":184},{"type":39,"tag":119,"props":1839,"children":1840},{"style":165},[1841],{"type":45,"value":286},{"type":39,"tag":119,"props":1843,"children":1844},{"style":165},[1845],{"type":45,"value":204},{"type":39,"tag":119,"props":1847,"children":1849},{"class":121,"line":1848},15,[1850,1855,1861,1865,1869,1873,1877,1882,1886],{"type":39,"tag":119,"props":1851,"children":1852},{"style":165},[1853],{"type":45,"value":1854},"            \"",{"type":39,"tag":119,"props":1856,"children":1858},{"style":1857},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1859],{"type":45,"value":1860},"com\u002Fmyorg\u002Fmyapp\u002F*",{"type":39,"tag":119,"props":1862,"children":1863},{"style":165},[1864],{"type":45,"value":184},{"type":39,"tag":119,"props":1866,"children":1867},{"style":165},[1868],{"type":45,"value":286},{"type":39,"tag":119,"props":1870,"children":1871},{"style":165},[1872],{"type":45,"value":1770},{"type":39,"tag":119,"props":1874,"children":1875},{"style":165},[1876],{"type":45,"value":184},{"type":39,"tag":119,"props":1878,"children":1879},{"style":187},[1880],{"type":45,"value":1881},".\u002Fwebapp\u002F*",{"type":39,"tag":119,"props":1883,"children":1884},{"style":165},[1885],{"type":45,"value":184},{"type":39,"tag":119,"props":1887,"children":1888},{"style":165},[1889],{"type":45,"value":1821},{"type":39,"tag":119,"props":1891,"children":1893},{"class":121,"line":1892},16,[1894,1898,1903,1907,1911,1915,1919,1924,1928],{"type":39,"tag":119,"props":1895,"children":1896},{"style":165},[1897],{"type":45,"value":1854},{"type":39,"tag":119,"props":1899,"children":1900},{"style":1857},[1901],{"type":45,"value":1902},"unit\u002F*",{"type":39,"tag":119,"props":1904,"children":1905},{"style":165},[1906],{"type":45,"value":184},{"type":39,"tag":119,"props":1908,"children":1909},{"style":165},[1910],{"type":45,"value":286},{"type":39,"tag":119,"props":1912,"children":1913},{"style":165},[1914],{"type":45,"value":1770},{"type":39,"tag":119,"props":1916,"children":1917},{"style":165},[1918],{"type":45,"value":184},{"type":39,"tag":119,"props":1920,"children":1921},{"style":187},[1922],{"type":45,"value":1923},".\u002Fwebapp\u002Ftest\u002Funit\u002F*",{"type":39,"tag":119,"props":1925,"children":1926},{"style":165},[1927],{"type":45,"value":184},{"type":39,"tag":119,"props":1929,"children":1930},{"style":165},[1931],{"type":45,"value":1821},{"type":39,"tag":119,"props":1933,"children":1935},{"class":121,"line":1934},17,[1936,1940,1945,1949,1953,1957,1961,1966,1970],{"type":39,"tag":119,"props":1937,"children":1938},{"style":165},[1939],{"type":45,"value":1854},{"type":39,"tag":119,"props":1941,"children":1942},{"style":1857},[1943],{"type":45,"value":1944},"integration\u002F*",{"type":39,"tag":119,"props":1946,"children":1947},{"style":165},[1948],{"type":45,"value":184},{"type":39,"tag":119,"props":1950,"children":1951},{"style":165},[1952],{"type":45,"value":286},{"type":39,"tag":119,"props":1954,"children":1955},{"style":165},[1956],{"type":45,"value":1770},{"type":39,"tag":119,"props":1958,"children":1959},{"style":165},[1960],{"type":45,"value":184},{"type":39,"tag":119,"props":1962,"children":1963},{"style":187},[1964],{"type":45,"value":1965},".\u002Fwebapp\u002Ftest\u002Fintegration\u002F*",{"type":39,"tag":119,"props":1967,"children":1968},{"style":165},[1969],{"type":45,"value":184},{"type":39,"tag":119,"props":1971,"children":1972},{"style":165},[1973],{"type":45,"value":1974},"]\n",{"type":39,"tag":119,"props":1976,"children":1978},{"class":121,"line":1977},18,[1979],{"type":39,"tag":119,"props":1980,"children":1981},{"style":165},[1982],{"type":45,"value":1983},"        }\n",{"type":39,"tag":119,"props":1985,"children":1987},{"class":121,"line":1986},19,[1988],{"type":39,"tag":119,"props":1989,"children":1990},{"style":165},[1991],{"type":45,"value":379},{"type":39,"tag":119,"props":1993,"children":1995},{"class":121,"line":1994},20,[1996,2000,2005,2009,2013,2017,2021,2026,2030],{"type":39,"tag":119,"props":1997,"children":1998},{"style":165},[1999],{"type":45,"value":1420},{"type":39,"tag":119,"props":2001,"children":2002},{"style":289},[2003],{"type":45,"value":2004},"exclude",{"type":39,"tag":119,"props":2006,"children":2007},{"style":165},[2008],{"type":45,"value":184},{"type":39,"tag":119,"props":2010,"children":2011},{"style":165},[2012],{"type":45,"value":286},{"type":39,"tag":119,"props":2014,"children":2015},{"style":165},[2016],{"type":45,"value":1770},{"type":39,"tag":119,"props":2018,"children":2019},{"style":165},[2020],{"type":45,"value":184},{"type":39,"tag":119,"props":2022,"children":2023},{"style":187},[2024],{"type":45,"value":2025},".\u002Fwebapp\u002Ftest\u002Fe2e\u002F**\u002F*",{"type":39,"tag":119,"props":2027,"children":2028},{"style":165},[2029],{"type":45,"value":184},{"type":39,"tag":119,"props":2031,"children":2032},{"style":165},[2033],{"type":45,"value":1821},{"type":39,"tag":119,"props":2035,"children":2037},{"class":121,"line":2036},21,[2038,2042,2047,2051,2055,2059,2063,2068,2072],{"type":39,"tag":119,"props":2039,"children":2040},{"style":165},[2041],{"type":45,"value":1420},{"type":39,"tag":119,"props":2043,"children":2044},{"style":289},[2045],{"type":45,"value":2046},"include",{"type":39,"tag":119,"props":2048,"children":2049},{"style":165},[2050],{"type":45,"value":184},{"type":39,"tag":119,"props":2052,"children":2053},{"style":165},[2054],{"type":45,"value":286},{"type":39,"tag":119,"props":2056,"children":2057},{"style":165},[2058],{"type":45,"value":1770},{"type":39,"tag":119,"props":2060,"children":2061},{"style":165},[2062],{"type":45,"value":184},{"type":39,"tag":119,"props":2064,"children":2065},{"style":187},[2066],{"type":45,"value":2067},".\u002Fwebapp\u002F**\u002F*",{"type":39,"tag":119,"props":2069,"children":2070},{"style":165},[2071],{"type":45,"value":184},{"type":39,"tag":119,"props":2073,"children":2074},{"style":165},[2075],{"type":45,"value":1974},{"type":39,"tag":119,"props":2077,"children":2079},{"class":121,"line":2078},22,[2080],{"type":39,"tag":119,"props":2081,"children":2082},{"style":165},[2083],{"type":45,"value":535},{"type":39,"tag":90,"props":2085,"children":2087},{"id":2086},"_3-ui5yaml",[2088],{"type":45,"value":2089},"3. ui5.yaml",{"type":39,"tag":52,"props":2091,"children":2092},{},[2093,2095,2101,2103,2109],{"type":45,"value":2094},"Update the ui5.yaml file to use the ",{"type":39,"tag":115,"props":2096,"children":2098},{"className":2097},[],[2099],{"type":45,"value":2100},"ui5-tooling-transpile-task",{"type":45,"value":2102}," and ",{"type":39,"tag":115,"props":2104,"children":2106},{"className":2105},[],[2107],{"type":45,"value":2108},"ui5-tooling-transpile-middleware",{"type":45,"value":2110}," and ensure that at least the following config is present:",{"type":39,"tag":107,"props":2112,"children":2116},{"className":2113,"code":2114,"language":2115,"meta":112,"style":112},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","builder:\n  customTasks:\n    - name: ui5-tooling-transpile-task\n      afterTask: replaceVersion\nserver:\n  customMiddleware:\n    - name: ui5-tooling-transpile-middleware\n      afterMiddleware: compression\n    - name: ui5-middleware-livereload\n      afterMiddleware: compression\n","yaml",[2117],{"type":39,"tag":115,"props":2118,"children":2119},{"__ignoreMap":112},[2120,2133,2145,2167,2184,2196,2208,2228,2245,2265],{"type":39,"tag":119,"props":2121,"children":2122},{"class":121,"line":122},[2123,2128],{"type":39,"tag":119,"props":2124,"children":2125},{"style":353},[2126],{"type":45,"value":2127},"builder",{"type":39,"tag":119,"props":2129,"children":2130},{"style":165},[2131],{"type":45,"value":2132},":\n",{"type":39,"tag":119,"props":2134,"children":2135},{"class":121,"line":132},[2136,2141],{"type":39,"tag":119,"props":2137,"children":2138},{"style":353},[2139],{"type":45,"value":2140},"  customTasks",{"type":39,"tag":119,"props":2142,"children":2143},{"style":165},[2144],{"type":45,"value":2132},{"type":39,"tag":119,"props":2146,"children":2147},{"class":121,"line":141},[2148,2153,2158,2162],{"type":39,"tag":119,"props":2149,"children":2150},{"style":165},[2151],{"type":45,"value":2152},"    -",{"type":39,"tag":119,"props":2154,"children":2155},{"style":353},[2156],{"type":45,"value":2157}," name",{"type":39,"tag":119,"props":2159,"children":2160},{"style":165},[2161],{"type":45,"value":286},{"type":39,"tag":119,"props":2163,"children":2164},{"style":187},[2165],{"type":45,"value":2166}," ui5-tooling-transpile-task\n",{"type":39,"tag":119,"props":2168,"children":2169},{"class":121,"line":26},[2170,2175,2179],{"type":39,"tag":119,"props":2171,"children":2172},{"style":353},[2173],{"type":45,"value":2174},"      afterTask",{"type":39,"tag":119,"props":2176,"children":2177},{"style":165},[2178],{"type":45,"value":286},{"type":39,"tag":119,"props":2180,"children":2181},{"style":187},[2182],{"type":45,"value":2183}," replaceVersion\n",{"type":39,"tag":119,"props":2185,"children":2186},{"class":121,"line":207},[2187,2192],{"type":39,"tag":119,"props":2188,"children":2189},{"style":353},[2190],{"type":45,"value":2191},"server",{"type":39,"tag":119,"props":2193,"children":2194},{"style":165},[2195],{"type":45,"value":2132},{"type":39,"tag":119,"props":2197,"children":2198},{"class":121,"line":216},[2199,2204],{"type":39,"tag":119,"props":2200,"children":2201},{"style":353},[2202],{"type":45,"value":2203},"  customMiddleware",{"type":39,"tag":119,"props":2205,"children":2206},{"style":165},[2207],{"type":45,"value":2132},{"type":39,"tag":119,"props":2209,"children":2210},{"class":121,"line":225},[2211,2215,2219,2223],{"type":39,"tag":119,"props":2212,"children":2213},{"style":165},[2214],{"type":45,"value":2152},{"type":39,"tag":119,"props":2216,"children":2217},{"style":353},[2218],{"type":45,"value":2157},{"type":39,"tag":119,"props":2220,"children":2221},{"style":165},[2222],{"type":45,"value":286},{"type":39,"tag":119,"props":2224,"children":2225},{"style":187},[2226],{"type":45,"value":2227}," ui5-tooling-transpile-middleware\n",{"type":39,"tag":119,"props":2229,"children":2230},{"class":121,"line":266},[2231,2236,2240],{"type":39,"tag":119,"props":2232,"children":2233},{"style":353},[2234],{"type":45,"value":2235},"      afterMiddleware",{"type":39,"tag":119,"props":2237,"children":2238},{"style":165},[2239],{"type":45,"value":286},{"type":39,"tag":119,"props":2241,"children":2242},{"style":187},[2243],{"type":45,"value":2244}," compression\n",{"type":39,"tag":119,"props":2246,"children":2247},{"class":121,"line":275},[2248,2252,2256,2260],{"type":39,"tag":119,"props":2249,"children":2250},{"style":165},[2251],{"type":45,"value":2152},{"type":39,"tag":119,"props":2253,"children":2254},{"style":353},[2255],{"type":45,"value":2157},{"type":39,"tag":119,"props":2257,"children":2258},{"style":165},[2259],{"type":45,"value":286},{"type":39,"tag":119,"props":2261,"children":2262},{"style":187},[2263],{"type":45,"value":2264}," ui5-middleware-livereload\n",{"type":39,"tag":119,"props":2266,"children":2267},{"class":121,"line":22},[2268,2272,2276],{"type":39,"tag":119,"props":2269,"children":2270},{"style":353},[2271],{"type":45,"value":2235},{"type":39,"tag":119,"props":2273,"children":2274},{"style":165},[2275],{"type":45,"value":286},{"type":39,"tag":119,"props":2277,"children":2278},{"style":187},[2279],{"type":45,"value":2244},{"type":39,"tag":52,"props":2281,"children":2282},{},[2283,2285,2290],{"type":45,"value":2284},"Ensure that the generated ui5.yaml file is valid - avoid duplicate entries, each root configuration must only exist once.\nIf a configuration like ",{"type":39,"tag":115,"props":2286,"children":2288},{"className":2287},[],[2289],{"type":45,"value":2191},{"type":45,"value":2291}," already exists, you must add to it instead of adding a second entry.",{"type":39,"tag":90,"props":2293,"children":2295},{"id":2294},"_4-eslint-configuration",[2296],{"type":45,"value":2297},"4. Eslint configuration",{"type":39,"tag":52,"props":2299,"children":2300},{},[2301,2303,2309],{"type":45,"value":2302},"Only when the project has eslint set up, enhance the eslint configuration with TypeScript-specific parts. If eslint is not set up with dependency in package.json and an eslint config, then do nothing.\nA complete eslint v9 compatible ",{"type":39,"tag":115,"props":2304,"children":2306},{"className":2305},[],[2307],{"type":45,"value":2308},"eslint.config.mjs",{"type":45,"value":2310}," file could e.g. look like this, but the actual content depends on the specific project, so you MUST adapt it!",{"type":39,"tag":107,"props":2312,"children":2314},{"className":109,"code":2313,"language":111,"meta":112,"style":112},"import eslint from \"@eslint\u002Fjs\";\nimport globals from \"globals\";\nimport tseslint from \"typescript-eslint\";\n\nexport default tseslint.config(\n    eslint.configs.recommended,\n    ...tseslint.configs.recommended,\n    ...tseslint.configs.recommendedTypeChecked,\n    {\n        languageOptions: {\n            globals: {\n                ...globals.browser,\n                sap: \"readonly\"\n            },\n            ecmaVersion: 2023,\n            parserOptions: {\n                project: true,\n                tsconfigRootDir: import.meta.dirname\n            }\n        }\n    },\n    {\n        ignores: [\"eslint.config.mjs\"]\n    }\n);\n",[2315],{"type":39,"tag":115,"props":2316,"children":2317},{"__ignoreMap":112},[2318,2351,2384,2416,2425,2455,2485,2518,2550,2558,2574,2590,2615,2641,2649,2670,2686,2707,2742,2750,2757,2764,2771,2804,2812],{"type":39,"tag":119,"props":2319,"children":2320},{"class":121,"line":122},[2321,2325,2330,2334,2338,2343,2347],{"type":39,"tag":119,"props":2322,"children":2323},{"style":153},[2324],{"type":45,"value":1155},{"type":39,"tag":119,"props":2326,"children":2327},{"style":159},[2328],{"type":45,"value":2329}," eslint ",{"type":39,"tag":119,"props":2331,"children":2332},{"style":153},[2333],{"type":45,"value":1165},{"type":39,"tag":119,"props":2335,"children":2336},{"style":165},[2337],{"type":45,"value":1170},{"type":39,"tag":119,"props":2339,"children":2340},{"style":187},[2341],{"type":45,"value":2342},"@eslint\u002Fjs",{"type":39,"tag":119,"props":2344,"children":2345},{"style":165},[2346],{"type":45,"value":184},{"type":39,"tag":119,"props":2348,"children":2349},{"style":165},[2350],{"type":45,"value":370},{"type":39,"tag":119,"props":2352,"children":2353},{"class":121,"line":132},[2354,2358,2363,2367,2371,2376,2380],{"type":39,"tag":119,"props":2355,"children":2356},{"style":153},[2357],{"type":45,"value":1155},{"type":39,"tag":119,"props":2359,"children":2360},{"style":159},[2361],{"type":45,"value":2362}," globals ",{"type":39,"tag":119,"props":2364,"children":2365},{"style":153},[2366],{"type":45,"value":1165},{"type":39,"tag":119,"props":2368,"children":2369},{"style":165},[2370],{"type":45,"value":1170},{"type":39,"tag":119,"props":2372,"children":2373},{"style":187},[2374],{"type":45,"value":2375},"globals",{"type":39,"tag":119,"props":2377,"children":2378},{"style":165},[2379],{"type":45,"value":184},{"type":39,"tag":119,"props":2381,"children":2382},{"style":165},[2383],{"type":45,"value":370},{"type":39,"tag":119,"props":2385,"children":2386},{"class":121,"line":141},[2387,2391,2396,2400,2404,2408,2412],{"type":39,"tag":119,"props":2388,"children":2389},{"style":153},[2390],{"type":45,"value":1155},{"type":39,"tag":119,"props":2392,"children":2393},{"style":159},[2394],{"type":45,"value":2395}," tseslint ",{"type":39,"tag":119,"props":2397,"children":2398},{"style":153},[2399],{"type":45,"value":1165},{"type":39,"tag":119,"props":2401,"children":2402},{"style":165},[2403],{"type":45,"value":1170},{"type":39,"tag":119,"props":2405,"children":2406},{"style":187},[2407],{"type":45,"value":1361},{"type":39,"tag":119,"props":2409,"children":2410},{"style":165},[2411],{"type":45,"value":184},{"type":39,"tag":119,"props":2413,"children":2414},{"style":165},[2415],{"type":45,"value":370},{"type":39,"tag":119,"props":2417,"children":2418},{"class":121,"line":26},[2419],{"type":39,"tag":119,"props":2420,"children":2422},{"emptyLinePlaceholder":2421},true,[2423],{"type":45,"value":2424},"\n",{"type":39,"tag":119,"props":2426,"children":2427},{"class":121,"line":207},[2428,2432,2436,2441,2445,2450],{"type":39,"tag":119,"props":2429,"children":2430},{"style":153},[2431],{"type":45,"value":426},{"type":39,"tag":119,"props":2433,"children":2434},{"style":153},[2435],{"type":45,"value":431},{"type":39,"tag":119,"props":2437,"children":2438},{"style":159},[2439],{"type":45,"value":2440}," tseslint",{"type":39,"tag":119,"props":2442,"children":2443},{"style":165},[2444],{"type":45,"value":168},{"type":39,"tag":119,"props":2446,"children":2447},{"style":171},[2448],{"type":45,"value":2449},"config",{"type":39,"tag":119,"props":2451,"children":2452},{"style":159},[2453],{"type":45,"value":2454},"(\n",{"type":39,"tag":119,"props":2456,"children":2457},{"class":121,"line":216},[2458,2463,2467,2472,2476,2481],{"type":39,"tag":119,"props":2459,"children":2460},{"style":159},[2461],{"type":45,"value":2462},"    eslint",{"type":39,"tag":119,"props":2464,"children":2465},{"style":165},[2466],{"type":45,"value":168},{"type":39,"tag":119,"props":2468,"children":2469},{"style":159},[2470],{"type":45,"value":2471},"configs",{"type":39,"tag":119,"props":2473,"children":2474},{"style":165},[2475],{"type":45,"value":168},{"type":39,"tag":119,"props":2477,"children":2478},{"style":159},[2479],{"type":45,"value":2480},"recommended",{"type":39,"tag":119,"props":2482,"children":2483},{"style":165},[2484],{"type":45,"value":1475},{"type":39,"tag":119,"props":2486,"children":2487},{"class":121,"line":225},[2488,2493,2498,2502,2506,2510,2514],{"type":39,"tag":119,"props":2489,"children":2490},{"style":165},[2491],{"type":45,"value":2492},"    ...",{"type":39,"tag":119,"props":2494,"children":2495},{"style":159},[2496],{"type":45,"value":2497},"tseslint",{"type":39,"tag":119,"props":2499,"children":2500},{"style":165},[2501],{"type":45,"value":168},{"type":39,"tag":119,"props":2503,"children":2504},{"style":159},[2505],{"type":45,"value":2471},{"type":39,"tag":119,"props":2507,"children":2508},{"style":165},[2509],{"type":45,"value":168},{"type":39,"tag":119,"props":2511,"children":2512},{"style":159},[2513],{"type":45,"value":2480},{"type":39,"tag":119,"props":2515,"children":2516},{"style":165},[2517],{"type":45,"value":1475},{"type":39,"tag":119,"props":2519,"children":2520},{"class":121,"line":266},[2521,2525,2529,2533,2537,2541,2546],{"type":39,"tag":119,"props":2522,"children":2523},{"style":165},[2524],{"type":45,"value":2492},{"type":39,"tag":119,"props":2526,"children":2527},{"style":159},[2528],{"type":45,"value":2497},{"type":39,"tag":119,"props":2530,"children":2531},{"style":165},[2532],{"type":45,"value":168},{"type":39,"tag":119,"props":2534,"children":2535},{"style":159},[2536],{"type":45,"value":2471},{"type":39,"tag":119,"props":2538,"children":2539},{"style":165},[2540],{"type":45,"value":168},{"type":39,"tag":119,"props":2542,"children":2543},{"style":159},[2544],{"type":45,"value":2545},"recommendedTypeChecked",{"type":39,"tag":119,"props":2547,"children":2548},{"style":165},[2549],{"type":45,"value":1475},{"type":39,"tag":119,"props":2551,"children":2552},{"class":121,"line":275},[2553],{"type":39,"tag":119,"props":2554,"children":2555},{"style":165},[2556],{"type":45,"value":2557},"    {\n",{"type":39,"tag":119,"props":2559,"children":2560},{"class":121,"line":22},[2561,2566,2570],{"type":39,"tag":119,"props":2562,"children":2563},{"style":353},[2564],{"type":45,"value":2565},"        languageOptions",{"type":39,"tag":119,"props":2567,"children":2568},{"style":165},[2569],{"type":45,"value":286},{"type":39,"tag":119,"props":2571,"children":2572},{"style":165},[2573],{"type":45,"value":204},{"type":39,"tag":119,"props":2575,"children":2576},{"class":121,"line":312},[2577,2582,2586],{"type":39,"tag":119,"props":2578,"children":2579},{"style":353},[2580],{"type":45,"value":2581},"            globals",{"type":39,"tag":119,"props":2583,"children":2584},{"style":165},[2585],{"type":45,"value":286},{"type":39,"tag":119,"props":2587,"children":2588},{"style":165},[2589],{"type":45,"value":204},{"type":39,"tag":119,"props":2591,"children":2592},{"class":121,"line":373},[2593,2598,2602,2606,2611],{"type":39,"tag":119,"props":2594,"children":2595},{"style":165},[2596],{"type":45,"value":2597},"                ...",{"type":39,"tag":119,"props":2599,"children":2600},{"style":159},[2601],{"type":45,"value":2375},{"type":39,"tag":119,"props":2603,"children":2604},{"style":165},[2605],{"type":45,"value":168},{"type":39,"tag":119,"props":2607,"children":2608},{"style":159},[2609],{"type":45,"value":2610},"browser",{"type":39,"tag":119,"props":2612,"children":2613},{"style":165},[2614],{"type":45,"value":1475},{"type":39,"tag":119,"props":2616,"children":2617},{"class":121,"line":382},[2618,2623,2627,2631,2636],{"type":39,"tag":119,"props":2619,"children":2620},{"style":353},[2621],{"type":45,"value":2622},"                sap",{"type":39,"tag":119,"props":2624,"children":2625},{"style":165},[2626],{"type":45,"value":286},{"type":39,"tag":119,"props":2628,"children":2629},{"style":165},[2630],{"type":45,"value":1170},{"type":39,"tag":119,"props":2632,"children":2633},{"style":187},[2634],{"type":45,"value":2635},"readonly",{"type":39,"tag":119,"props":2637,"children":2638},{"style":165},[2639],{"type":45,"value":2640},"\"\n",{"type":39,"tag":119,"props":2642,"children":2643},{"class":121,"line":391},[2644],{"type":39,"tag":119,"props":2645,"children":2646},{"style":165},[2647],{"type":45,"value":2648},"            },\n",{"type":39,"tag":119,"props":2650,"children":2651},{"class":121,"line":1848},[2652,2657,2661,2666],{"type":39,"tag":119,"props":2653,"children":2654},{"style":353},[2655],{"type":45,"value":2656},"            ecmaVersion",{"type":39,"tag":119,"props":2658,"children":2659},{"style":165},[2660],{"type":45,"value":286},{"type":39,"tag":119,"props":2662,"children":2663},{"style":1857},[2664],{"type":45,"value":2665}," 2023",{"type":39,"tag":119,"props":2667,"children":2668},{"style":165},[2669],{"type":45,"value":1475},{"type":39,"tag":119,"props":2671,"children":2672},{"class":121,"line":1892},[2673,2678,2682],{"type":39,"tag":119,"props":2674,"children":2675},{"style":353},[2676],{"type":45,"value":2677},"            parserOptions",{"type":39,"tag":119,"props":2679,"children":2680},{"style":165},[2681],{"type":45,"value":286},{"type":39,"tag":119,"props":2683,"children":2684},{"style":165},[2685],{"type":45,"value":204},{"type":39,"tag":119,"props":2687,"children":2688},{"class":121,"line":1934},[2689,2694,2698,2703],{"type":39,"tag":119,"props":2690,"children":2691},{"style":353},[2692],{"type":45,"value":2693},"                project",{"type":39,"tag":119,"props":2695,"children":2696},{"style":165},[2697],{"type":45,"value":286},{"type":39,"tag":119,"props":2699,"children":2700},{"style":1125},[2701],{"type":45,"value":2702}," true",{"type":39,"tag":119,"props":2704,"children":2705},{"style":165},[2706],{"type":45,"value":1475},{"type":39,"tag":119,"props":2708,"children":2709},{"class":121,"line":1977},[2710,2715,2719,2724,2728,2733,2737],{"type":39,"tag":119,"props":2711,"children":2712},{"style":353},[2713],{"type":45,"value":2714},"                tsconfigRootDir",{"type":39,"tag":119,"props":2716,"children":2717},{"style":165},[2718],{"type":45,"value":286},{"type":39,"tag":119,"props":2720,"children":2721},{"style":153},[2722],{"type":45,"value":2723}," import",{"type":39,"tag":119,"props":2725,"children":2726},{"style":165},[2727],{"type":45,"value":168},{"type":39,"tag":119,"props":2729,"children":2730},{"style":159},[2731],{"type":45,"value":2732},"meta",{"type":39,"tag":119,"props":2734,"children":2735},{"style":165},[2736],{"type":45,"value":168},{"type":39,"tag":119,"props":2738,"children":2739},{"style":159},[2740],{"type":45,"value":2741},"dirname\n",{"type":39,"tag":119,"props":2743,"children":2744},{"class":121,"line":1986},[2745],{"type":39,"tag":119,"props":2746,"children":2747},{"style":165},[2748],{"type":45,"value":2749},"            }\n",{"type":39,"tag":119,"props":2751,"children":2752},{"class":121,"line":1994},[2753],{"type":39,"tag":119,"props":2754,"children":2755},{"style":165},[2756],{"type":45,"value":1983},{"type":39,"tag":119,"props":2758,"children":2759},{"class":121,"line":2036},[2760],{"type":39,"tag":119,"props":2761,"children":2762},{"style":165},[2763],{"type":45,"value":379},{"type":39,"tag":119,"props":2765,"children":2766},{"class":121,"line":2078},[2767],{"type":39,"tag":119,"props":2768,"children":2769},{"style":165},[2770],{"type":45,"value":2557},{"type":39,"tag":119,"props":2772,"children":2774},{"class":121,"line":2773},23,[2775,2780,2784,2788,2792,2796,2800],{"type":39,"tag":119,"props":2776,"children":2777},{"style":353},[2778],{"type":45,"value":2779},"        ignores",{"type":39,"tag":119,"props":2781,"children":2782},{"style":165},[2783],{"type":45,"value":286},{"type":39,"tag":119,"props":2785,"children":2786},{"style":159},[2787],{"type":45,"value":1770},{"type":39,"tag":119,"props":2789,"children":2790},{"style":165},[2791],{"type":45,"value":184},{"type":39,"tag":119,"props":2793,"children":2794},{"style":187},[2795],{"type":45,"value":2308},{"type":39,"tag":119,"props":2797,"children":2798},{"style":165},[2799],{"type":45,"value":184},{"type":39,"tag":119,"props":2801,"children":2802},{"style":159},[2803],{"type":45,"value":1974},{"type":39,"tag":119,"props":2805,"children":2807},{"class":121,"line":2806},24,[2808],{"type":39,"tag":119,"props":2809,"children":2810},{"style":165},[2811],{"type":45,"value":527},{"type":39,"tag":119,"props":2813,"children":2815},{"class":121,"line":2814},25,[2816,2820],{"type":39,"tag":119,"props":2817,"children":2818},{"style":159},[2819],{"type":45,"value":365},{"type":39,"tag":119,"props":2821,"children":2822},{"style":165},[2823],{"type":45,"value":370},{"type":39,"tag":83,"props":2825,"children":2827},{"id":2826},"application-code-conversion",[2828],{"type":45,"value":2829},"Application Code Conversion",{"type":39,"tag":90,"props":2831,"children":2833},{"id":2832},"step-1-change-proprietary-ui5-class-syntax-to-standard-es-class-syntax",[2834],{"type":45,"value":2835},"Step 1: Change proprietary UI5 class syntax to standard ES class syntax",{"type":39,"tag":52,"props":2837,"children":2838},{},[2839,2841,2847,2849,2855,2857,2862,2864,2869],{"type":45,"value":2840},"Every UI5 class definitions (",{"type":39,"tag":115,"props":2842,"children":2844},{"className":2843},[],[2845],{"type":45,"value":2846},"SuperClass.extend(...)",{"type":45,"value":2848},") must be converted to a standard JavaScript ",{"type":39,"tag":115,"props":2850,"children":2852},{"className":2851},[],[2853],{"type":45,"value":2854},"class",{"type":45,"value":2856},".\nThe properties in the UI5 class configuration object (second parameter of ",{"type":39,"tag":115,"props":2858,"children":2860},{"className":2859},[],[2861],{"type":45,"value":174},{"type":45,"value":2863},") become members of the standard JavaScript class.\nIt is important to annotate the class with the namespace in a JSDoc comment, so the back transformation can re-add it. This @namespace comment MUST immediately precede the class declaration.\nThe namespace is the part of the full package+class name (first parameter of ",{"type":39,"tag":115,"props":2865,"children":2867},{"className":2866},[],[2868],{"type":45,"value":174},{"type":45,"value":2870},") that precedes the class name.",{"type":39,"tag":52,"props":2872,"children":2873},{},[2874],{"type":45,"value":2875},"Before (example):",{"type":39,"tag":107,"props":2877,"children":2879},{"className":109,"code":2878,"language":111,"meta":112,"style":112},"[... other code, e.g. loading the dependencies \"App\", \"Controller\" etc. ...]\n \nvar App = Controller.extend(\"ui5tssampleapp.controller.App\", {\n    onInit: function _onInit() {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());\n    }\n});\n",[2880],{"type":39,"tag":115,"props":2881,"children":2882},{"__ignoreMap":112},[2883,2976,2984,3039,3068,3076,3135,3142],{"type":39,"tag":119,"props":2884,"children":2885},{"class":121,"line":122},[2886,2891,2896,2901,2905,2910,2914,2919,2923,2928,2932,2937,2941,2945,2949,2954,2958,2963,2967,2972],{"type":39,"tag":119,"props":2887,"children":2888},{"style":159},[2889],{"type":45,"value":2890},"[",{"type":39,"tag":119,"props":2892,"children":2893},{"style":165},[2894],{"type":45,"value":2895},"...",{"type":39,"tag":119,"props":2897,"children":2898},{"style":159},[2899],{"type":45,"value":2900}," other code",{"type":39,"tag":119,"props":2902,"children":2903},{"style":165},[2904],{"type":45,"value":199},{"type":39,"tag":119,"props":2906,"children":2907},{"style":159},[2908],{"type":45,"value":2909}," e",{"type":39,"tag":119,"props":2911,"children":2912},{"style":165},[2913],{"type":45,"value":168},{"type":39,"tag":119,"props":2915,"children":2916},{"style":159},[2917],{"type":45,"value":2918},"g",{"type":39,"tag":119,"props":2920,"children":2921},{"style":165},[2922],{"type":45,"value":168},{"type":39,"tag":119,"props":2924,"children":2925},{"style":159},[2926],{"type":45,"value":2927}," loading the dependencies ",{"type":39,"tag":119,"props":2929,"children":2930},{"style":165},[2931],{"type":45,"value":184},{"type":39,"tag":119,"props":2933,"children":2934},{"style":187},[2935],{"type":45,"value":2936},"App",{"type":39,"tag":119,"props":2938,"children":2939},{"style":165},[2940],{"type":45,"value":184},{"type":39,"tag":119,"props":2942,"children":2943},{"style":165},[2944],{"type":45,"value":199},{"type":39,"tag":119,"props":2946,"children":2947},{"style":165},[2948],{"type":45,"value":1170},{"type":39,"tag":119,"props":2950,"children":2951},{"style":187},[2952],{"type":45,"value":2953},"Controller",{"type":39,"tag":119,"props":2955,"children":2956},{"style":165},[2957],{"type":45,"value":184},{"type":39,"tag":119,"props":2959,"children":2960},{"style":159},[2961],{"type":45,"value":2962}," etc",{"type":39,"tag":119,"props":2964,"children":2965},{"style":165},[2966],{"type":45,"value":168},{"type":39,"tag":119,"props":2968,"children":2969},{"style":165},[2970],{"type":45,"value":2971}," ...",{"type":39,"tag":119,"props":2973,"children":2974},{"style":159},[2975],{"type":45,"value":1974},{"type":39,"tag":119,"props":2977,"children":2978},{"class":121,"line":132},[2979],{"type":39,"tag":119,"props":2980,"children":2981},{"style":159},[2982],{"type":45,"value":2983}," \n",{"type":39,"tag":119,"props":2985,"children":2986},{"class":121,"line":141},[2987,2992,2997,3002,3006,3010,3014,3018,3022,3027,3031,3035],{"type":39,"tag":119,"props":2988,"children":2989},{"style":289},[2990],{"type":45,"value":2991},"var",{"type":39,"tag":119,"props":2993,"children":2994},{"style":159},[2995],{"type":45,"value":2996}," App ",{"type":39,"tag":119,"props":2998,"children":2999},{"style":165},[3000],{"type":45,"value":3001},"=",{"type":39,"tag":119,"props":3003,"children":3004},{"style":159},[3005],{"type":45,"value":162},{"type":39,"tag":119,"props":3007,"children":3008},{"style":165},[3009],{"type":45,"value":168},{"type":39,"tag":119,"props":3011,"children":3012},{"style":171},[3013],{"type":45,"value":174},{"type":39,"tag":119,"props":3015,"children":3016},{"style":159},[3017],{"type":45,"value":179},{"type":39,"tag":119,"props":3019,"children":3020},{"style":165},[3021],{"type":45,"value":184},{"type":39,"tag":119,"props":3023,"children":3024},{"style":187},[3025],{"type":45,"value":3026},"ui5tssampleapp.controller.App",{"type":39,"tag":119,"props":3028,"children":3029},{"style":165},[3030],{"type":45,"value":184},{"type":39,"tag":119,"props":3032,"children":3033},{"style":165},[3034],{"type":45,"value":199},{"type":39,"tag":119,"props":3036,"children":3037},{"style":165},[3038],{"type":45,"value":204},{"type":39,"tag":119,"props":3040,"children":3041},{"class":121,"line":26},[3042,3047,3051,3055,3060,3064],{"type":39,"tag":119,"props":3043,"children":3044},{"style":171},[3045],{"type":45,"value":3046},"    onInit",{"type":39,"tag":119,"props":3048,"children":3049},{"style":165},[3050],{"type":45,"value":286},{"type":39,"tag":119,"props":3052,"children":3053},{"style":289},[3054],{"type":45,"value":292},{"type":39,"tag":119,"props":3056,"children":3057},{"style":171},[3058],{"type":45,"value":3059}," _onInit",{"type":39,"tag":119,"props":3061,"children":3062},{"style":165},[3063],{"type":45,"value":883},{"type":39,"tag":119,"props":3065,"children":3066},{"style":165},[3067],{"type":45,"value":204},{"type":39,"tag":119,"props":3069,"children":3070},{"class":121,"line":207},[3071],{"type":39,"tag":119,"props":3072,"children":3073},{"style":126},[3074],{"type":45,"value":3075},"        \u002F\u002F apply content density mode to root view\n",{"type":39,"tag":119,"props":3077,"children":3078},{"class":121,"line":216},[3079,3084,3089,3093,3097,3102,3106,3110,3114,3118,3122,3126,3131],{"type":39,"tag":119,"props":3080,"children":3081},{"style":165},[3082],{"type":45,"value":3083},"        this.",{"type":39,"tag":119,"props":3085,"children":3086},{"style":171},[3087],{"type":45,"value":3088},"getView",{"type":39,"tag":119,"props":3090,"children":3091},{"style":353},[3092],{"type":45,"value":883},{"type":39,"tag":119,"props":3094,"children":3095},{"style":165},[3096],{"type":45,"value":168},{"type":39,"tag":119,"props":3098,"children":3099},{"style":171},[3100],{"type":45,"value":3101},"addStyleClass",{"type":39,"tag":119,"props":3103,"children":3104},{"style":353},[3105],{"type":45,"value":179},{"type":39,"tag":119,"props":3107,"children":3108},{"style":165},[3109],{"type":45,"value":848},{"type":39,"tag":119,"props":3111,"children":3112},{"style":171},[3113],{"type":45,"value":341},{"type":39,"tag":119,"props":3115,"children":3116},{"style":353},[3117],{"type":45,"value":883},{"type":39,"tag":119,"props":3119,"children":3120},{"style":165},[3121],{"type":45,"value":168},{"type":39,"tag":119,"props":3123,"children":3124},{"style":171},[3125],{"type":45,"value":878},{"type":39,"tag":119,"props":3127,"children":3128},{"style":353},[3129],{"type":45,"value":3130},"())",{"type":39,"tag":119,"props":3132,"children":3133},{"style":165},[3134],{"type":45,"value":370},{"type":39,"tag":119,"props":3136,"children":3137},{"class":121,"line":225},[3138],{"type":39,"tag":119,"props":3139,"children":3140},{"style":165},[3141],{"type":45,"value":527},{"type":39,"tag":119,"props":3143,"children":3144},{"class":121,"line":266},[3145,3149,3153],{"type":39,"tag":119,"props":3146,"children":3147},{"style":165},[3148],{"type":45,"value":258},{"type":39,"tag":119,"props":3150,"children":3151},{"style":159},[3152],{"type":45,"value":365},{"type":39,"tag":119,"props":3154,"children":3155},{"style":165},[3156],{"type":45,"value":370},{"type":39,"tag":52,"props":3158,"children":3159},{},[3160],{"type":45,"value":3161},"After (example, do not use this code verbatim):",{"type":39,"tag":107,"props":3163,"children":3165},{"className":109,"code":3164,"language":111,"meta":112,"style":112},"[... other code, e.g. loading the dependencies \"App\", \"Controller\" etc. ...]\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nclass App extends Controller {\n    public onInit() {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass((this.getOwnerComponent()).getContentDensityClass());\n    };\n};\n",[3166],{"type":39,"tag":115,"props":3167,"children":3168},{"__ignoreMap":112},[3169,3252,3259,3266,3287,3295,3319,3339,3346,3402,3410],{"type":39,"tag":119,"props":3170,"children":3171},{"class":121,"line":122},[3172,3176,3180,3184,3188,3192,3196,3200,3204,3208,3212,3216,3220,3224,3228,3232,3236,3240,3244,3248],{"type":39,"tag":119,"props":3173,"children":3174},{"style":159},[3175],{"type":45,"value":2890},{"type":39,"tag":119,"props":3177,"children":3178},{"style":165},[3179],{"type":45,"value":2895},{"type":39,"tag":119,"props":3181,"children":3182},{"style":159},[3183],{"type":45,"value":2900},{"type":39,"tag":119,"props":3185,"children":3186},{"style":165},[3187],{"type":45,"value":199},{"type":39,"tag":119,"props":3189,"children":3190},{"style":159},[3191],{"type":45,"value":2909},{"type":39,"tag":119,"props":3193,"children":3194},{"style":165},[3195],{"type":45,"value":168},{"type":39,"tag":119,"props":3197,"children":3198},{"style":159},[3199],{"type":45,"value":2918},{"type":39,"tag":119,"props":3201,"children":3202},{"style":165},[3203],{"type":45,"value":168},{"type":39,"tag":119,"props":3205,"children":3206},{"style":159},[3207],{"type":45,"value":2927},{"type":39,"tag":119,"props":3209,"children":3210},{"style":165},[3211],{"type":45,"value":184},{"type":39,"tag":119,"props":3213,"children":3214},{"style":187},[3215],{"type":45,"value":2936},{"type":39,"tag":119,"props":3217,"children":3218},{"style":165},[3219],{"type":45,"value":184},{"type":39,"tag":119,"props":3221,"children":3222},{"style":165},[3223],{"type":45,"value":199},{"type":39,"tag":119,"props":3225,"children":3226},{"style":165},[3227],{"type":45,"value":1170},{"type":39,"tag":119,"props":3229,"children":3230},{"style":187},[3231],{"type":45,"value":2953},{"type":39,"tag":119,"props":3233,"children":3234},{"style":165},[3235],{"type":45,"value":184},{"type":39,"tag":119,"props":3237,"children":3238},{"style":159},[3239],{"type":45,"value":2962},{"type":39,"tag":119,"props":3241,"children":3242},{"style":165},[3243],{"type":45,"value":168},{"type":39,"tag":119,"props":3245,"children":3246},{"style":165},[3247],{"type":45,"value":2971},{"type":39,"tag":119,"props":3249,"children":3250},{"style":159},[3251],{"type":45,"value":1974},{"type":39,"tag":119,"props":3253,"children":3254},{"class":121,"line":132},[3255],{"type":39,"tag":119,"props":3256,"children":3257},{"style":159},[3258],{"type":45,"value":2983},{"type":39,"tag":119,"props":3260,"children":3261},{"class":121,"line":141},[3262],{"type":39,"tag":119,"props":3263,"children":3264},{"style":126},[3265],{"type":45,"value":129},{"type":39,"tag":119,"props":3267,"children":3268},{"class":121,"line":26},[3269,3274,3278,3282],{"type":39,"tag":119,"props":3270,"children":3271},{"style":126},[3272],{"type":45,"value":3273},"* ",{"type":39,"tag":119,"props":3275,"children":3276},{"style":153},[3277],{"type":45,"value":236},{"type":39,"tag":119,"props":3279,"children":3280},{"style":239},[3281],{"type":45,"value":578},{"type":39,"tag":119,"props":3283,"children":3284},{"style":581},[3285],{"type":45,"value":3286}," ui5tssampleapp.controller\n",{"type":39,"tag":119,"props":3288,"children":3289},{"class":121,"line":207},[3290],{"type":39,"tag":119,"props":3291,"children":3292},{"style":126},[3293],{"type":45,"value":3294},"*\u002F\n",{"type":39,"tag":119,"props":3296,"children":3297},{"class":121,"line":216},[3298,3302,3307,3311,3315],{"type":39,"tag":119,"props":3299,"children":3300},{"style":289},[3301],{"type":45,"value":2854},{"type":39,"tag":119,"props":3303,"children":3304},{"style":321},[3305],{"type":45,"value":3306}," App",{"type":39,"tag":119,"props":3308,"children":3309},{"style":289},[3310],{"type":45,"value":446},{"type":39,"tag":119,"props":3312,"children":3313},{"style":321},[3314],{"type":45,"value":162},{"type":39,"tag":119,"props":3316,"children":3317},{"style":165},[3318],{"type":45,"value":204},{"type":39,"tag":119,"props":3320,"children":3321},{"class":121,"line":225},[3322,3326,3331,3335],{"type":39,"tag":119,"props":3323,"children":3324},{"style":289},[3325],{"type":45,"value":462},{"type":39,"tag":119,"props":3327,"children":3328},{"style":353},[3329],{"type":45,"value":3330}," onInit",{"type":39,"tag":119,"props":3332,"children":3333},{"style":165},[3334],{"type":45,"value":883},{"type":39,"tag":119,"props":3336,"children":3337},{"style":165},[3338],{"type":45,"value":204},{"type":39,"tag":119,"props":3340,"children":3341},{"class":121,"line":266},[3342],{"type":39,"tag":119,"props":3343,"children":3344},{"style":126},[3345],{"type":45,"value":3075},{"type":39,"tag":119,"props":3347,"children":3348},{"class":121,"line":275},[3349,3353,3357,3361,3365,3369,3374,3378,3382,3386,3390,3394,3398],{"type":39,"tag":119,"props":3350,"children":3351},{"style":165},[3352],{"type":45,"value":3083},{"type":39,"tag":119,"props":3354,"children":3355},{"style":171},[3356],{"type":45,"value":3088},{"type":39,"tag":119,"props":3358,"children":3359},{"style":353},[3360],{"type":45,"value":883},{"type":39,"tag":119,"props":3362,"children":3363},{"style":165},[3364],{"type":45,"value":168},{"type":39,"tag":119,"props":3366,"children":3367},{"style":171},[3368],{"type":45,"value":3101},{"type":39,"tag":119,"props":3370,"children":3371},{"style":353},[3372],{"type":45,"value":3373},"((",{"type":39,"tag":119,"props":3375,"children":3376},{"style":165},[3377],{"type":45,"value":848},{"type":39,"tag":119,"props":3379,"children":3380},{"style":171},[3381],{"type":45,"value":341},{"type":39,"tag":119,"props":3383,"children":3384},{"style":353},[3385],{"type":45,"value":3130},{"type":39,"tag":119,"props":3387,"children":3388},{"style":165},[3389],{"type":45,"value":168},{"type":39,"tag":119,"props":3391,"children":3392},{"style":171},[3393],{"type":45,"value":878},{"type":39,"tag":119,"props":3395,"children":3396},{"style":353},[3397],{"type":45,"value":3130},{"type":39,"tag":119,"props":3399,"children":3400},{"style":165},[3401],{"type":45,"value":370},{"type":39,"tag":119,"props":3403,"children":3404},{"class":121,"line":22},[3405],{"type":39,"tag":119,"props":3406,"children":3407},{"style":165},[3408],{"type":45,"value":3409},"    };\n",{"type":39,"tag":119,"props":3411,"children":3412},{"class":121,"line":312},[3413],{"type":39,"tag":119,"props":3414,"children":3415},{"style":165},[3416],{"type":45,"value":3417},"};\n",{"type":39,"tag":90,"props":3419,"children":3421},{"id":3420},"step-2-change-to-ecmascript-modules-and-imports",[3422],{"type":45,"value":3423},"Step 2: Change to ECMAScript modules and imports",{"type":39,"tag":52,"props":3425,"children":3426},{},[3427,3429,3435,3437,3443,3445,3451],{"type":45,"value":3428},"TypeScript UI5 apps must use modern ES modules and imports.\nHence, convert all UI5 module definition and dependency loading calls (",{"type":39,"tag":115,"props":3430,"children":3432},{"className":3431},[],[3433],{"type":45,"value":3434},"sap.ui.require(...)",{"type":45,"value":3436},", ",{"type":39,"tag":115,"props":3438,"children":3440},{"className":3439},[],[3441],{"type":45,"value":3442},"sap.ui.define(...)",{"type":45,"value":3444},")\nto ES modules with imports (and in case of ",{"type":39,"tag":115,"props":3446,"children":3448},{"className":3447},[],[3449],{"type":45,"value":3450},"sap.ui.define",{"type":45,"value":3452}," a module export).",{"type":39,"tag":52,"props":3454,"children":3455},{},[3456],{"type":45,"value":3457},"In the above example, this looks as follows.",{"type":39,"tag":52,"props":3459,"children":3460},{},[3461],{"type":45,"value":3462},"Before:",{"type":39,"tag":107,"props":3464,"children":3466},{"className":109,"code":3465,"language":111,"meta":112,"style":112},"sap.ui.define([\"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\"], function (Controller) {\n    \u002F**\n     * @namespace ui5tssampleapp.controller\n     *\u002F\n    class App extends Controller {\n        ... \u002F\u002F as above\n    };\n \n  return App;\n});\n",[3467],{"type":39,"tag":115,"props":3468,"children":3469},{"__ignoreMap":112},[3470,3543,3550,3569,3576,3600,3613,3620,3627,3643],{"type":39,"tag":119,"props":3471,"children":3472},{"class":121,"line":122},[3473,3478,3482,3487,3491,3496,3501,3505,3510,3514,3519,3523,3527,3531,3535,3539],{"type":39,"tag":119,"props":3474,"children":3475},{"style":159},[3476],{"type":45,"value":3477},"sap",{"type":39,"tag":119,"props":3479,"children":3480},{"style":165},[3481],{"type":45,"value":168},{"type":39,"tag":119,"props":3483,"children":3484},{"style":159},[3485],{"type":45,"value":3486},"ui",{"type":39,"tag":119,"props":3488,"children":3489},{"style":165},[3490],{"type":45,"value":168},{"type":39,"tag":119,"props":3492,"children":3493},{"style":171},[3494],{"type":45,"value":3495},"define",{"type":39,"tag":119,"props":3497,"children":3498},{"style":159},[3499],{"type":45,"value":3500},"([",{"type":39,"tag":119,"props":3502,"children":3503},{"style":165},[3504],{"type":45,"value":184},{"type":39,"tag":119,"props":3506,"children":3507},{"style":187},[3508],{"type":45,"value":3509},"sap\u002Fui\u002Fcore\u002Fmvc\u002FController",{"type":39,"tag":119,"props":3511,"children":3512},{"style":165},[3513],{"type":45,"value":184},{"type":39,"tag":119,"props":3515,"children":3516},{"style":159},[3517],{"type":45,"value":3518},"]",{"type":39,"tag":119,"props":3520,"children":3521},{"style":165},[3522],{"type":45,"value":199},{"type":39,"tag":119,"props":3524,"children":3525},{"style":289},[3526],{"type":45,"value":292},{"type":39,"tag":119,"props":3528,"children":3529},{"style":165},[3530],{"type":45,"value":1074},{"type":39,"tag":119,"props":3532,"children":3533},{"style":581},[3534],{"type":45,"value":2953},{"type":39,"tag":119,"props":3536,"children":3537},{"style":165},[3538],{"type":45,"value":365},{"type":39,"tag":119,"props":3540,"children":3541},{"style":165},[3542],{"type":45,"value":204},{"type":39,"tag":119,"props":3544,"children":3545},{"class":121,"line":132},[3546],{"type":39,"tag":119,"props":3547,"children":3548},{"style":126},[3549],{"type":45,"value":213},{"type":39,"tag":119,"props":3551,"children":3552},{"class":121,"line":141},[3553,3557,3561,3565],{"type":39,"tag":119,"props":3554,"children":3555},{"style":126},[3556],{"type":45,"value":231},{"type":39,"tag":119,"props":3558,"children":3559},{"style":153},[3560],{"type":45,"value":236},{"type":39,"tag":119,"props":3562,"children":3563},{"style":239},[3564],{"type":45,"value":578},{"type":39,"tag":119,"props":3566,"children":3567},{"style":581},[3568],{"type":45,"value":3286},{"type":39,"tag":119,"props":3570,"children":3571},{"class":121,"line":26},[3572],{"type":39,"tag":119,"props":3573,"children":3574},{"style":126},[3575],{"type":45,"value":272},{"type":39,"tag":119,"props":3577,"children":3578},{"class":121,"line":207},[3579,3584,3588,3592,3596],{"type":39,"tag":119,"props":3580,"children":3581},{"style":289},[3582],{"type":45,"value":3583},"    class",{"type":39,"tag":119,"props":3585,"children":3586},{"style":321},[3587],{"type":45,"value":3306},{"type":39,"tag":119,"props":3589,"children":3590},{"style":289},[3591],{"type":45,"value":446},{"type":39,"tag":119,"props":3593,"children":3594},{"style":321},[3595],{"type":45,"value":162},{"type":39,"tag":119,"props":3597,"children":3598},{"style":165},[3599],{"type":45,"value":204},{"type":39,"tag":119,"props":3601,"children":3602},{"class":121,"line":216},[3603,3608],{"type":39,"tag":119,"props":3604,"children":3605},{"style":165},[3606],{"type":45,"value":3607},"        ...",{"type":39,"tag":119,"props":3609,"children":3610},{"style":126},[3611],{"type":45,"value":3612}," \u002F\u002F as above\n",{"type":39,"tag":119,"props":3614,"children":3615},{"class":121,"line":225},[3616],{"type":39,"tag":119,"props":3617,"children":3618},{"style":165},[3619],{"type":45,"value":3409},{"type":39,"tag":119,"props":3621,"children":3622},{"class":121,"line":266},[3623],{"type":39,"tag":119,"props":3624,"children":3625},{"style":353},[3626],{"type":45,"value":2983},{"type":39,"tag":119,"props":3628,"children":3629},{"class":121,"line":275},[3630,3635,3639],{"type":39,"tag":119,"props":3631,"children":3632},{"style":153},[3633],{"type":45,"value":3634},"  return",{"type":39,"tag":119,"props":3636,"children":3637},{"style":159},[3638],{"type":45,"value":3306},{"type":39,"tag":119,"props":3640,"children":3641},{"style":165},[3642],{"type":45,"value":370},{"type":39,"tag":119,"props":3644,"children":3645},{"class":121,"line":22},[3646,3650,3654],{"type":39,"tag":119,"props":3647,"children":3648},{"style":165},[3649],{"type":45,"value":258},{"type":39,"tag":119,"props":3651,"children":3652},{"style":159},[3653],{"type":45,"value":365},{"type":39,"tag":119,"props":3655,"children":3656},{"style":165},[3657],{"type":45,"value":370},{"type":39,"tag":52,"props":3659,"children":3660},{},[3661],{"type":45,"value":3662},"After:",{"type":39,"tag":107,"props":3664,"children":3666},{"className":109,"code":3665,"language":111,"meta":112,"style":112},"import Controller from \"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\";\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nexport default class App extends Controller {\n    ... \u002F\u002F as above\n};\n",[3667],{"type":39,"tag":115,"props":3668,"children":3669},{"__ignoreMap":112},[3670,3702,3709,3716,3735,3742,3773,3784],{"type":39,"tag":119,"props":3671,"children":3672},{"class":121,"line":122},[3673,3677,3682,3686,3690,3694,3698],{"type":39,"tag":119,"props":3674,"children":3675},{"style":153},[3676],{"type":45,"value":1155},{"type":39,"tag":119,"props":3678,"children":3679},{"style":159},[3680],{"type":45,"value":3681}," Controller ",{"type":39,"tag":119,"props":3683,"children":3684},{"style":153},[3685],{"type":45,"value":1165},{"type":39,"tag":119,"props":3687,"children":3688},{"style":165},[3689],{"type":45,"value":1170},{"type":39,"tag":119,"props":3691,"children":3692},{"style":187},[3693],{"type":45,"value":3509},{"type":39,"tag":119,"props":3695,"children":3696},{"style":165},[3697],{"type":45,"value":184},{"type":39,"tag":119,"props":3699,"children":3700},{"style":165},[3701],{"type":45,"value":370},{"type":39,"tag":119,"props":3703,"children":3704},{"class":121,"line":132},[3705],{"type":39,"tag":119,"props":3706,"children":3707},{"style":159},[3708],{"type":45,"value":2983},{"type":39,"tag":119,"props":3710,"children":3711},{"class":121,"line":141},[3712],{"type":39,"tag":119,"props":3713,"children":3714},{"style":126},[3715],{"type":45,"value":129},{"type":39,"tag":119,"props":3717,"children":3718},{"class":121,"line":26},[3719,3723,3727,3731],{"type":39,"tag":119,"props":3720,"children":3721},{"style":126},[3722],{"type":45,"value":3273},{"type":39,"tag":119,"props":3724,"children":3725},{"style":153},[3726],{"type":45,"value":236},{"type":39,"tag":119,"props":3728,"children":3729},{"style":239},[3730],{"type":45,"value":578},{"type":39,"tag":119,"props":3732,"children":3733},{"style":581},[3734],{"type":45,"value":3286},{"type":39,"tag":119,"props":3736,"children":3737},{"class":121,"line":207},[3738],{"type":39,"tag":119,"props":3739,"children":3740},{"style":126},[3741],{"type":45,"value":3294},{"type":39,"tag":119,"props":3743,"children":3744},{"class":121,"line":216},[3745,3749,3753,3757,3761,3765,3769],{"type":39,"tag":119,"props":3746,"children":3747},{"style":153},[3748],{"type":45,"value":426},{"type":39,"tag":119,"props":3750,"children":3751},{"style":153},[3752],{"type":45,"value":431},{"type":39,"tag":119,"props":3754,"children":3755},{"style":289},[3756],{"type":45,"value":436},{"type":39,"tag":119,"props":3758,"children":3759},{"style":321},[3760],{"type":45,"value":3306},{"type":39,"tag":119,"props":3762,"children":3763},{"style":289},[3764],{"type":45,"value":446},{"type":39,"tag":119,"props":3766,"children":3767},{"style":321},[3768],{"type":45,"value":162},{"type":39,"tag":119,"props":3770,"children":3771},{"style":165},[3772],{"type":45,"value":204},{"type":39,"tag":119,"props":3774,"children":3775},{"class":121,"line":225},[3776,3780],{"type":39,"tag":119,"props":3777,"children":3778},{"style":165},[3779],{"type":45,"value":2492},{"type":39,"tag":119,"props":3781,"children":3782},{"style":126},[3783],{"type":45,"value":3612},{"type":39,"tag":119,"props":3785,"children":3786},{"class":121,"line":266},[3787],{"type":39,"tag":119,"props":3788,"children":3789},{"style":165},[3790],{"type":45,"value":3417},{"type":39,"tag":52,"props":3792,"children":3793},{},[3794,3800],{"type":39,"tag":115,"props":3795,"children":3797},{"className":3796},[],[3798],{"type":45,"value":3799},"sap.ui.require",{"type":45,"value":3801}," shall be converted to just the imports and no export.\nAvoid name clashes for the imported modules.",{"type":39,"tag":48,"props":3803,"children":3804},{},[3805],{"type":39,"tag":52,"props":3806,"children":3807},{},[3808,3810,3816,3818,3824,3826,3832],{"type":45,"value":3809},"Hint: importing ",{"type":39,"tag":115,"props":3811,"children":3813},{"className":3812},[],[3814],{"type":45,"value":3815},"sap\u002Fui\u002Fcore\u002FCore",{"type":45,"value":3817}," does not provide the class (like for most other UI5 modules), but the singleton instance of the UI5 Core. So the imported module can be used directly for methods like ",{"type":39,"tag":115,"props":3819,"children":3821},{"className":3820},[],[3822],{"type":45,"value":3823},"byId(...)",{"type":45,"value":3825}," instead of calls to ",{"type":39,"tag":115,"props":3827,"children":3829},{"className":3828},[],[3830],{"type":45,"value":3831},"sap.ui.getCore()",{"type":45,"value":3833}," which return the singleton in JavaScript.",{"type":39,"tag":52,"props":3835,"children":3836},{},[3837,3839,3844,3846,3852,3854,3860],{"type":45,"value":3838},"When ",{"type":39,"tag":115,"props":3840,"children":3842},{"className":3841},[],[3843],{"type":45,"value":3799},{"type":45,"value":3845}," is used dynamically, e.g. ",{"type":39,"tag":115,"props":3847,"children":3849},{"className":3848},[],[3850],{"type":45,"value":3851},"sap.ui.require([\"sap\u002Fm\u002FMessageBox\"], function(MessageBox) { ... })",{"type":45,"value":3853}," inside a method body, then convert this to a dynamic import like ",{"type":39,"tag":115,"props":3855,"children":3857},{"className":3856},[],[3858],{"type":45,"value":3859},"import(\"sap\u002Fm\u002FMessageBox\").then((MessageBox) => { ... })",{"type":45,"value":168},{"type":39,"tag":90,"props":3862,"children":3864},{"id":3863},"step-3-standard-typescript-code-adaptations",[3865],{"type":45,"value":3866},"Step 3: Standard TypeScript Code Adaptations",{"type":39,"tag":52,"props":3868,"children":3869},{},[3870],{"type":45,"value":3871},"Apply your general knowledge about converting JavaScript code to TypeScript. In particular:",{"type":39,"tag":3873,"props":3874,"children":3875},"ul",{},[3876,3881,3886,3907],{"type":39,"tag":62,"props":3877,"children":3878},{},[3879],{"type":45,"value":3880},"Add type information to method parameters and variables where needed.",{"type":39,"tag":62,"props":3882,"children":3883},{},[3884],{"type":45,"value":3885},"Add missing private member class variables (with type information) to the beginning of the class definition. (In JavaScript they are often created later on-the-fly during the lifetime of a class instance.)",{"type":39,"tag":62,"props":3887,"children":3888},{},[3889,3891,3897,3899,3905],{"type":45,"value":3890},"Convert conventional ",{"type":39,"tag":115,"props":3892,"children":3894},{"className":3893},[],[3895],{"type":45,"value":3896},"function",{"type":45,"value":3898},"s to arrow functions when ",{"type":39,"tag":115,"props":3900,"children":3902},{"className":3901},[],[3903],{"type":45,"value":3904},"someFunction.bind(...)",{"type":45,"value":3906}," is used because TypeScript does not seem to propagate the type of the bound \"this\" context into the function body.",{"type":39,"tag":62,"props":3908,"children":3909},{},[3910],{"type":45,"value":3911},"Define further types and structures needed within the code, if applicable.",{"type":39,"tag":48,"props":3913,"children":3914},{},[3915],{"type":39,"tag":52,"props":3916,"children":3917},{},[3918,3920,3926,3928,3934,3936,3942,3943,3949],{"type":45,"value":3919},"IMPORTANT: whenever you use a UI5 type, e.g. for annotating a variable or method parameter\u002Freturntype, do NOT use the UI5 type with its global namespace (like ",{"type":39,"tag":115,"props":3921,"children":3923},{"className":3922},[],[3924],{"type":45,"value":3925},"sap.m.Button",{"type":45,"value":3927}," or ",{"type":39,"tag":115,"props":3929,"children":3931},{"className":3930},[],[3932],{"type":45,"value":3933},"sap.ui.core.Popup",{"type":45,"value":3935},")! Instead, import this UI5 type from the respective module (like ",{"type":39,"tag":115,"props":3937,"children":3939},{"className":3938},[],[3940],{"type":45,"value":3941},"sap\u002Fm\u002FButton",{"type":45,"value":3927},{"type":39,"tag":115,"props":3944,"children":3946},{"className":3945},[],[3947],{"type":45,"value":3948},"sap\u002Fui\u002Fcore\u002FPopup",{"type":45,"value":3950}," - add an import if needed) and use the imported module.",{"type":39,"tag":52,"props":3952,"children":3953},{},[3954],{"type":45,"value":3955},"Example:",{"type":39,"tag":52,"props":3957,"children":3958},{},[3959],{"type":45,"value":3960},"Wrong:",{"type":39,"tag":107,"props":3962,"children":3964},{"className":412,"code":3963,"language":414,"meta":112,"style":112},"const b: sap.m.Button;\nfunction getPopup(): sap.ui.core.Popup  { ... }\n",[3965],{"type":39,"tag":115,"props":3966,"children":3967},{"__ignoreMap":112},[3968,4012],{"type":39,"tag":119,"props":3969,"children":3970},{"class":121,"line":122},[3971,3976,3981,3985,3990,3994,3999,4003,4008],{"type":39,"tag":119,"props":3972,"children":3973},{"style":289},[3974],{"type":45,"value":3975},"const",{"type":39,"tag":119,"props":3977,"children":3978},{"style":159},[3979],{"type":45,"value":3980}," b",{"type":39,"tag":119,"props":3982,"children":3983},{"style":165},[3984],{"type":45,"value":286},{"type":39,"tag":119,"props":3986,"children":3987},{"style":321},[3988],{"type":45,"value":3989}," sap",{"type":39,"tag":119,"props":3991,"children":3992},{"style":165},[3993],{"type":45,"value":168},{"type":39,"tag":119,"props":3995,"children":3996},{"style":321},[3997],{"type":45,"value":3998},"m",{"type":39,"tag":119,"props":4000,"children":4001},{"style":165},[4002],{"type":45,"value":168},{"type":39,"tag":119,"props":4004,"children":4005},{"style":321},[4006],{"type":45,"value":4007},"Button",{"type":39,"tag":119,"props":4009,"children":4010},{"style":165},[4011],{"type":45,"value":370},{"type":39,"tag":119,"props":4013,"children":4014},{"class":121,"line":132},[4015,4019,4024,4028,4032,4036,4040,4044,4049,4053,4058,4063,4067],{"type":39,"tag":119,"props":4016,"children":4017},{"style":289},[4018],{"type":45,"value":3896},{"type":39,"tag":119,"props":4020,"children":4021},{"style":171},[4022],{"type":45,"value":4023}," getPopup",{"type":39,"tag":119,"props":4025,"children":4026},{"style":165},[4027],{"type":45,"value":472},{"type":39,"tag":119,"props":4029,"children":4030},{"style":321},[4031],{"type":45,"value":3989},{"type":39,"tag":119,"props":4033,"children":4034},{"style":165},[4035],{"type":45,"value":168},{"type":39,"tag":119,"props":4037,"children":4038},{"style":321},[4039],{"type":45,"value":3486},{"type":39,"tag":119,"props":4041,"children":4042},{"style":165},[4043],{"type":45,"value":168},{"type":39,"tag":119,"props":4045,"children":4046},{"style":321},[4047],{"type":45,"value":4048},"core",{"type":39,"tag":119,"props":4050,"children":4051},{"style":165},[4052],{"type":45,"value":168},{"type":39,"tag":119,"props":4054,"children":4055},{"style":321},[4056],{"type":45,"value":4057},"Popup",{"type":39,"tag":119,"props":4059,"children":4060},{"style":165},[4061],{"type":45,"value":4062},"  {",{"type":39,"tag":119,"props":4064,"children":4065},{"style":165},[4066],{"type":45,"value":2971},{"type":39,"tag":119,"props":4068,"children":4069},{"style":165},[4070],{"type":45,"value":4071}," }\n",{"type":39,"tag":52,"props":4073,"children":4074},{},[4075],{"type":45,"value":4076},"Correct:",{"type":39,"tag":107,"props":4078,"children":4080},{"className":412,"code":4079,"language":414,"meta":112,"style":112},"import Button from \"sap\u002Fm\u002FButton\";\nimport Popup from \"sap\u002Fui\u002Fcore\u002FPopup\";\n \nconst b: Button;\nfunction getPopup(): Popup  { ... }\n",[4081],{"type":39,"tag":115,"props":4082,"children":4083},{"__ignoreMap":112},[4084,4116,4148,4155,4179],{"type":39,"tag":119,"props":4085,"children":4086},{"class":121,"line":122},[4087,4091,4096,4100,4104,4108,4112],{"type":39,"tag":119,"props":4088,"children":4089},{"style":153},[4090],{"type":45,"value":1155},{"type":39,"tag":119,"props":4092,"children":4093},{"style":159},[4094],{"type":45,"value":4095}," Button ",{"type":39,"tag":119,"props":4097,"children":4098},{"style":153},[4099],{"type":45,"value":1165},{"type":39,"tag":119,"props":4101,"children":4102},{"style":165},[4103],{"type":45,"value":1170},{"type":39,"tag":119,"props":4105,"children":4106},{"style":187},[4107],{"type":45,"value":3941},{"type":39,"tag":119,"props":4109,"children":4110},{"style":165},[4111],{"type":45,"value":184},{"type":39,"tag":119,"props":4113,"children":4114},{"style":165},[4115],{"type":45,"value":370},{"type":39,"tag":119,"props":4117,"children":4118},{"class":121,"line":132},[4119,4123,4128,4132,4136,4140,4144],{"type":39,"tag":119,"props":4120,"children":4121},{"style":153},[4122],{"type":45,"value":1155},{"type":39,"tag":119,"props":4124,"children":4125},{"style":159},[4126],{"type":45,"value":4127}," Popup ",{"type":39,"tag":119,"props":4129,"children":4130},{"style":153},[4131],{"type":45,"value":1165},{"type":39,"tag":119,"props":4133,"children":4134},{"style":165},[4135],{"type":45,"value":1170},{"type":39,"tag":119,"props":4137,"children":4138},{"style":187},[4139],{"type":45,"value":3948},{"type":39,"tag":119,"props":4141,"children":4142},{"style":165},[4143],{"type":45,"value":184},{"type":39,"tag":119,"props":4145,"children":4146},{"style":165},[4147],{"type":45,"value":370},{"type":39,"tag":119,"props":4149,"children":4150},{"class":121,"line":141},[4151],{"type":39,"tag":119,"props":4152,"children":4153},{"style":159},[4154],{"type":45,"value":2983},{"type":39,"tag":119,"props":4156,"children":4157},{"class":121,"line":26},[4158,4162,4166,4170,4175],{"type":39,"tag":119,"props":4159,"children":4160},{"style":289},[4161],{"type":45,"value":3975},{"type":39,"tag":119,"props":4163,"children":4164},{"style":159},[4165],{"type":45,"value":3980},{"type":39,"tag":119,"props":4167,"children":4168},{"style":165},[4169],{"type":45,"value":286},{"type":39,"tag":119,"props":4171,"children":4172},{"style":321},[4173],{"type":45,"value":4174}," Button",{"type":39,"tag":119,"props":4176,"children":4177},{"style":165},[4178],{"type":45,"value":370},{"type":39,"tag":119,"props":4180,"children":4181},{"class":121,"line":207},[4182,4186,4190,4194,4199,4203,4207],{"type":39,"tag":119,"props":4183,"children":4184},{"style":289},[4185],{"type":45,"value":3896},{"type":39,"tag":119,"props":4187,"children":4188},{"style":171},[4189],{"type":45,"value":4023},{"type":39,"tag":119,"props":4191,"children":4192},{"style":165},[4193],{"type":45,"value":472},{"type":39,"tag":119,"props":4195,"children":4196},{"style":321},[4197],{"type":45,"value":4198}," Popup",{"type":39,"tag":119,"props":4200,"children":4201},{"style":165},[4202],{"type":45,"value":4062},{"type":39,"tag":119,"props":4204,"children":4205},{"style":165},[4206],{"type":45,"value":2971},{"type":39,"tag":119,"props":4208,"children":4209},{"style":165},[4210],{"type":45,"value":4071},{"type":39,"tag":52,"props":4212,"children":4213},{},[4214,4216,4222,4223,4229,4231,4237,4238,4244,4246,4251,4253,4259,4261,4266],{"type":45,"value":4215},"Hint: use the actual UI5 control events, not browser events like ",{"type":39,"tag":115,"props":4217,"children":4219},{"className":4218},[],[4220],{"type":45,"value":4221},"Event",{"type":45,"value":3927},{"type":39,"tag":115,"props":4224,"children":4226},{"className":4225},[],[4227],{"type":45,"value":4228},"MouseEvent",{"type":45,"value":4230},", in event handlers of UI5 controls. UI5 events are different. E.g. use the ",{"type":39,"tag":115,"props":4232,"children":4234},{"className":4233},[],[4235],{"type":45,"value":4236},"Button$PressEvent",{"type":45,"value":2102},{"type":39,"tag":115,"props":4239,"children":4241},{"className":4240},[],[4242],{"type":45,"value":4243},"Button$PressEventParameters",{"type":45,"value":4245}," from the ",{"type":39,"tag":115,"props":4247,"children":4249},{"className":4248},[],[4250],{"type":45,"value":3941},{"type":45,"value":4252}," module when the ",{"type":39,"tag":115,"props":4254,"children":4256},{"className":4255},[],[4257],{"type":45,"value":4258},"press",{"type":45,"value":4260}," event of the ",{"type":39,"tag":115,"props":4262,"children":4264},{"className":4263},[],[4265],{"type":45,"value":3941},{"type":45,"value":4267}," is handled.",{"type":39,"tag":48,"props":4269,"children":4270},{},[4271],{"type":39,"tag":52,"props":4272,"children":4273},{},[4274,4276,4282,4283,4289],{"type":45,"value":4275},"Note: for any event XYZ of a UI5 control ABC, types like ",{"type":39,"tag":115,"props":4277,"children":4279},{"className":4278},[],[4280],{"type":45,"value":4281},"ABC$XYZEvent",{"type":45,"value":2102},{"type":39,"tag":115,"props":4284,"children":4286},{"className":4285},[],[4287],{"type":45,"value":4288},"ABC$XYZEventParameters",{"type":45,"value":4290}," are available!",{"type":39,"tag":52,"props":4292,"children":4293},{},[4294],{"type":45,"value":3955},{"type":39,"tag":52,"props":4296,"children":4297},{},[4298],{"type":45,"value":3462},{"type":39,"tag":107,"props":4300,"children":4302},{"className":109,"code":4301,"language":111,"meta":112,"style":112},"sap.ui.define([\".\u002FBaseController\"], function (BaseController) {\n    return BaseController.extend(\"my.app.controller.Main\", {\n        onPress: function(oEvent) {\n            const button = oEvent.getSource();\n        },\n        \n        onSelectionChange: function(oEvent) {\n            const items = oEvent.getParameter(\"selectedItems\");\n        }\n    });\n});\n",[4303],{"type":39,"tag":115,"props":4304,"children":4305},{"__ignoreMap":112},[4306,4375,4420,4453,4493,4501,4509,4541,4595,4602,4618],{"type":39,"tag":119,"props":4307,"children":4308},{"class":121,"line":122},[4309,4313,4317,4321,4325,4329,4333,4337,4342,4346,4350,4354,4358,4362,4367,4371],{"type":39,"tag":119,"props":4310,"children":4311},{"style":159},[4312],{"type":45,"value":3477},{"type":39,"tag":119,"props":4314,"children":4315},{"style":165},[4316],{"type":45,"value":168},{"type":39,"tag":119,"props":4318,"children":4319},{"style":159},[4320],{"type":45,"value":3486},{"type":39,"tag":119,"props":4322,"children":4323},{"style":165},[4324],{"type":45,"value":168},{"type":39,"tag":119,"props":4326,"children":4327},{"style":171},[4328],{"type":45,"value":3495},{"type":39,"tag":119,"props":4330,"children":4331},{"style":159},[4332],{"type":45,"value":3500},{"type":39,"tag":119,"props":4334,"children":4335},{"style":165},[4336],{"type":45,"value":184},{"type":39,"tag":119,"props":4338,"children":4339},{"style":187},[4340],{"type":45,"value":4341},".\u002FBaseController",{"type":39,"tag":119,"props":4343,"children":4344},{"style":165},[4345],{"type":45,"value":184},{"type":39,"tag":119,"props":4347,"children":4348},{"style":159},[4349],{"type":45,"value":3518},{"type":39,"tag":119,"props":4351,"children":4352},{"style":165},[4353],{"type":45,"value":199},{"type":39,"tag":119,"props":4355,"children":4356},{"style":289},[4357],{"type":45,"value":292},{"type":39,"tag":119,"props":4359,"children":4360},{"style":165},[4361],{"type":45,"value":1074},{"type":39,"tag":119,"props":4363,"children":4364},{"style":581},[4365],{"type":45,"value":4366},"BaseController",{"type":39,"tag":119,"props":4368,"children":4369},{"style":165},[4370],{"type":45,"value":365},{"type":39,"tag":119,"props":4372,"children":4373},{"style":165},[4374],{"type":45,"value":204},{"type":39,"tag":119,"props":4376,"children":4377},{"class":121,"line":132},[4378,4383,4387,4391,4395,4399,4403,4408,4412,4416],{"type":39,"tag":119,"props":4379,"children":4380},{"style":153},[4381],{"type":45,"value":4382},"    return",{"type":39,"tag":119,"props":4384,"children":4385},{"style":159},[4386],{"type":45,"value":441},{"type":39,"tag":119,"props":4388,"children":4389},{"style":165},[4390],{"type":45,"value":168},{"type":39,"tag":119,"props":4392,"children":4393},{"style":171},[4394],{"type":45,"value":174},{"type":39,"tag":119,"props":4396,"children":4397},{"style":353},[4398],{"type":45,"value":179},{"type":39,"tag":119,"props":4400,"children":4401},{"style":165},[4402],{"type":45,"value":184},{"type":39,"tag":119,"props":4404,"children":4405},{"style":187},[4406],{"type":45,"value":4407},"my.app.controller.Main",{"type":39,"tag":119,"props":4409,"children":4410},{"style":165},[4411],{"type":45,"value":184},{"type":39,"tag":119,"props":4413,"children":4414},{"style":165},[4415],{"type":45,"value":199},{"type":39,"tag":119,"props":4417,"children":4418},{"style":165},[4419],{"type":45,"value":204},{"type":39,"tag":119,"props":4421,"children":4422},{"class":121,"line":141},[4423,4428,4432,4436,4440,4445,4449],{"type":39,"tag":119,"props":4424,"children":4425},{"style":171},[4426],{"type":45,"value":4427},"        onPress",{"type":39,"tag":119,"props":4429,"children":4430},{"style":165},[4431],{"type":45,"value":286},{"type":39,"tag":119,"props":4433,"children":4434},{"style":289},[4435],{"type":45,"value":292},{"type":39,"tag":119,"props":4437,"children":4438},{"style":165},[4439],{"type":45,"value":179},{"type":39,"tag":119,"props":4441,"children":4442},{"style":581},[4443],{"type":45,"value":4444},"oEvent",{"type":39,"tag":119,"props":4446,"children":4447},{"style":165},[4448],{"type":45,"value":365},{"type":39,"tag":119,"props":4450,"children":4451},{"style":165},[4452],{"type":45,"value":204},{"type":39,"tag":119,"props":4454,"children":4455},{"class":121,"line":26},[4456,4461,4466,4471,4476,4480,4485,4489],{"type":39,"tag":119,"props":4457,"children":4458},{"style":289},[4459],{"type":45,"value":4460},"            const",{"type":39,"tag":119,"props":4462,"children":4463},{"style":159},[4464],{"type":45,"value":4465}," button",{"type":39,"tag":119,"props":4467,"children":4468},{"style":165},[4469],{"type":45,"value":4470}," =",{"type":39,"tag":119,"props":4472,"children":4473},{"style":159},[4474],{"type":45,"value":4475}," oEvent",{"type":39,"tag":119,"props":4477,"children":4478},{"style":165},[4479],{"type":45,"value":168},{"type":39,"tag":119,"props":4481,"children":4482},{"style":171},[4483],{"type":45,"value":4484},"getSource",{"type":39,"tag":119,"props":4486,"children":4487},{"style":353},[4488],{"type":45,"value":883},{"type":39,"tag":119,"props":4490,"children":4491},{"style":165},[4492],{"type":45,"value":370},{"type":39,"tag":119,"props":4494,"children":4495},{"class":121,"line":207},[4496],{"type":39,"tag":119,"props":4497,"children":4498},{"style":165},[4499],{"type":45,"value":4500},"        },\n",{"type":39,"tag":119,"props":4502,"children":4503},{"class":121,"line":216},[4504],{"type":39,"tag":119,"props":4505,"children":4506},{"style":353},[4507],{"type":45,"value":4508},"        \n",{"type":39,"tag":119,"props":4510,"children":4511},{"class":121,"line":225},[4512,4517,4521,4525,4529,4533,4537],{"type":39,"tag":119,"props":4513,"children":4514},{"style":171},[4515],{"type":45,"value":4516},"        onSelectionChange",{"type":39,"tag":119,"props":4518,"children":4519},{"style":165},[4520],{"type":45,"value":286},{"type":39,"tag":119,"props":4522,"children":4523},{"style":289},[4524],{"type":45,"value":292},{"type":39,"tag":119,"props":4526,"children":4527},{"style":165},[4528],{"type":45,"value":179},{"type":39,"tag":119,"props":4530,"children":4531},{"style":581},[4532],{"type":45,"value":4444},{"type":39,"tag":119,"props":4534,"children":4535},{"style":165},[4536],{"type":45,"value":365},{"type":39,"tag":119,"props":4538,"children":4539},{"style":165},[4540],{"type":45,"value":204},{"type":39,"tag":119,"props":4542,"children":4543},{"class":121,"line":266},[4544,4548,4553,4557,4561,4565,4570,4574,4578,4583,4587,4591],{"type":39,"tag":119,"props":4545,"children":4546},{"style":289},[4547],{"type":45,"value":4460},{"type":39,"tag":119,"props":4549,"children":4550},{"style":159},[4551],{"type":45,"value":4552}," items",{"type":39,"tag":119,"props":4554,"children":4555},{"style":165},[4556],{"type":45,"value":4470},{"type":39,"tag":119,"props":4558,"children":4559},{"style":159},[4560],{"type":45,"value":4475},{"type":39,"tag":119,"props":4562,"children":4563},{"style":165},[4564],{"type":45,"value":168},{"type":39,"tag":119,"props":4566,"children":4567},{"style":171},[4568],{"type":45,"value":4569},"getParameter",{"type":39,"tag":119,"props":4571,"children":4572},{"style":353},[4573],{"type":45,"value":179},{"type":39,"tag":119,"props":4575,"children":4576},{"style":165},[4577],{"type":45,"value":184},{"type":39,"tag":119,"props":4579,"children":4580},{"style":187},[4581],{"type":45,"value":4582},"selectedItems",{"type":39,"tag":119,"props":4584,"children":4585},{"style":165},[4586],{"type":45,"value":184},{"type":39,"tag":119,"props":4588,"children":4589},{"style":353},[4590],{"type":45,"value":365},{"type":39,"tag":119,"props":4592,"children":4593},{"style":165},[4594],{"type":45,"value":370},{"type":39,"tag":119,"props":4596,"children":4597},{"class":121,"line":275},[4598],{"type":39,"tag":119,"props":4599,"children":4600},{"style":165},[4601],{"type":45,"value":1983},{"type":39,"tag":119,"props":4603,"children":4604},{"class":121,"line":22},[4605,4610,4614],{"type":39,"tag":119,"props":4606,"children":4607},{"style":165},[4608],{"type":45,"value":4609},"    }",{"type":39,"tag":119,"props":4611,"children":4612},{"style":353},[4613],{"type":45,"value":365},{"type":39,"tag":119,"props":4615,"children":4616},{"style":165},[4617],{"type":45,"value":370},{"type":39,"tag":119,"props":4619,"children":4620},{"class":121,"line":312},[4621,4625,4629],{"type":39,"tag":119,"props":4622,"children":4623},{"style":165},[4624],{"type":45,"value":258},{"type":39,"tag":119,"props":4626,"children":4627},{"style":159},[4628],{"type":45,"value":365},{"type":39,"tag":119,"props":4630,"children":4631},{"style":165},[4632],{"type":45,"value":370},{"type":39,"tag":52,"props":4634,"children":4635},{},[4636],{"type":45,"value":3662},{"type":39,"tag":107,"props":4638,"children":4640},{"className":412,"code":4639,"language":414,"meta":112,"style":112},"import BaseController from \".\u002FBaseController\";\nimport Button from \"sap\u002Fm\u002FButton\";\nimport {Button$PressEvent} from \"sap\u002Fm\u002FButton\";\nimport {Table$RowSelectionChangeEvent} from \"sap\u002Fui\u002Ftable\u002FTable\";\n\nexport default class Main extends BaseController {\n    onPress(oEvent: Button$PressEvent): void {\n        const button = oEvent.getSource() as Button;\n    }\n    \n    onRowSelectionChange(oEvent: Table$RowSelectionChangeEvent): void {\n        const selectedContext = oEvent.getParameter(\"rowContext\");\n    }\n}\n",[4641],{"type":39,"tag":115,"props":4642,"children":4643},{"__ignoreMap":112},[4644,4676,4707,4747,4788,4795,4827,4865,4909,4916,4924,4961,5014,5021],{"type":39,"tag":119,"props":4645,"children":4646},{"class":121,"line":122},[4647,4651,4656,4660,4664,4668,4672],{"type":39,"tag":119,"props":4648,"children":4649},{"style":153},[4650],{"type":45,"value":1155},{"type":39,"tag":119,"props":4652,"children":4653},{"style":159},[4654],{"type":45,"value":4655}," BaseController ",{"type":39,"tag":119,"props":4657,"children":4658},{"style":153},[4659],{"type":45,"value":1165},{"type":39,"tag":119,"props":4661,"children":4662},{"style":165},[4663],{"type":45,"value":1170},{"type":39,"tag":119,"props":4665,"children":4666},{"style":187},[4667],{"type":45,"value":4341},{"type":39,"tag":119,"props":4669,"children":4670},{"style":165},[4671],{"type":45,"value":184},{"type":39,"tag":119,"props":4673,"children":4674},{"style":165},[4675],{"type":45,"value":370},{"type":39,"tag":119,"props":4677,"children":4678},{"class":121,"line":132},[4679,4683,4687,4691,4695,4699,4703],{"type":39,"tag":119,"props":4680,"children":4681},{"style":153},[4682],{"type":45,"value":1155},{"type":39,"tag":119,"props":4684,"children":4685},{"style":159},[4686],{"type":45,"value":4095},{"type":39,"tag":119,"props":4688,"children":4689},{"style":153},[4690],{"type":45,"value":1165},{"type":39,"tag":119,"props":4692,"children":4693},{"style":165},[4694],{"type":45,"value":1170},{"type":39,"tag":119,"props":4696,"children":4697},{"style":187},[4698],{"type":45,"value":3941},{"type":39,"tag":119,"props":4700,"children":4701},{"style":165},[4702],{"type":45,"value":184},{"type":39,"tag":119,"props":4704,"children":4705},{"style":165},[4706],{"type":45,"value":370},{"type":39,"tag":119,"props":4708,"children":4709},{"class":121,"line":141},[4710,4714,4718,4722,4726,4731,4735,4739,4743],{"type":39,"tag":119,"props":4711,"children":4712},{"style":153},[4713],{"type":45,"value":1155},{"type":39,"tag":119,"props":4715,"children":4716},{"style":165},[4717],{"type":45,"value":247},{"type":39,"tag":119,"props":4719,"children":4720},{"style":159},[4721],{"type":45,"value":4236},{"type":39,"tag":119,"props":4723,"children":4724},{"style":165},[4725],{"type":45,"value":258},{"type":39,"tag":119,"props":4727,"children":4728},{"style":153},[4729],{"type":45,"value":4730}," from",{"type":39,"tag":119,"props":4732,"children":4733},{"style":165},[4734],{"type":45,"value":1170},{"type":39,"tag":119,"props":4736,"children":4737},{"style":187},[4738],{"type":45,"value":3941},{"type":39,"tag":119,"props":4740,"children":4741},{"style":165},[4742],{"type":45,"value":184},{"type":39,"tag":119,"props":4744,"children":4745},{"style":165},[4746],{"type":45,"value":370},{"type":39,"tag":119,"props":4748,"children":4749},{"class":121,"line":26},[4750,4754,4758,4763,4767,4771,4775,4780,4784],{"type":39,"tag":119,"props":4751,"children":4752},{"style":153},[4753],{"type":45,"value":1155},{"type":39,"tag":119,"props":4755,"children":4756},{"style":165},[4757],{"type":45,"value":247},{"type":39,"tag":119,"props":4759,"children":4760},{"style":159},[4761],{"type":45,"value":4762},"Table$RowSelectionChangeEvent",{"type":39,"tag":119,"props":4764,"children":4765},{"style":165},[4766],{"type":45,"value":258},{"type":39,"tag":119,"props":4768,"children":4769},{"style":153},[4770],{"type":45,"value":4730},{"type":39,"tag":119,"props":4772,"children":4773},{"style":165},[4774],{"type":45,"value":1170},{"type":39,"tag":119,"props":4776,"children":4777},{"style":187},[4778],{"type":45,"value":4779},"sap\u002Fui\u002Ftable\u002FTable",{"type":39,"tag":119,"props":4781,"children":4782},{"style":165},[4783],{"type":45,"value":184},{"type":39,"tag":119,"props":4785,"children":4786},{"style":165},[4787],{"type":45,"value":370},{"type":39,"tag":119,"props":4789,"children":4790},{"class":121,"line":207},[4791],{"type":39,"tag":119,"props":4792,"children":4793},{"emptyLinePlaceholder":2421},[4794],{"type":45,"value":2424},{"type":39,"tag":119,"props":4796,"children":4797},{"class":121,"line":216},[4798,4802,4806,4810,4815,4819,4823],{"type":39,"tag":119,"props":4799,"children":4800},{"style":153},[4801],{"type":45,"value":426},{"type":39,"tag":119,"props":4803,"children":4804},{"style":153},[4805],{"type":45,"value":431},{"type":39,"tag":119,"props":4807,"children":4808},{"style":289},[4809],{"type":45,"value":436},{"type":39,"tag":119,"props":4811,"children":4812},{"style":321},[4813],{"type":45,"value":4814}," Main",{"type":39,"tag":119,"props":4816,"children":4817},{"style":289},[4818],{"type":45,"value":446},{"type":39,"tag":119,"props":4820,"children":4821},{"style":321},[4822],{"type":45,"value":441},{"type":39,"tag":119,"props":4824,"children":4825},{"style":165},[4826],{"type":45,"value":204},{"type":39,"tag":119,"props":4828,"children":4829},{"class":121,"line":225},[4830,4835,4839,4843,4847,4852,4857,4861],{"type":39,"tag":119,"props":4831,"children":4832},{"style":353},[4833],{"type":45,"value":4834},"    onPress",{"type":39,"tag":119,"props":4836,"children":4837},{"style":165},[4838],{"type":45,"value":179},{"type":39,"tag":119,"props":4840,"children":4841},{"style":581},[4842],{"type":45,"value":4444},{"type":39,"tag":119,"props":4844,"children":4845},{"style":165},[4846],{"type":45,"value":286},{"type":39,"tag":119,"props":4848,"children":4849},{"style":321},[4850],{"type":45,"value":4851}," Button$PressEvent",{"type":39,"tag":119,"props":4853,"children":4854},{"style":165},[4855],{"type":45,"value":4856},"):",{"type":39,"tag":119,"props":4858,"children":4859},{"style":321},[4860],{"type":45,"value":1102},{"type":39,"tag":119,"props":4862,"children":4863},{"style":165},[4864],{"type":45,"value":204},{"type":39,"tag":119,"props":4866,"children":4867},{"class":121,"line":266},[4868,4873,4877,4881,4885,4889,4893,4897,4901,4905],{"type":39,"tag":119,"props":4869,"children":4870},{"style":289},[4871],{"type":45,"value":4872},"        const",{"type":39,"tag":119,"props":4874,"children":4875},{"style":159},[4876],{"type":45,"value":4465},{"type":39,"tag":119,"props":4878,"children":4879},{"style":165},[4880],{"type":45,"value":4470},{"type":39,"tag":119,"props":4882,"children":4883},{"style":159},[4884],{"type":45,"value":4475},{"type":39,"tag":119,"props":4886,"children":4887},{"style":165},[4888],{"type":45,"value":168},{"type":39,"tag":119,"props":4890,"children":4891},{"style":171},[4892],{"type":45,"value":4484},{"type":39,"tag":119,"props":4894,"children":4895},{"style":353},[4896],{"type":45,"value":506},{"type":39,"tag":119,"props":4898,"children":4899},{"style":153},[4900],{"type":45,"value":511},{"type":39,"tag":119,"props":4902,"children":4903},{"style":321},[4904],{"type":45,"value":4174},{"type":39,"tag":119,"props":4906,"children":4907},{"style":165},[4908],{"type":45,"value":370},{"type":39,"tag":119,"props":4910,"children":4911},{"class":121,"line":275},[4912],{"type":39,"tag":119,"props":4913,"children":4914},{"style":165},[4915],{"type":45,"value":527},{"type":39,"tag":119,"props":4917,"children":4918},{"class":121,"line":22},[4919],{"type":39,"tag":119,"props":4920,"children":4921},{"style":159},[4922],{"type":45,"value":4923},"    \n",{"type":39,"tag":119,"props":4925,"children":4926},{"class":121,"line":312},[4927,4932,4936,4940,4944,4949,4953,4957],{"type":39,"tag":119,"props":4928,"children":4929},{"style":353},[4930],{"type":45,"value":4931},"    onRowSelectionChange",{"type":39,"tag":119,"props":4933,"children":4934},{"style":165},[4935],{"type":45,"value":179},{"type":39,"tag":119,"props":4937,"children":4938},{"style":581},[4939],{"type":45,"value":4444},{"type":39,"tag":119,"props":4941,"children":4942},{"style":165},[4943],{"type":45,"value":286},{"type":39,"tag":119,"props":4945,"children":4946},{"style":321},[4947],{"type":45,"value":4948}," Table$RowSelectionChangeEvent",{"type":39,"tag":119,"props":4950,"children":4951},{"style":165},[4952],{"type":45,"value":4856},{"type":39,"tag":119,"props":4954,"children":4955},{"style":321},[4956],{"type":45,"value":1102},{"type":39,"tag":119,"props":4958,"children":4959},{"style":165},[4960],{"type":45,"value":204},{"type":39,"tag":119,"props":4962,"children":4963},{"class":121,"line":373},[4964,4968,4973,4977,4981,4985,4989,4993,4997,5002,5006,5010],{"type":39,"tag":119,"props":4965,"children":4966},{"style":289},[4967],{"type":45,"value":4872},{"type":39,"tag":119,"props":4969,"children":4970},{"style":159},[4971],{"type":45,"value":4972}," selectedContext",{"type":39,"tag":119,"props":4974,"children":4975},{"style":165},[4976],{"type":45,"value":4470},{"type":39,"tag":119,"props":4978,"children":4979},{"style":159},[4980],{"type":45,"value":4475},{"type":39,"tag":119,"props":4982,"children":4983},{"style":165},[4984],{"type":45,"value":168},{"type":39,"tag":119,"props":4986,"children":4987},{"style":171},[4988],{"type":45,"value":4569},{"type":39,"tag":119,"props":4990,"children":4991},{"style":353},[4992],{"type":45,"value":179},{"type":39,"tag":119,"props":4994,"children":4995},{"style":165},[4996],{"type":45,"value":184},{"type":39,"tag":119,"props":4998,"children":4999},{"style":187},[5000],{"type":45,"value":5001},"rowContext",{"type":39,"tag":119,"props":5003,"children":5004},{"style":165},[5005],{"type":45,"value":184},{"type":39,"tag":119,"props":5007,"children":5008},{"style":353},[5009],{"type":45,"value":365},{"type":39,"tag":119,"props":5011,"children":5012},{"style":165},[5013],{"type":45,"value":370},{"type":39,"tag":119,"props":5015,"children":5016},{"class":121,"line":382},[5017],{"type":39,"tag":119,"props":5018,"children":5019},{"style":165},[5020],{"type":45,"value":527},{"type":39,"tag":119,"props":5022,"children":5023},{"class":121,"line":391},[5024],{"type":39,"tag":119,"props":5025,"children":5026},{"style":165},[5027],{"type":45,"value":535},{"type":39,"tag":52,"props":5029,"children":5030},{},[5031],{"type":45,"value":5032},"Hint: use the most specific type which does provide all needed properties. Examples:",{"type":39,"tag":3873,"props":5034,"children":5035},{},[5036,5062,5087],{"type":39,"tag":62,"props":5037,"children":5038},{},[5039,5041,5047,5048,5053,5055,5060],{"type":45,"value":5040},"Use specific types like ",{"type":39,"tag":115,"props":5042,"children":5044},{"className":5043},[],[5045],{"type":45,"value":5046},"KeyboardEvent",{"type":45,"value":3927},{"type":39,"tag":115,"props":5049,"children":5051},{"className":5050},[],[5052],{"type":45,"value":4228},{"type":45,"value":5054},", not just ",{"type":39,"tag":115,"props":5056,"children":5058},{"className":5057},[],[5059],{"type":45,"value":4221},{"type":45,"value":5061}," for browser events.",{"type":39,"tag":62,"props":5063,"children":5064},{},[5065,5067,5072,5073,5078,5080,5086],{"type":45,"value":5066},"Use the ",{"type":39,"tag":115,"props":5068,"children":5070},{"className":5069},[],[5071],{"type":45,"value":4236},{"type":45,"value":4245},{"type":39,"tag":115,"props":5074,"children":5076},{"className":5075},[],[5077],{"type":45,"value":3941},{"type":45,"value":5079}," module, not the ",{"type":39,"tag":115,"props":5081,"children":5083},{"className":5082},[],[5084],{"type":45,"value":5085},"sap\u002Fui\u002Fbase\u002FEvent",{"type":45,"value":168},{"type":39,"tag":62,"props":5088,"children":5089},{},[5090],{"type":45,"value":5091},"The same is valid for all types, not only events.",{"type":39,"tag":90,"props":5093,"children":5095},{"id":5094},"step-4-casts-for-return-values-of-generic-methods",[5096],{"type":45,"value":5097},"Step 4: Casts for Return Values of Generic Methods",{"type":39,"tag":52,"props":5099,"children":5100},{},[5101,5103,5109,5110,5116,5118,5124,5126,5132,5133,5139,5140,5146,5148,5154,5156,5162,5163,5169],{"type":45,"value":5102},"Generic getter methods like ",{"type":39,"tag":115,"props":5104,"children":5106},{"className":5105},[],[5107],{"type":45,"value":5108},"document.getElementById(...)",{"type":45,"value":3927},{"type":39,"tag":115,"props":5111,"children":5113},{"className":5112},[],[5114],{"type":45,"value":5115},"someUI5Control.getModel()",{"type":45,"value":5117}," or inside a controller ",{"type":39,"tag":115,"props":5119,"children":5121},{"className":5120},[],[5122],{"type":45,"value":5123},"this.byId()",{"type":45,"value":5125}," return the super-type of all possible types (in the examples ",{"type":39,"tag":115,"props":5127,"children":5129},{"className":5128},[],[5130],{"type":45,"value":5131},"HTMLElement",{"type":45,"value":2102},{"type":39,"tag":115,"props":5134,"children":5136},{"className":5135},[],[5137],{"type":45,"value":5138},"sap.ui.model.Model",{"type":45,"value":2102},{"type":39,"tag":115,"props":5141,"children":5143},{"className":5142},[],[5144],{"type":45,"value":5145},"sap.ui.core.Element",{"type":45,"value":5147},") although in practice it will usually be a specific sub-type (e.g. an ",{"type":39,"tag":115,"props":5149,"children":5151},{"className":5150},[],[5152],{"type":45,"value":5153},"HTMLAnchorElement",{"type":45,"value":5155}," or a ",{"type":39,"tag":115,"props":5157,"children":5159},{"className":5158},[],[5160],{"type":45,"value":5161},"sap.ui.model.odata.v4.ODataModel",{"type":45,"value":5155},{"type":39,"tag":115,"props":5164,"children":5166},{"className":5165},[],[5167],{"type":45,"value":5168},"sap.m.Input",{"type":45,"value":5170},").",{"type":39,"tag":52,"props":5172,"children":5173},{},[5174,5176,5181],{"type":45,"value":5175},"In many cases you will have to cast the return value to the specific type to use it. The actual type can usually be derived from the context. If not, rather avoid the cast than guessing a wrong one. Also, do not cast to a superclass like ",{"type":39,"tag":115,"props":5177,"children":5179},{"className":5178},[],[5180],{"type":45,"value":5138},{"type":45,"value":5182}," when this is anyway the returned type.",{"type":39,"tag":52,"props":5184,"children":5185},{},[5186],{"type":45,"value":5187},"The same is valid for several UI5 methods, most prominently the following:",{"type":39,"tag":3873,"props":5189,"children":5190},{},[5191,5196,5201,5206,5211,5216],{"type":39,"tag":62,"props":5192,"children":5193},{},[5194],{"type":45,"value":5195},"core.byId() \u002F view.byId()",{"type":39,"tag":62,"props":5197,"children":5198},{},[5199],{"type":45,"value":5200},"control.getBinding()",{"type":39,"tag":62,"props":5202,"children":5203},{},[5204],{"type":45,"value":5205},"ownerComponent.getModel()",{"type":39,"tag":62,"props":5207,"children":5208},{},[5209],{"type":45,"value":5210},"event.getSource()",{"type":39,"tag":62,"props":5212,"children":5213},{},[5214],{"type":45,"value":5215},"component.getRootControl()",{"type":39,"tag":62,"props":5217,"children":5218},{},[5219],{"type":45,"value":5220},"this.getOwnerComponent()",{"type":39,"tag":52,"props":5222,"children":5223},{},[5224,5226,5232],{"type":45,"value":5225},"This cast will sometimes also require an additional module import to make the type (like ",{"type":39,"tag":115,"props":5227,"children":5229},{"className":5228},[],[5230],{"type":45,"value":5231},"ODataModel",{"type":45,"value":5233}," above) known.",{"type":39,"tag":52,"props":5235,"children":5236},{},[5237,5239,5245,5247,5253,5255,5260,5262,5267,5269,5274],{"type":45,"value":5238},"In the app controller example above, this step would add an additional import of the app's component (called ",{"type":39,"tag":115,"props":5240,"children":5242},{"className":5241},[],[5243],{"type":45,"value":5244},"AppComponent",{"type":45,"value":5246},"), so within the ",{"type":39,"tag":115,"props":5248,"children":5250},{"className":5249},[],[5251],{"type":45,"value":5252},"onInit",{"type":45,"value":5254}," implementation the required typecast can be done. Without this typecast, the return type of ",{"type":39,"tag":115,"props":5256,"children":5258},{"className":5257},[],[5259],{"type":45,"value":341},{"type":45,"value":5261}," would be a ",{"type":39,"tag":115,"props":5263,"children":5265},{"className":5264},[],[5266],{"type":45,"value":253},{"type":45,"value":5268},", which does not have the ",{"type":39,"tag":115,"props":5270,"children":5272},{"className":5271},[],[5273],{"type":45,"value":878},{"type":45,"value":5275}," method defined in the app component.",{"type":39,"tag":52,"props":5277,"children":5278},{},[5279],{"type":45,"value":3462},{"type":39,"tag":107,"props":5281,"children":5283},{"className":109,"code":5282,"language":111,"meta":112,"style":112},"import Controller from \"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\";\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nexport default class App extends Controller {\n \n    public onInit() {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());\n    };\n \n};\n",[5284],{"type":39,"tag":115,"props":5285,"children":5286},{"__ignoreMap":112},[5287,5318,5325,5332,5351,5358,5389,5396,5415,5422,5477,5484,5491],{"type":39,"tag":119,"props":5288,"children":5289},{"class":121,"line":122},[5290,5294,5298,5302,5306,5310,5314],{"type":39,"tag":119,"props":5291,"children":5292},{"style":153},[5293],{"type":45,"value":1155},{"type":39,"tag":119,"props":5295,"children":5296},{"style":159},[5297],{"type":45,"value":3681},{"type":39,"tag":119,"props":5299,"children":5300},{"style":153},[5301],{"type":45,"value":1165},{"type":39,"tag":119,"props":5303,"children":5304},{"style":165},[5305],{"type":45,"value":1170},{"type":39,"tag":119,"props":5307,"children":5308},{"style":187},[5309],{"type":45,"value":3509},{"type":39,"tag":119,"props":5311,"children":5312},{"style":165},[5313],{"type":45,"value":184},{"type":39,"tag":119,"props":5315,"children":5316},{"style":165},[5317],{"type":45,"value":370},{"type":39,"tag":119,"props":5319,"children":5320},{"class":121,"line":132},[5321],{"type":39,"tag":119,"props":5322,"children":5323},{"style":159},[5324],{"type":45,"value":2983},{"type":39,"tag":119,"props":5326,"children":5327},{"class":121,"line":141},[5328],{"type":39,"tag":119,"props":5329,"children":5330},{"style":126},[5331],{"type":45,"value":129},{"type":39,"tag":119,"props":5333,"children":5334},{"class":121,"line":26},[5335,5339,5343,5347],{"type":39,"tag":119,"props":5336,"children":5337},{"style":126},[5338],{"type":45,"value":3273},{"type":39,"tag":119,"props":5340,"children":5341},{"style":153},[5342],{"type":45,"value":236},{"type":39,"tag":119,"props":5344,"children":5345},{"style":239},[5346],{"type":45,"value":578},{"type":39,"tag":119,"props":5348,"children":5349},{"style":581},[5350],{"type":45,"value":3286},{"type":39,"tag":119,"props":5352,"children":5353},{"class":121,"line":207},[5354],{"type":39,"tag":119,"props":5355,"children":5356},{"style":126},[5357],{"type":45,"value":3294},{"type":39,"tag":119,"props":5359,"children":5360},{"class":121,"line":216},[5361,5365,5369,5373,5377,5381,5385],{"type":39,"tag":119,"props":5362,"children":5363},{"style":153},[5364],{"type":45,"value":426},{"type":39,"tag":119,"props":5366,"children":5367},{"style":153},[5368],{"type":45,"value":431},{"type":39,"tag":119,"props":5370,"children":5371},{"style":289},[5372],{"type":45,"value":436},{"type":39,"tag":119,"props":5374,"children":5375},{"style":321},[5376],{"type":45,"value":3306},{"type":39,"tag":119,"props":5378,"children":5379},{"style":289},[5380],{"type":45,"value":446},{"type":39,"tag":119,"props":5382,"children":5383},{"style":321},[5384],{"type":45,"value":162},{"type":39,"tag":119,"props":5386,"children":5387},{"style":165},[5388],{"type":45,"value":204},{"type":39,"tag":119,"props":5390,"children":5391},{"class":121,"line":225},[5392],{"type":39,"tag":119,"props":5393,"children":5394},{"style":159},[5395],{"type":45,"value":2983},{"type":39,"tag":119,"props":5397,"children":5398},{"class":121,"line":266},[5399,5403,5407,5411],{"type":39,"tag":119,"props":5400,"children":5401},{"style":289},[5402],{"type":45,"value":462},{"type":39,"tag":119,"props":5404,"children":5405},{"style":353},[5406],{"type":45,"value":3330},{"type":39,"tag":119,"props":5408,"children":5409},{"style":165},[5410],{"type":45,"value":883},{"type":39,"tag":119,"props":5412,"children":5413},{"style":165},[5414],{"type":45,"value":204},{"type":39,"tag":119,"props":5416,"children":5417},{"class":121,"line":275},[5418],{"type":39,"tag":119,"props":5419,"children":5420},{"style":126},[5421],{"type":45,"value":3075},{"type":39,"tag":119,"props":5423,"children":5424},{"class":121,"line":22},[5425,5429,5433,5437,5441,5445,5449,5453,5457,5461,5465,5469,5473],{"type":39,"tag":119,"props":5426,"children":5427},{"style":165},[5428],{"type":45,"value":3083},{"type":39,"tag":119,"props":5430,"children":5431},{"style":171},[5432],{"type":45,"value":3088},{"type":39,"tag":119,"props":5434,"children":5435},{"style":353},[5436],{"type":45,"value":883},{"type":39,"tag":119,"props":5438,"children":5439},{"style":165},[5440],{"type":45,"value":168},{"type":39,"tag":119,"props":5442,"children":5443},{"style":171},[5444],{"type":45,"value":3101},{"type":39,"tag":119,"props":5446,"children":5447},{"style":353},[5448],{"type":45,"value":179},{"type":39,"tag":119,"props":5450,"children":5451},{"style":165},[5452],{"type":45,"value":848},{"type":39,"tag":119,"props":5454,"children":5455},{"style":171},[5456],{"type":45,"value":341},{"type":39,"tag":119,"props":5458,"children":5459},{"style":353},[5460],{"type":45,"value":883},{"type":39,"tag":119,"props":5462,"children":5463},{"style":165},[5464],{"type":45,"value":168},{"type":39,"tag":119,"props":5466,"children":5467},{"style":171},[5468],{"type":45,"value":878},{"type":39,"tag":119,"props":5470,"children":5471},{"style":353},[5472],{"type":45,"value":3130},{"type":39,"tag":119,"props":5474,"children":5475},{"style":165},[5476],{"type":45,"value":370},{"type":39,"tag":119,"props":5478,"children":5479},{"class":121,"line":312},[5480],{"type":39,"tag":119,"props":5481,"children":5482},{"style":165},[5483],{"type":45,"value":3409},{"type":39,"tag":119,"props":5485,"children":5486},{"class":121,"line":373},[5487],{"type":39,"tag":119,"props":5488,"children":5489},{"style":159},[5490],{"type":45,"value":2983},{"type":39,"tag":119,"props":5492,"children":5493},{"class":121,"line":382},[5494],{"type":39,"tag":119,"props":5495,"children":5496},{"style":165},[5497],{"type":45,"value":3417},{"type":39,"tag":52,"props":5499,"children":5500},{},[5501],{"type":45,"value":3662},{"type":39,"tag":107,"props":5503,"children":5505},{"className":412,"code":5504,"language":414,"meta":112,"style":112},"import Controller from \"sap\u002Fui\u002Fcore\u002Fmvc\u002FController\";\nimport AppComponent from \"..\u002FComponent\";\n \n\u002F**\n* @namespace ui5tssampleapp.controller\n*\u002F\nexport default class App extends Controller {\n \n    public onInit() : void {\n        \u002F\u002F apply content density mode to root view\n        this.getView().addStyleClass((this.getOwnerComponent() as AppComponent).getContentDensityClass());\n    };\n \n};\n",[5506],{"type":39,"tag":115,"props":5507,"children":5508},{"__ignoreMap":112},[5509,5540,5573,5580,5587,5606,5613,5644,5651,5679,5686,5753,5760,5767],{"type":39,"tag":119,"props":5510,"children":5511},{"class":121,"line":122},[5512,5516,5520,5524,5528,5532,5536],{"type":39,"tag":119,"props":5513,"children":5514},{"style":153},[5515],{"type":45,"value":1155},{"type":39,"tag":119,"props":5517,"children":5518},{"style":159},[5519],{"type":45,"value":3681},{"type":39,"tag":119,"props":5521,"children":5522},{"style":153},[5523],{"type":45,"value":1165},{"type":39,"tag":119,"props":5525,"children":5526},{"style":165},[5527],{"type":45,"value":1170},{"type":39,"tag":119,"props":5529,"children":5530},{"style":187},[5531],{"type":45,"value":3509},{"type":39,"tag":119,"props":5533,"children":5534},{"style":165},[5535],{"type":45,"value":184},{"type":39,"tag":119,"props":5537,"children":5538},{"style":165},[5539],{"type":45,"value":370},{"type":39,"tag":119,"props":5541,"children":5542},{"class":121,"line":132},[5543,5547,5552,5556,5560,5565,5569],{"type":39,"tag":119,"props":5544,"children":5545},{"style":153},[5546],{"type":45,"value":1155},{"type":39,"tag":119,"props":5548,"children":5549},{"style":159},[5550],{"type":45,"value":5551}," AppComponent ",{"type":39,"tag":119,"props":5553,"children":5554},{"style":153},[5555],{"type":45,"value":1165},{"type":39,"tag":119,"props":5557,"children":5558},{"style":165},[5559],{"type":45,"value":1170},{"type":39,"tag":119,"props":5561,"children":5562},{"style":187},[5563],{"type":45,"value":5564},"..\u002FComponent",{"type":39,"tag":119,"props":5566,"children":5567},{"style":165},[5568],{"type":45,"value":184},{"type":39,"tag":119,"props":5570,"children":5571},{"style":165},[5572],{"type":45,"value":370},{"type":39,"tag":119,"props":5574,"children":5575},{"class":121,"line":141},[5576],{"type":39,"tag":119,"props":5577,"children":5578},{"style":159},[5579],{"type":45,"value":2983},{"type":39,"tag":119,"props":5581,"children":5582},{"class":121,"line":26},[5583],{"type":39,"tag":119,"props":5584,"children":5585},{"style":126},[5586],{"type":45,"value":129},{"type":39,"tag":119,"props":5588,"children":5589},{"class":121,"line":207},[5590,5594,5598,5602],{"type":39,"tag":119,"props":5591,"children":5592},{"style":126},[5593],{"type":45,"value":3273},{"type":39,"tag":119,"props":5595,"children":5596},{"style":153},[5597],{"type":45,"value":236},{"type":39,"tag":119,"props":5599,"children":5600},{"style":239},[5601],{"type":45,"value":578},{"type":39,"tag":119,"props":5603,"children":5604},{"style":581},[5605],{"type":45,"value":3286},{"type":39,"tag":119,"props":5607,"children":5608},{"class":121,"line":216},[5609],{"type":39,"tag":119,"props":5610,"children":5611},{"style":126},[5612],{"type":45,"value":3294},{"type":39,"tag":119,"props":5614,"children":5615},{"class":121,"line":225},[5616,5620,5624,5628,5632,5636,5640],{"type":39,"tag":119,"props":5617,"children":5618},{"style":153},[5619],{"type":45,"value":426},{"type":39,"tag":119,"props":5621,"children":5622},{"style":153},[5623],{"type":45,"value":431},{"type":39,"tag":119,"props":5625,"children":5626},{"style":289},[5627],{"type":45,"value":436},{"type":39,"tag":119,"props":5629,"children":5630},{"style":321},[5631],{"type":45,"value":3306},{"type":39,"tag":119,"props":5633,"children":5634},{"style":289},[5635],{"type":45,"value":446},{"type":39,"tag":119,"props":5637,"children":5638},{"style":321},[5639],{"type":45,"value":162},{"type":39,"tag":119,"props":5641,"children":5642},{"style":165},[5643],{"type":45,"value":204},{"type":39,"tag":119,"props":5645,"children":5646},{"class":121,"line":266},[5647],{"type":39,"tag":119,"props":5648,"children":5649},{"style":159},[5650],{"type":45,"value":2983},{"type":39,"tag":119,"props":5652,"children":5653},{"class":121,"line":275},[5654,5658,5662,5666,5671,5675],{"type":39,"tag":119,"props":5655,"children":5656},{"style":289},[5657],{"type":45,"value":462},{"type":39,"tag":119,"props":5659,"children":5660},{"style":353},[5661],{"type":45,"value":3330},{"type":39,"tag":119,"props":5663,"children":5664},{"style":165},[5665],{"type":45,"value":883},{"type":39,"tag":119,"props":5667,"children":5668},{"style":165},[5669],{"type":45,"value":5670}," :",{"type":39,"tag":119,"props":5672,"children":5673},{"style":321},[5674],{"type":45,"value":1102},{"type":39,"tag":119,"props":5676,"children":5677},{"style":165},[5678],{"type":45,"value":204},{"type":39,"tag":119,"props":5680,"children":5681},{"class":121,"line":22},[5682],{"type":39,"tag":119,"props":5683,"children":5684},{"style":126},[5685],{"type":45,"value":3075},{"type":39,"tag":119,"props":5687,"children":5688},{"class":121,"line":312},[5689,5693,5697,5701,5705,5709,5713,5717,5721,5725,5729,5733,5737,5741,5745,5749],{"type":39,"tag":119,"props":5690,"children":5691},{"style":165},[5692],{"type":45,"value":3083},{"type":39,"tag":119,"props":5694,"children":5695},{"style":171},[5696],{"type":45,"value":3088},{"type":39,"tag":119,"props":5698,"children":5699},{"style":353},[5700],{"type":45,"value":883},{"type":39,"tag":119,"props":5702,"children":5703},{"style":165},[5704],{"type":45,"value":168},{"type":39,"tag":119,"props":5706,"children":5707},{"style":171},[5708],{"type":45,"value":3101},{"type":39,"tag":119,"props":5710,"children":5711},{"style":353},[5712],{"type":45,"value":3373},{"type":39,"tag":119,"props":5714,"children":5715},{"style":165},[5716],{"type":45,"value":848},{"type":39,"tag":119,"props":5718,"children":5719},{"style":171},[5720],{"type":45,"value":341},{"type":39,"tag":119,"props":5722,"children":5723},{"style":353},[5724],{"type":45,"value":506},{"type":39,"tag":119,"props":5726,"children":5727},{"style":153},[5728],{"type":45,"value":511},{"type":39,"tag":119,"props":5730,"children":5731},{"style":321},[5732],{"type":45,"value":927},{"type":39,"tag":119,"props":5734,"children":5735},{"style":353},[5736],{"type":45,"value":365},{"type":39,"tag":119,"props":5738,"children":5739},{"style":165},[5740],{"type":45,"value":168},{"type":39,"tag":119,"props":5742,"children":5743},{"style":171},[5744],{"type":45,"value":878},{"type":39,"tag":119,"props":5746,"children":5747},{"style":353},[5748],{"type":45,"value":3130},{"type":39,"tag":119,"props":5750,"children":5751},{"style":165},[5752],{"type":45,"value":370},{"type":39,"tag":119,"props":5754,"children":5755},{"class":121,"line":373},[5756],{"type":39,"tag":119,"props":5757,"children":5758},{"style":165},[5759],{"type":45,"value":3409},{"type":39,"tag":119,"props":5761,"children":5762},{"class":121,"line":382},[5763],{"type":39,"tag":119,"props":5764,"children":5765},{"style":159},[5766],{"type":45,"value":2983},{"type":39,"tag":119,"props":5768,"children":5769},{"class":121,"line":391},[5770],{"type":39,"tag":119,"props":5771,"children":5772},{"style":165},[5773],{"type":45,"value":3417},{"type":39,"tag":52,"props":5775,"children":5776},{},[5777],{"type":45,"value":5778},"(Note: the \"void\" definition of the method return type is not strictly demanded by TypeScript, but is beneficial e.g. depending on the linting settings.)",{"type":39,"tag":90,"props":5780,"children":5782},{"id":5781},"step-5-solving-any-remaining-issues",[5783],{"type":45,"value":5784},"Step 5: Solving any Remaining Issues",{"type":39,"tag":52,"props":5786,"children":5787},{},[5788],{"type":45,"value":5789},"At this point, the number of remaining TypeScript errors should be vastly reduced.\nIf you clearly recognize some, fix them, but in case of doubt mention the last remaining issues to the developer.",{"type":39,"tag":83,"props":5791,"children":5793},{"id":5792},"ui5-control-typescript-conversion-guidelines",[5794],{"type":45,"value":5795},"UI5 Control TypeScript Conversion Guidelines",{"type":39,"tag":48,"props":5797,"children":5798},{},[5799],{"type":39,"tag":52,"props":5800,"children":5801},{},[5802],{"type":39,"tag":5803,"props":5804,"children":5805},"em",{},[5806],{"type":45,"value":5807},"This section covers the conversion of UI5 custom controls from JavaScript to TypeScript. This applies both to single custom controls within applications and to control libraries.",{"type":39,"tag":52,"props":5809,"children":5810},{},[5811],{"type":45,"value":5812},"Converting custom UI5 controls to TypeScript requires specific patterns in addition to the general TypeScript conversion (converting the proprietary UI5 class and syntax).",{"type":39,"tag":90,"props":5814,"children":5816},{"id":5815},"the-runtime-generated-methods-problem-critical",[5817],{"type":45,"value":5818},"The Runtime-Generated Methods Problem (CRITICAL)",{"type":39,"tag":52,"props":5820,"children":5821},{},[5822],{"type":39,"tag":1308,"props":5823,"children":5824},{},[5825],{"type":45,"value":5826},"This is the most important aspect to understand.",{"type":39,"tag":52,"props":5828,"children":5829},{},[5830,5832,5837],{"type":45,"value":5831},"UI5 generates getter\u002Fsetter (and more) methods for all properties, aggregations, associations, and events at ",{"type":39,"tag":1308,"props":5833,"children":5834},{},[5835],{"type":45,"value":5836},"runtime",{"type":45,"value":5838},". This means TypeScript cannot see these methods at development time, causing type errors.",{"type":39,"tag":988,"props":5840,"children":5842},{"id":5841},"the-problem",[5843],{"type":45,"value":5844},"The Problem",{"type":39,"tag":52,"props":5846,"children":5847},{},[5848,5850,5855],{"type":45,"value":5849},"In a control with a ",{"type":39,"tag":115,"props":5851,"children":5853},{"className":5852},[],[5854],{"type":45,"value":45},{"type":45,"value":5856}," property defined in metadata:",{"type":39,"tag":107,"props":5858,"children":5861},{"className":5859,"code":5860,"language":14,"meta":112,"style":112},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","static readonly metadata: MetadataOptions = {\n    properties: {\n        \"text\": \"string\"\n    }\n};\n",[5862],{"type":39,"tag":115,"props":5863,"children":5864},{"__ignoreMap":112},[5865,5895,5911,5943,5950],{"type":39,"tag":119,"props":5866,"children":5867},{"class":121,"line":122},[5868,5873,5878,5882,5887,5891],{"type":39,"tag":119,"props":5869,"children":5870},{"style":159},[5871],{"type":45,"value":5872},"static readonly ",{"type":39,"tag":119,"props":5874,"children":5875},{"style":321},[5876],{"type":45,"value":5877},"metadata",{"type":39,"tag":119,"props":5879,"children":5880},{"style":165},[5881],{"type":45,"value":286},{"type":39,"tag":119,"props":5883,"children":5884},{"style":159},[5885],{"type":45,"value":5886}," MetadataOptions ",{"type":39,"tag":119,"props":5888,"children":5889},{"style":165},[5890],{"type":45,"value":3001},{"type":39,"tag":119,"props":5892,"children":5893},{"style":165},[5894],{"type":45,"value":204},{"type":39,"tag":119,"props":5896,"children":5897},{"class":121,"line":132},[5898,5903,5907],{"type":39,"tag":119,"props":5899,"children":5900},{"style":353},[5901],{"type":45,"value":5902},"    properties",{"type":39,"tag":119,"props":5904,"children":5905},{"style":165},[5906],{"type":45,"value":286},{"type":39,"tag":119,"props":5908,"children":5909},{"style":165},[5910],{"type":45,"value":204},{"type":39,"tag":119,"props":5912,"children":5913},{"class":121,"line":141},[5914,5918,5922,5926,5930,5934,5939],{"type":39,"tag":119,"props":5915,"children":5916},{"style":165},[5917],{"type":45,"value":1444},{"type":39,"tag":119,"props":5919,"children":5920},{"style":353},[5921],{"type":45,"value":45},{"type":39,"tag":119,"props":5923,"children":5924},{"style":165},[5925],{"type":45,"value":184},{"type":39,"tag":119,"props":5927,"children":5928},{"style":165},[5929],{"type":45,"value":286},{"type":39,"tag":119,"props":5931,"children":5932},{"style":165},[5933],{"type":45,"value":1170},{"type":39,"tag":119,"props":5935,"children":5936},{"style":187},[5937],{"type":45,"value":5938},"string",{"type":39,"tag":119,"props":5940,"children":5941},{"style":165},[5942],{"type":45,"value":2640},{"type":39,"tag":119,"props":5944,"children":5945},{"class":121,"line":26},[5946],{"type":39,"tag":119,"props":5947,"children":5948},{"style":165},[5949],{"type":45,"value":527},{"type":39,"tag":119,"props":5951,"children":5952},{"class":121,"line":207},[5953],{"type":39,"tag":119,"props":5954,"children":5955},{"style":165},[5956],{"type":45,"value":3417},{"type":39,"tag":52,"props":5958,"children":5959},{},[5960],{"type":45,"value":5961},"TypeScript will show errors when trying to use the generated methods:",{"type":39,"tag":107,"props":5963,"children":5965},{"className":5859,"code":5964,"language":14,"meta":112,"style":112},"rm.text(control.getText());  \u002F\u002F ERROR: Property 'getText' does not exist on type 'MyControl'\n",[5966],{"type":39,"tag":115,"props":5967,"children":5968},{"__ignoreMap":112},[5969],{"type":39,"tag":119,"props":5970,"children":5971},{"class":121,"line":122},[5972,5977,5981,5985,5990,5994,5999,6003,6008],{"type":39,"tag":119,"props":5973,"children":5974},{"style":159},[5975],{"type":45,"value":5976},"rm",{"type":39,"tag":119,"props":5978,"children":5979},{"style":165},[5980],{"type":45,"value":168},{"type":39,"tag":119,"props":5982,"children":5983},{"style":171},[5984],{"type":45,"value":45},{"type":39,"tag":119,"props":5986,"children":5987},{"style":159},[5988],{"type":45,"value":5989},"(control",{"type":39,"tag":119,"props":5991,"children":5992},{"style":165},[5993],{"type":45,"value":168},{"type":39,"tag":119,"props":5995,"children":5996},{"style":171},[5997],{"type":45,"value":5998},"getText",{"type":39,"tag":119,"props":6000,"children":6001},{"style":159},[6002],{"type":45,"value":3130},{"type":39,"tag":119,"props":6004,"children":6005},{"style":165},[6006],{"type":45,"value":6007},";",{"type":39,"tag":119,"props":6009,"children":6010},{"style":126},[6011],{"type":45,"value":6012},"  \u002F\u002F ERROR: Property 'getText' does not exist on type 'MyControl'\n",{"type":39,"tag":52,"props":6014,"children":6015},{},[6016],{"type":45,"value":6017},"Additionally, TypeScript doesn't know the constructor signature structure for initializing controls:",{"type":39,"tag":107,"props":6019,"children":6021},{"className":5859,"code":6020,"language":14,"meta":112,"style":112},"new MyControl(\"myId\", {text: \"Hello\"}); \u002F\u002F TypeScript doesn't know about the settings object structure\n",[6022],{"type":39,"tag":115,"props":6023,"children":6024},{"__ignoreMap":112},[6025],{"type":39,"tag":119,"props":6026,"children":6027},{"class":121,"line":122},[6028,6033,6038,6042,6046,6051,6055,6059,6063,6067,6071,6075,6080,6084,6088,6092,6096],{"type":39,"tag":119,"props":6029,"children":6030},{"style":165},[6031],{"type":45,"value":6032},"new",{"type":39,"tag":119,"props":6034,"children":6035},{"style":171},[6036],{"type":45,"value":6037}," MyControl",{"type":39,"tag":119,"props":6039,"children":6040},{"style":159},[6041],{"type":45,"value":179},{"type":39,"tag":119,"props":6043,"children":6044},{"style":165},[6045],{"type":45,"value":184},{"type":39,"tag":119,"props":6047,"children":6048},{"style":187},[6049],{"type":45,"value":6050},"myId",{"type":39,"tag":119,"props":6052,"children":6053},{"style":165},[6054],{"type":45,"value":184},{"type":39,"tag":119,"props":6056,"children":6057},{"style":165},[6058],{"type":45,"value":199},{"type":39,"tag":119,"props":6060,"children":6061},{"style":165},[6062],{"type":45,"value":247},{"type":39,"tag":119,"props":6064,"children":6065},{"style":353},[6066],{"type":45,"value":45},{"type":39,"tag":119,"props":6068,"children":6069},{"style":165},[6070],{"type":45,"value":286},{"type":39,"tag":119,"props":6072,"children":6073},{"style":165},[6074],{"type":45,"value":1170},{"type":39,"tag":119,"props":6076,"children":6077},{"style":187},[6078],{"type":45,"value":6079},"Hello",{"type":39,"tag":119,"props":6081,"children":6082},{"style":165},[6083],{"type":45,"value":184},{"type":39,"tag":119,"props":6085,"children":6086},{"style":165},[6087],{"type":45,"value":258},{"type":39,"tag":119,"props":6089,"children":6090},{"style":159},[6091],{"type":45,"value":365},{"type":39,"tag":119,"props":6093,"children":6094},{"style":165},[6095],{"type":45,"value":6007},{"type":39,"tag":119,"props":6097,"children":6098},{"style":126},[6099],{"type":45,"value":6100}," \u002F\u002F TypeScript doesn't know about the settings object structure\n",{"type":39,"tag":52,"props":6102,"children":6103},{},[6104],{"type":45,"value":6105},"This affects:",{"type":39,"tag":3873,"props":6107,"children":6108},{},[6109,6134,6161,6179,6204],{"type":39,"tag":62,"props":6110,"children":6111},{},[6112,6114,6120,6121,6127,6128],{"type":45,"value":6113},"Property getters\u002Fsetters: ",{"type":39,"tag":115,"props":6115,"children":6117},{"className":6116},[],[6118],{"type":45,"value":6119},"getText()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6122,"children":6124},{"className":6123},[],[6125],{"type":45,"value":6126},"setText()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6129,"children":6131},{"className":6130},[],[6132],{"type":45,"value":6133},"bindText()",{"type":39,"tag":62,"props":6135,"children":6136},{},[6137,6139,6145,6146,6152,6153,6159],{"type":45,"value":6138},"Aggregation methods: ",{"type":39,"tag":115,"props":6140,"children":6142},{"className":6141},[],[6143],{"type":45,"value":6144},"addItem()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6147,"children":6149},{"className":6148},[],[6150],{"type":45,"value":6151},"removeItem()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6154,"children":6156},{"className":6155},[],[6157],{"type":45,"value":6158},"getItems()",{"type":45,"value":6160},", ...",{"type":39,"tag":62,"props":6162,"children":6163},{},[6164,6166,6172,6173],{"type":45,"value":6165},"Association methods: ",{"type":39,"tag":115,"props":6167,"children":6169},{"className":6168},[],[6170],{"type":45,"value":6171},"getLabel()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6174,"children":6176},{"className":6175},[],[6177],{"type":45,"value":6178},"setLabel()",{"type":39,"tag":62,"props":6180,"children":6181},{},[6182,6184,6190,6191,6197,6198],{"type":45,"value":6183},"Event methods: ",{"type":39,"tag":115,"props":6185,"children":6187},{"className":6186},[],[6188],{"type":45,"value":6189},"attachPress()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6192,"children":6194},{"className":6193},[],[6195],{"type":45,"value":6196},"detachPress()",{"type":45,"value":3436},{"type":39,"tag":115,"props":6199,"children":6201},{"className":6200},[],[6202],{"type":45,"value":6203},"firePress()",{"type":39,"tag":62,"props":6205,"children":6206},{},[6207],{"type":45,"value":6208},"Constructor settings object structure",{"type":39,"tag":988,"props":6210,"children":6212},{"id":6211},"the-solution-ui5ts-interface-generator",[6213],{"type":45,"value":6214},"The Solution: @ui5\u002Fts-interface-generator",{"type":39,"tag":52,"props":6216,"children":6217},{},[6218],{"type":45,"value":6219},"Install the interface generator tool as a dev dependency:",{"type":39,"tag":107,"props":6221,"children":6225},{"className":6222,"code":6223,"language":6224,"meta":112,"style":112},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install --save-dev @ui5\u002Fts-interface-generator@{{ts-interface-generator-version}}\n","sh",[6226],{"type":39,"tag":115,"props":6227,"children":6228},{"__ignoreMap":112},[6229],{"type":39,"tag":119,"props":6230,"children":6231},{"class":121,"line":122},[6232,6237,6242,6247],{"type":39,"tag":119,"props":6233,"children":6234},{"style":321},[6235],{"type":45,"value":6236},"npm",{"type":39,"tag":119,"props":6238,"children":6239},{"style":187},[6240],{"type":45,"value":6241}," install",{"type":39,"tag":119,"props":6243,"children":6244},{"style":187},[6245],{"type":45,"value":6246}," --save-dev",{"type":39,"tag":119,"props":6248,"children":6249},{"style":187},[6250],{"type":45,"value":6251}," @ui5\u002Fts-interface-generator@{{ts-interface-generator-version}}\n",{"type":39,"tag":52,"props":6253,"children":6254},{},[6255,6257,6262],{"type":45,"value":6256},"To make subsequent development easier, add a script like this to ",{"type":39,"tag":115,"props":6258,"children":6260},{"className":6259},[],[6261],{"type":45,"value":1382},{"type":45,"value":286},{"type":39,"tag":107,"props":6264,"children":6266},{"className":1398,"code":6265,"language":1400,"meta":112,"style":112},"{\n    \"scripts\": {\n        \"watch:controls\": \"npx @ui5\u002Fts-interface-generator --watch\"\n    }\n}\n",[6267],{"type":39,"tag":115,"props":6268,"children":6269},{"__ignoreMap":112},[6270,6277,6301,6334,6341],{"type":39,"tag":119,"props":6271,"children":6272},{"class":121,"line":122},[6273],{"type":39,"tag":119,"props":6274,"children":6275},{"style":165},[6276],{"type":45,"value":1412},{"type":39,"tag":119,"props":6278,"children":6279},{"class":121,"line":132},[6280,6284,6289,6293,6297],{"type":39,"tag":119,"props":6281,"children":6282},{"style":165},[6283],{"type":45,"value":1420},{"type":39,"tag":119,"props":6285,"children":6286},{"style":289},[6287],{"type":45,"value":6288},"scripts",{"type":39,"tag":119,"props":6290,"children":6291},{"style":165},[6292],{"type":45,"value":184},{"type":39,"tag":119,"props":6294,"children":6295},{"style":165},[6296],{"type":45,"value":286},{"type":39,"tag":119,"props":6298,"children":6299},{"style":165},[6300],{"type":45,"value":204},{"type":39,"tag":119,"props":6302,"children":6303},{"class":121,"line":141},[6304,6308,6313,6317,6321,6325,6330],{"type":39,"tag":119,"props":6305,"children":6306},{"style":165},[6307],{"type":45,"value":1444},{"type":39,"tag":119,"props":6309,"children":6310},{"style":321},[6311],{"type":45,"value":6312},"watch:controls",{"type":39,"tag":119,"props":6314,"children":6315},{"style":165},[6316],{"type":45,"value":184},{"type":39,"tag":119,"props":6318,"children":6319},{"style":165},[6320],{"type":45,"value":286},{"type":39,"tag":119,"props":6322,"children":6323},{"style":165},[6324],{"type":45,"value":1170},{"type":39,"tag":119,"props":6326,"children":6327},{"style":187},[6328],{"type":45,"value":6329},"npx @ui5\u002Fts-interface-generator --watch",{"type":39,"tag":119,"props":6331,"children":6332},{"style":165},[6333],{"type":45,"value":2640},{"type":39,"tag":119,"props":6335,"children":6336},{"class":121,"line":26},[6337],{"type":39,"tag":119,"props":6338,"children":6339},{"style":165},[6340],{"type":45,"value":527},{"type":39,"tag":119,"props":6342,"children":6343},{"class":121,"line":207},[6344],{"type":39,"tag":119,"props":6345,"children":6346},{"style":165},[6347],{"type":45,"value":535},{"type":39,"tag":52,"props":6349,"children":6350},{},[6351,6353,6358,6360,6366],{"type":45,"value":6352},"NOTE: the tsconfig file related to the controls must be in the same directory in which the interface generator is launched. If you launch it in the root of your project and the tsconfig covering the TypeScript controls is in a subdirectory or has a different name than ",{"type":39,"tag":115,"props":6354,"children":6356},{"className":6355},[],[6357],{"type":45,"value":789},{"type":45,"value":6359},", then call it like ",{"type":39,"tag":115,"props":6361,"children":6363},{"className":6362},[],[6364],{"type":45,"value":6365}," npx @ui5\u002Fts-interface-generator --watch --config path\u002Fto\u002Ftsconfig.json",{"type":45,"value":168},{"type":39,"tag":52,"props":6368,"children":6369},{},[6370],{"type":45,"value":6371},"After TypeScript conversion of all controls, run the generator once to generate the needed control interfaces:",{"type":39,"tag":107,"props":6373,"children":6377},{"className":6374,"code":6375,"language":6376,"meta":112,"style":112},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm run watch:controls\n","bash",[6378],{"type":39,"tag":115,"props":6379,"children":6380},{"__ignoreMap":112},[6381],{"type":39,"tag":119,"props":6382,"children":6383},{"class":121,"line":122},[6384,6388,6393],{"type":39,"tag":119,"props":6385,"children":6386},{"style":321},[6387],{"type":45,"value":6236},{"type":39,"tag":119,"props":6389,"children":6390},{"style":187},[6391],{"type":45,"value":6392}," run",{"type":39,"tag":119,"props":6394,"children":6395},{"style":187},[6396],{"type":45,"value":6397}," watch:controls\n",{"type":39,"tag":52,"props":6399,"children":6400},{},[6401,6403,6409,6411,6417],{"type":45,"value":6402},"This generates a ",{"type":39,"tag":115,"props":6404,"children":6406},{"className":6405},[],[6407],{"type":45,"value":6408},"*.gen.d.ts",{"type":45,"value":6410}," file (e.g., ",{"type":39,"tag":115,"props":6412,"children":6414},{"className":6413},[],[6415],{"type":45,"value":6416},"MyControl.gen.d.ts",{"type":45,"value":6418},") containing TypeScript interfaces with all the runtime-generated methods. TypeScript merges these interfaces with the control class.",{"type":39,"tag":52,"props":6420,"children":6421},{},[6422],{"type":45,"value":6423},"These generated files should be committed to version control and never edited manually.",{"type":39,"tag":988,"props":6425,"children":6427},{"id":6426},"required-constructor-signatures-critical-manual-step",[6428],{"type":45,"value":6429},"Required Constructor Signatures (CRITICAL MANUAL STEP)",{"type":39,"tag":52,"props":6431,"children":6432},{},[6433],{"type":45,"value":6434},"After running the interface generator, you must manually copy the constructor signatures from the terminal output into the respective control class.",{"type":39,"tag":52,"props":6436,"children":6437},{},[6438],{"type":45,"value":6439},"The generator outputs something like:",{"type":39,"tag":107,"props":6441,"children":6445},{"className":6442,"code":6444,"language":45},[6443],"language-text","===== BEGIN =====\n\u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \nconstructor(id?: string | $MyControlSettings);\nconstructor(id?: string, settings?: $MyControlSettings);\nconstructor(id?: string, settings?: $MyControlSettings) { super(id, settings); }\n===== END =====\n",[6446],{"type":39,"tag":115,"props":6447,"children":6448},{"__ignoreMap":112},[6449],{"type":45,"value":6444},{"type":39,"tag":52,"props":6451,"children":6452},{},[6453,6458],{"type":39,"tag":1308,"props":6454,"children":6455},{},[6456],{"type":45,"value":6457},"Copy these lines into the beginning of the class body",{"type":45,"value":6459},", before the metadata definition:",{"type":39,"tag":107,"props":6461,"children":6463},{"className":5859,"code":6462,"language":14,"meta":112,"style":112},"export default class MyControl extends Control {\n    \u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \n    constructor(id?: string | $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings) { super(id, settings); }\n\n    static readonly metadata: MetadataOptions = {\n        \u002F\u002F ...\n    };\n}\n",[6464],{"type":39,"tag":115,"props":6465,"children":6466},{"__ignoreMap":112},[6467,6499,6507,6549,6593,6672,6679,6714,6722,6729],{"type":39,"tag":119,"props":6468,"children":6469},{"class":121,"line":122},[6470,6474,6478,6482,6486,6490,6495],{"type":39,"tag":119,"props":6471,"children":6472},{"style":153},[6473],{"type":45,"value":426},{"type":39,"tag":119,"props":6475,"children":6476},{"style":153},[6477],{"type":45,"value":431},{"type":39,"tag":119,"props":6479,"children":6480},{"style":289},[6481],{"type":45,"value":436},{"type":39,"tag":119,"props":6483,"children":6484},{"style":321},[6485],{"type":45,"value":6037},{"type":39,"tag":119,"props":6487,"children":6488},{"style":289},[6489],{"type":45,"value":446},{"type":39,"tag":119,"props":6491,"children":6492},{"style":321},[6493],{"type":45,"value":6494}," Control",{"type":39,"tag":119,"props":6496,"children":6497},{"style":165},[6498],{"type":45,"value":204},{"type":39,"tag":119,"props":6500,"children":6501},{"class":121,"line":132},[6502],{"type":39,"tag":119,"props":6503,"children":6504},{"style":126},[6505],{"type":45,"value":6506},"    \u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \n",{"type":39,"tag":119,"props":6508,"children":6509},{"class":121,"line":141},[6510,6515,6519,6524,6529,6534,6539,6544],{"type":39,"tag":119,"props":6511,"children":6512},{"style":289},[6513],{"type":45,"value":6514},"    constructor",{"type":39,"tag":119,"props":6516,"children":6517},{"style":165},[6518],{"type":45,"value":179},{"type":39,"tag":119,"props":6520,"children":6521},{"style":581},[6522],{"type":45,"value":6523},"id",{"type":39,"tag":119,"props":6525,"children":6526},{"style":165},[6527],{"type":45,"value":6528},"?:",{"type":39,"tag":119,"props":6530,"children":6531},{"style":321},[6532],{"type":45,"value":6533}," string",{"type":39,"tag":119,"props":6535,"children":6536},{"style":165},[6537],{"type":45,"value":6538}," |",{"type":39,"tag":119,"props":6540,"children":6541},{"style":321},[6542],{"type":45,"value":6543}," $MyControlSettings",{"type":39,"tag":119,"props":6545,"children":6546},{"style":165},[6547],{"type":45,"value":6548},");\n",{"type":39,"tag":119,"props":6550,"children":6551},{"class":121,"line":26},[6552,6556,6560,6564,6568,6572,6576,6581,6585,6589],{"type":39,"tag":119,"props":6553,"children":6554},{"style":289},[6555],{"type":45,"value":6514},{"type":39,"tag":119,"props":6557,"children":6558},{"style":165},[6559],{"type":45,"value":179},{"type":39,"tag":119,"props":6561,"children":6562},{"style":581},[6563],{"type":45,"value":6523},{"type":39,"tag":119,"props":6565,"children":6566},{"style":165},[6567],{"type":45,"value":6528},{"type":39,"tag":119,"props":6569,"children":6570},{"style":321},[6571],{"type":45,"value":6533},{"type":39,"tag":119,"props":6573,"children":6574},{"style":165},[6575],{"type":45,"value":199},{"type":39,"tag":119,"props":6577,"children":6578},{"style":581},[6579],{"type":45,"value":6580}," settings",{"type":39,"tag":119,"props":6582,"children":6583},{"style":165},[6584],{"type":45,"value":6528},{"type":39,"tag":119,"props":6586,"children":6587},{"style":321},[6588],{"type":45,"value":6543},{"type":39,"tag":119,"props":6590,"children":6591},{"style":165},[6592],{"type":45,"value":6548},{"type":39,"tag":119,"props":6594,"children":6595},{"class":121,"line":207},[6596,6600,6604,6608,6612,6616,6620,6624,6628,6632,6636,6640,6644,6648,6652,6656,6660,6664,6668],{"type":39,"tag":119,"props":6597,"children":6598},{"style":289},[6599],{"type":45,"value":6514},{"type":39,"tag":119,"props":6601,"children":6602},{"style":165},[6603],{"type":45,"value":179},{"type":39,"tag":119,"props":6605,"children":6606},{"style":581},[6607],{"type":45,"value":6523},{"type":39,"tag":119,"props":6609,"children":6610},{"style":165},[6611],{"type":45,"value":6528},{"type":39,"tag":119,"props":6613,"children":6614},{"style":321},[6615],{"type":45,"value":6533},{"type":39,"tag":119,"props":6617,"children":6618},{"style":165},[6619],{"type":45,"value":199},{"type":39,"tag":119,"props":6621,"children":6622},{"style":581},[6623],{"type":45,"value":6580},{"type":39,"tag":119,"props":6625,"children":6626},{"style":165},[6627],{"type":45,"value":6528},{"type":39,"tag":119,"props":6629,"children":6630},{"style":321},[6631],{"type":45,"value":6543},{"type":39,"tag":119,"props":6633,"children":6634},{"style":165},[6635],{"type":45,"value":365},{"type":39,"tag":119,"props":6637,"children":6638},{"style":165},[6639],{"type":45,"value":247},{"type":39,"tag":119,"props":6641,"children":6642},{"style":159},[6643],{"type":45,"value":493},{"type":39,"tag":119,"props":6645,"children":6646},{"style":353},[6647],{"type":45,"value":179},{"type":39,"tag":119,"props":6649,"children":6650},{"style":159},[6651],{"type":45,"value":6523},{"type":39,"tag":119,"props":6653,"children":6654},{"style":165},[6655],{"type":45,"value":199},{"type":39,"tag":119,"props":6657,"children":6658},{"style":159},[6659],{"type":45,"value":6580},{"type":39,"tag":119,"props":6661,"children":6662},{"style":353},[6663],{"type":45,"value":365},{"type":39,"tag":119,"props":6665,"children":6666},{"style":165},[6667],{"type":45,"value":6007},{"type":39,"tag":119,"props":6669,"children":6670},{"style":165},[6671],{"type":45,"value":4071},{"type":39,"tag":119,"props":6673,"children":6674},{"class":121,"line":216},[6675],{"type":39,"tag":119,"props":6676,"children":6677},{"emptyLinePlaceholder":2421},[6678],{"type":45,"value":2424},{"type":39,"tag":119,"props":6680,"children":6681},{"class":121,"line":225},[6682,6687,6692,6697,6701,6706,6710],{"type":39,"tag":119,"props":6683,"children":6684},{"style":289},[6685],{"type":45,"value":6686},"    static",{"type":39,"tag":119,"props":6688,"children":6689},{"style":289},[6690],{"type":45,"value":6691}," readonly",{"type":39,"tag":119,"props":6693,"children":6694},{"style":353},[6695],{"type":45,"value":6696}," metadata",{"type":39,"tag":119,"props":6698,"children":6699},{"style":165},[6700],{"type":45,"value":286},{"type":39,"tag":119,"props":6702,"children":6703},{"style":321},[6704],{"type":45,"value":6705}," MetadataOptions",{"type":39,"tag":119,"props":6707,"children":6708},{"style":165},[6709],{"type":45,"value":4470},{"type":39,"tag":119,"props":6711,"children":6712},{"style":165},[6713],{"type":45,"value":204},{"type":39,"tag":119,"props":6715,"children":6716},{"class":121,"line":266},[6717],{"type":39,"tag":119,"props":6718,"children":6719},{"style":126},[6720],{"type":45,"value":6721},"        \u002F\u002F ...\n",{"type":39,"tag":119,"props":6723,"children":6724},{"class":121,"line":275},[6725],{"type":39,"tag":119,"props":6726,"children":6727},{"style":165},[6728],{"type":45,"value":3409},{"type":39,"tag":119,"props":6730,"children":6731},{"class":121,"line":22},[6732],{"type":39,"tag":119,"props":6733,"children":6734},{"style":165},[6735],{"type":45,"value":535},{"type":39,"tag":90,"props":6737,"children":6739},{"id":6738},"control-metadata-typing",[6740],{"type":45,"value":6741},"Control Metadata Typing",{"type":39,"tag":52,"props":6743,"children":6744},{},[6745,6747,6753],{"type":45,"value":6746},"The control metadata must be typed as ",{"type":39,"tag":115,"props":6748,"children":6750},{"className":6749},[],[6751],{"type":45,"value":6752},"MetadataOptions",{"type":45,"value":286},{"type":39,"tag":107,"props":6755,"children":6757},{"className":5859,"code":6756,"language":14,"meta":112,"style":112},"import type { MetadataOptions } from \"sap\u002Fui\u002Fcore\u002FElement\";\n\nexport default class MyControl extends Control {\n    static readonly metadata: MetadataOptions = {\n        properties: {\n            \"text\": \"string\"\n        }\n    };\n}\n",[6758],{"type":39,"tag":115,"props":6759,"children":6760},{"__ignoreMap":112},[6761,6806,6813,6844,6875,6891,6922,6929,6936],{"type":39,"tag":119,"props":6762,"children":6763},{"class":121,"line":122},[6764,6768,6772,6776,6780,6785,6789,6793,6798,6802],{"type":39,"tag":119,"props":6765,"children":6766},{"style":153},[6767],{"type":45,"value":1155},{"type":39,"tag":119,"props":6769,"children":6770},{"style":153},[6771],{"type":45,"value":813},{"type":39,"tag":119,"props":6773,"children":6774},{"style":165},[6775],{"type":45,"value":247},{"type":39,"tag":119,"props":6777,"children":6778},{"style":159},[6779],{"type":45,"value":6705},{"type":39,"tag":119,"props":6781,"children":6782},{"style":165},[6783],{"type":45,"value":6784}," }",{"type":39,"tag":119,"props":6786,"children":6787},{"style":153},[6788],{"type":45,"value":4730},{"type":39,"tag":119,"props":6790,"children":6791},{"style":165},[6792],{"type":45,"value":1170},{"type":39,"tag":119,"props":6794,"children":6795},{"style":187},[6796],{"type":45,"value":6797},"sap\u002Fui\u002Fcore\u002FElement",{"type":39,"tag":119,"props":6799,"children":6800},{"style":165},[6801],{"type":45,"value":184},{"type":39,"tag":119,"props":6803,"children":6804},{"style":165},[6805],{"type":45,"value":370},{"type":39,"tag":119,"props":6807,"children":6808},{"class":121,"line":132},[6809],{"type":39,"tag":119,"props":6810,"children":6811},{"emptyLinePlaceholder":2421},[6812],{"type":45,"value":2424},{"type":39,"tag":119,"props":6814,"children":6815},{"class":121,"line":141},[6816,6820,6824,6828,6832,6836,6840],{"type":39,"tag":119,"props":6817,"children":6818},{"style":153},[6819],{"type":45,"value":426},{"type":39,"tag":119,"props":6821,"children":6822},{"style":153},[6823],{"type":45,"value":431},{"type":39,"tag":119,"props":6825,"children":6826},{"style":289},[6827],{"type":45,"value":436},{"type":39,"tag":119,"props":6829,"children":6830},{"style":321},[6831],{"type":45,"value":6037},{"type":39,"tag":119,"props":6833,"children":6834},{"style":289},[6835],{"type":45,"value":446},{"type":39,"tag":119,"props":6837,"children":6838},{"style":321},[6839],{"type":45,"value":6494},{"type":39,"tag":119,"props":6841,"children":6842},{"style":165},[6843],{"type":45,"value":204},{"type":39,"tag":119,"props":6845,"children":6846},{"class":121,"line":26},[6847,6851,6855,6859,6863,6867,6871],{"type":39,"tag":119,"props":6848,"children":6849},{"style":289},[6850],{"type":45,"value":6686},{"type":39,"tag":119,"props":6852,"children":6853},{"style":289},[6854],{"type":45,"value":6691},{"type":39,"tag":119,"props":6856,"children":6857},{"style":353},[6858],{"type":45,"value":6696},{"type":39,"tag":119,"props":6860,"children":6861},{"style":165},[6862],{"type":45,"value":286},{"type":39,"tag":119,"props":6864,"children":6865},{"style":321},[6866],{"type":45,"value":6705},{"type":39,"tag":119,"props":6868,"children":6869},{"style":165},[6870],{"type":45,"value":4470},{"type":39,"tag":119,"props":6872,"children":6873},{"style":165},[6874],{"type":45,"value":204},{"type":39,"tag":119,"props":6876,"children":6877},{"class":121,"line":207},[6878,6883,6887],{"type":39,"tag":119,"props":6879,"children":6880},{"style":353},[6881],{"type":45,"value":6882},"        properties",{"type":39,"tag":119,"props":6884,"children":6885},{"style":165},[6886],{"type":45,"value":286},{"type":39,"tag":119,"props":6888,"children":6889},{"style":165},[6890],{"type":45,"value":204},{"type":39,"tag":119,"props":6892,"children":6893},{"class":121,"line":216},[6894,6898,6902,6906,6910,6914,6918],{"type":39,"tag":119,"props":6895,"children":6896},{"style":165},[6897],{"type":45,"value":1854},{"type":39,"tag":119,"props":6899,"children":6900},{"style":353},[6901],{"type":45,"value":45},{"type":39,"tag":119,"props":6903,"children":6904},{"style":165},[6905],{"type":45,"value":184},{"type":39,"tag":119,"props":6907,"children":6908},{"style":165},[6909],{"type":45,"value":286},{"type":39,"tag":119,"props":6911,"children":6912},{"style":165},[6913],{"type":45,"value":1170},{"type":39,"tag":119,"props":6915,"children":6916},{"style":187},[6917],{"type":45,"value":5938},{"type":39,"tag":119,"props":6919,"children":6920},{"style":165},[6921],{"type":45,"value":2640},{"type":39,"tag":119,"props":6923,"children":6924},{"class":121,"line":225},[6925],{"type":39,"tag":119,"props":6926,"children":6927},{"style":165},[6928],{"type":45,"value":1983},{"type":39,"tag":119,"props":6930,"children":6931},{"class":121,"line":266},[6932],{"type":39,"tag":119,"props":6933,"children":6934},{"style":165},[6935],{"type":45,"value":3409},{"type":39,"tag":119,"props":6937,"children":6938},{"class":121,"line":275},[6939],{"type":39,"tag":119,"props":6940,"children":6941},{"style":165},[6942],{"type":45,"value":535},{"type":39,"tag":52,"props":6944,"children":6945},{},[6946],{"type":39,"tag":1308,"props":6947,"children":6948},{},[6949],{"type":45,"value":6950},"Important points:",{"type":39,"tag":3873,"props":6952,"children":6953},{},[6954,6995,7015,7033],{"type":39,"tag":62,"props":6955,"children":6956},{},[6957,6959,6964,6966,6971,6973,6979,6980,6986,6988,6994],{"type":45,"value":6958},"Import ",{"type":39,"tag":115,"props":6960,"children":6962},{"className":6961},[],[6963],{"type":45,"value":6752},{"type":45,"value":6965}," from ",{"type":39,"tag":115,"props":6967,"children":6969},{"className":6968},[],[6970],{"type":45,"value":6797},{"type":45,"value":6972}," for controls (or closest base class - also available for ",{"type":39,"tag":115,"props":6974,"children":6976},{"className":6975},[],[6977],{"type":45,"value":6978},"sap\u002Fui\u002Fcore\u002FObject",{"type":45,"value":3436},{"type":39,"tag":115,"props":6981,"children":6983},{"className":6982},[],[6984],{"type":45,"value":6985},"sap\u002Fui\u002Fcore\u002FManagedObject",{"type":45,"value":6987},", and ",{"type":39,"tag":115,"props":6989,"children":6991},{"className":6990},[],[6992],{"type":45,"value":6993},"sap\u002Fui\u002Fcore\u002FComponent",{"type":45,"value":365},{"type":39,"tag":62,"props":6996,"children":6997},{},[6998,7000,7006,7008,7013],{"type":45,"value":6999},"Use ",{"type":39,"tag":115,"props":7001,"children":7003},{"className":7002},[],[7004],{"type":45,"value":7005},"import type",{"type":45,"value":7007}," instead of ",{"type":39,"tag":115,"props":7009,"children":7011},{"className":7010},[],[7012],{"type":45,"value":1155},{"type":45,"value":7014}," (design-time only, no runtime impact)",{"type":39,"tag":62,"props":7016,"children":7017},{},[7018,7023,7025,7031],{"type":39,"tag":115,"props":7019,"children":7021},{"className":7020},[],[7022],{"type":45,"value":6752},{"type":45,"value":7024}," available since UI5 1.110; use ",{"type":39,"tag":115,"props":7026,"children":7028},{"className":7027},[],[7029],{"type":45,"value":7030},"object",{"type":45,"value":7032}," for earlier versions",{"type":39,"tag":62,"props":7034,"children":7035},{},[7036],{"type":45,"value":7037},"Typing prevents issues when inheriting from the control (inherited properties should not be repeated)",{"type":39,"tag":90,"props":7039,"children":7041},{"id":7040},"namespace-annotation-required",[7042],{"type":45,"value":7043},"Namespace Annotation Required",{"type":39,"tag":52,"props":7045,"children":7046},{},[7047,7048,7054,7056,7061],{"type":45,"value":1355},{"type":39,"tag":115,"props":7049,"children":7051},{"className":7050},[],[7052],{"type":45,"value":7053},"@namespace",{"type":45,"value":7055}," JSDoc annotation is ",{"type":39,"tag":1308,"props":7057,"children":7058},{},[7059],{"type":45,"value":7060},"required",{"type":45,"value":7062}," for the transformer to generate correct UI5 class names:",{"type":39,"tag":107,"props":7064,"children":7066},{"className":5859,"code":7065,"language":14,"meta":112,"style":112},"\u002F**\n * @namespace ui5.typescript.helloworld.control\n *\u002F\nexport default class MyControl extends Control {\n    \u002F\u002F ...\n}\n",[7067],{"type":39,"tag":115,"props":7068,"children":7069},{"__ignoreMap":112},[7070,7077,7097,7104,7135,7143],{"type":39,"tag":119,"props":7071,"children":7072},{"class":121,"line":122},[7073],{"type":39,"tag":119,"props":7074,"children":7075},{"style":126},[7076],{"type":45,"value":129},{"type":39,"tag":119,"props":7078,"children":7079},{"class":121,"line":132},[7080,7084,7088,7092],{"type":39,"tag":119,"props":7081,"children":7082},{"style":126},[7083],{"type":45,"value":569},{"type":39,"tag":119,"props":7085,"children":7086},{"style":153},[7087],{"type":45,"value":236},{"type":39,"tag":119,"props":7089,"children":7090},{"style":239},[7091],{"type":45,"value":578},{"type":39,"tag":119,"props":7093,"children":7094},{"style":581},[7095],{"type":45,"value":7096}," ui5.typescript.helloworld.control\n",{"type":39,"tag":119,"props":7098,"children":7099},{"class":121,"line":141},[7100],{"type":39,"tag":119,"props":7101,"children":7102},{"style":126},[7103],{"type":45,"value":147},{"type":39,"tag":119,"props":7105,"children":7106},{"class":121,"line":26},[7107,7111,7115,7119,7123,7127,7131],{"type":39,"tag":119,"props":7108,"children":7109},{"style":153},[7110],{"type":45,"value":426},{"type":39,"tag":119,"props":7112,"children":7113},{"style":153},[7114],{"type":45,"value":431},{"type":39,"tag":119,"props":7116,"children":7117},{"style":289},[7118],{"type":45,"value":436},{"type":39,"tag":119,"props":7120,"children":7121},{"style":321},[7122],{"type":45,"value":6037},{"type":39,"tag":119,"props":7124,"children":7125},{"style":289},[7126],{"type":45,"value":446},{"type":39,"tag":119,"props":7128,"children":7129},{"style":321},[7130],{"type":45,"value":6494},{"type":39,"tag":119,"props":7132,"children":7133},{"style":165},[7134],{"type":45,"value":204},{"type":39,"tag":119,"props":7136,"children":7137},{"class":121,"line":207},[7138],{"type":39,"tag":119,"props":7139,"children":7140},{"style":126},[7141],{"type":45,"value":7142},"    \u002F\u002F ...\n",{"type":39,"tag":119,"props":7144,"children":7145},{"class":121,"line":216},[7146],{"type":39,"tag":119,"props":7147,"children":7148},{"style":165},[7149],{"type":45,"value":535},{"type":39,"tag":90,"props":7151,"children":7153},{"id":7152},"export-pattern",[7154],{"type":45,"value":7155},"Export Pattern",{"type":39,"tag":52,"props":7157,"children":7158},{},[7159,7172],{"type":39,"tag":1308,"props":7160,"children":7161},{},[7162,7164,7170],{"type":45,"value":7163},"Must use ",{"type":39,"tag":115,"props":7165,"children":7167},{"className":7166},[],[7168],{"type":45,"value":7169},"export default",{"type":45,"value":7171}," immediately when defining the class",{"type":45,"value":7173},", otherwise ts-interface-generator will fail:",{"type":39,"tag":107,"props":7175,"children":7177},{"className":5859,"code":7176,"language":14,"meta":112,"style":112},"\u002F\u002F CORRECT:\nexport default class MyControl extends Control {\n    \u002F\u002F ...\n}\n\n\u002F\u002F WRONG - separate export:\nclass MyControl extends Control {\n    \u002F\u002F ...\n}\nexport default MyControl;\n",[7178],{"type":39,"tag":115,"props":7179,"children":7180},{"__ignoreMap":112},[7181,7189,7220,7227,7234,7241,7249,7272,7279,7286],{"type":39,"tag":119,"props":7182,"children":7183},{"class":121,"line":122},[7184],{"type":39,"tag":119,"props":7185,"children":7186},{"style":126},[7187],{"type":45,"value":7188},"\u002F\u002F CORRECT:\n",{"type":39,"tag":119,"props":7190,"children":7191},{"class":121,"line":132},[7192,7196,7200,7204,7208,7212,7216],{"type":39,"tag":119,"props":7193,"children":7194},{"style":153},[7195],{"type":45,"value":426},{"type":39,"tag":119,"props":7197,"children":7198},{"style":153},[7199],{"type":45,"value":431},{"type":39,"tag":119,"props":7201,"children":7202},{"style":289},[7203],{"type":45,"value":436},{"type":39,"tag":119,"props":7205,"children":7206},{"style":321},[7207],{"type":45,"value":6037},{"type":39,"tag":119,"props":7209,"children":7210},{"style":289},[7211],{"type":45,"value":446},{"type":39,"tag":119,"props":7213,"children":7214},{"style":321},[7215],{"type":45,"value":6494},{"type":39,"tag":119,"props":7217,"children":7218},{"style":165},[7219],{"type":45,"value":204},{"type":39,"tag":119,"props":7221,"children":7222},{"class":121,"line":141},[7223],{"type":39,"tag":119,"props":7224,"children":7225},{"style":126},[7226],{"type":45,"value":7142},{"type":39,"tag":119,"props":7228,"children":7229},{"class":121,"line":26},[7230],{"type":39,"tag":119,"props":7231,"children":7232},{"style":165},[7233],{"type":45,"value":535},{"type":39,"tag":119,"props":7235,"children":7236},{"class":121,"line":207},[7237],{"type":39,"tag":119,"props":7238,"children":7239},{"emptyLinePlaceholder":2421},[7240],{"type":45,"value":2424},{"type":39,"tag":119,"props":7242,"children":7243},{"class":121,"line":216},[7244],{"type":39,"tag":119,"props":7245,"children":7246},{"style":126},[7247],{"type":45,"value":7248},"\u002F\u002F WRONG - separate export:\n",{"type":39,"tag":119,"props":7250,"children":7251},{"class":121,"line":225},[7252,7256,7260,7264,7268],{"type":39,"tag":119,"props":7253,"children":7254},{"style":289},[7255],{"type":45,"value":2854},{"type":39,"tag":119,"props":7257,"children":7258},{"style":321},[7259],{"type":45,"value":6037},{"type":39,"tag":119,"props":7261,"children":7262},{"style":289},[7263],{"type":45,"value":446},{"type":39,"tag":119,"props":7265,"children":7266},{"style":321},[7267],{"type":45,"value":6494},{"type":39,"tag":119,"props":7269,"children":7270},{"style":165},[7271],{"type":45,"value":204},{"type":39,"tag":119,"props":7273,"children":7274},{"class":121,"line":266},[7275],{"type":39,"tag":119,"props":7276,"children":7277},{"style":126},[7278],{"type":45,"value":7142},{"type":39,"tag":119,"props":7280,"children":7281},{"class":121,"line":275},[7282],{"type":39,"tag":119,"props":7283,"children":7284},{"style":165},[7285],{"type":45,"value":535},{"type":39,"tag":119,"props":7287,"children":7288},{"class":121,"line":22},[7289,7293,7297,7301],{"type":39,"tag":119,"props":7290,"children":7291},{"style":153},[7292],{"type":45,"value":426},{"type":39,"tag":119,"props":7294,"children":7295},{"style":153},[7296],{"type":45,"value":431},{"type":39,"tag":119,"props":7298,"children":7299},{"style":159},[7300],{"type":45,"value":6037},{"type":39,"tag":119,"props":7302,"children":7303},{"style":165},[7304],{"type":45,"value":370},{"type":39,"tag":90,"props":7306,"children":7308},{"id":7307},"static-members-for-metadata-and-renderer",[7309],{"type":45,"value":7310},"Static Members for Metadata and Renderer",{"type":39,"tag":52,"props":7312,"children":7313},{},[7314,7316,7322],{"type":45,"value":7315},"Both metadata and renderer are defined as ",{"type":39,"tag":115,"props":7317,"children":7319},{"className":7318},[],[7320],{"type":45,"value":7321},"static",{"type":45,"value":7323}," class members:",{"type":39,"tag":107,"props":7325,"children":7327},{"className":5859,"code":7326,"language":14,"meta":112,"style":112},"import RenderManager from \"sap\u002Fui\u002Fcore\u002FRenderManager\";\n\nexport default class MyControl extends Control {\n    static readonly metadata: MetadataOptions = {\n        properties: {\n            \"text\": \"string\"\n        }\n    };\n\n    static renderer = {\n        apiVersion: 2,\n        render: function (rm: RenderManager, control: MyControl): void {\n            rm.openStart(\"div\", control);\n            rm.openEnd();\n            rm.text(control.getText());\n            rm.close(\"div\");\n        }\n    };\n}\n",[7328],{"type":39,"tag":115,"props":7329,"children":7330},{"__ignoreMap":112},[7331,7364,7371,7402,7433,7448,7479,7486,7493,7500,7520,7541,7603,7649,7669,7703,7739,7746,7753],{"type":39,"tag":119,"props":7332,"children":7333},{"class":121,"line":122},[7334,7338,7343,7347,7351,7356,7360],{"type":39,"tag":119,"props":7335,"children":7336},{"style":153},[7337],{"type":45,"value":1155},{"type":39,"tag":119,"props":7339,"children":7340},{"style":159},[7341],{"type":45,"value":7342}," RenderManager ",{"type":39,"tag":119,"props":7344,"children":7345},{"style":153},[7346],{"type":45,"value":1165},{"type":39,"tag":119,"props":7348,"children":7349},{"style":165},[7350],{"type":45,"value":1170},{"type":39,"tag":119,"props":7352,"children":7353},{"style":187},[7354],{"type":45,"value":7355},"sap\u002Fui\u002Fcore\u002FRenderManager",{"type":39,"tag":119,"props":7357,"children":7358},{"style":165},[7359],{"type":45,"value":184},{"type":39,"tag":119,"props":7361,"children":7362},{"style":165},[7363],{"type":45,"value":370},{"type":39,"tag":119,"props":7365,"children":7366},{"class":121,"line":132},[7367],{"type":39,"tag":119,"props":7368,"children":7369},{"emptyLinePlaceholder":2421},[7370],{"type":45,"value":2424},{"type":39,"tag":119,"props":7372,"children":7373},{"class":121,"line":141},[7374,7378,7382,7386,7390,7394,7398],{"type":39,"tag":119,"props":7375,"children":7376},{"style":153},[7377],{"type":45,"value":426},{"type":39,"tag":119,"props":7379,"children":7380},{"style":153},[7381],{"type":45,"value":431},{"type":39,"tag":119,"props":7383,"children":7384},{"style":289},[7385],{"type":45,"value":436},{"type":39,"tag":119,"props":7387,"children":7388},{"style":321},[7389],{"type":45,"value":6037},{"type":39,"tag":119,"props":7391,"children":7392},{"style":289},[7393],{"type":45,"value":446},{"type":39,"tag":119,"props":7395,"children":7396},{"style":321},[7397],{"type":45,"value":6494},{"type":39,"tag":119,"props":7399,"children":7400},{"style":165},[7401],{"type":45,"value":204},{"type":39,"tag":119,"props":7403,"children":7404},{"class":121,"line":26},[7405,7409,7413,7417,7421,7425,7429],{"type":39,"tag":119,"props":7406,"children":7407},{"style":289},[7408],{"type":45,"value":6686},{"type":39,"tag":119,"props":7410,"children":7411},{"style":289},[7412],{"type":45,"value":6691},{"type":39,"tag":119,"props":7414,"children":7415},{"style":353},[7416],{"type":45,"value":6696},{"type":39,"tag":119,"props":7418,"children":7419},{"style":165},[7420],{"type":45,"value":286},{"type":39,"tag":119,"props":7422,"children":7423},{"style":321},[7424],{"type":45,"value":6705},{"type":39,"tag":119,"props":7426,"children":7427},{"style":165},[7428],{"type":45,"value":4470},{"type":39,"tag":119,"props":7430,"children":7431},{"style":165},[7432],{"type":45,"value":204},{"type":39,"tag":119,"props":7434,"children":7435},{"class":121,"line":207},[7436,7440,7444],{"type":39,"tag":119,"props":7437,"children":7438},{"style":353},[7439],{"type":45,"value":6882},{"type":39,"tag":119,"props":7441,"children":7442},{"style":165},[7443],{"type":45,"value":286},{"type":39,"tag":119,"props":7445,"children":7446},{"style":165},[7447],{"type":45,"value":204},{"type":39,"tag":119,"props":7449,"children":7450},{"class":121,"line":216},[7451,7455,7459,7463,7467,7471,7475],{"type":39,"tag":119,"props":7452,"children":7453},{"style":165},[7454],{"type":45,"value":1854},{"type":39,"tag":119,"props":7456,"children":7457},{"style":353},[7458],{"type":45,"value":45},{"type":39,"tag":119,"props":7460,"children":7461},{"style":165},[7462],{"type":45,"value":184},{"type":39,"tag":119,"props":7464,"children":7465},{"style":165},[7466],{"type":45,"value":286},{"type":39,"tag":119,"props":7468,"children":7469},{"style":165},[7470],{"type":45,"value":1170},{"type":39,"tag":119,"props":7472,"children":7473},{"style":187},[7474],{"type":45,"value":5938},{"type":39,"tag":119,"props":7476,"children":7477},{"style":165},[7478],{"type":45,"value":2640},{"type":39,"tag":119,"props":7480,"children":7481},{"class":121,"line":225},[7482],{"type":39,"tag":119,"props":7483,"children":7484},{"style":165},[7485],{"type":45,"value":1983},{"type":39,"tag":119,"props":7487,"children":7488},{"class":121,"line":266},[7489],{"type":39,"tag":119,"props":7490,"children":7491},{"style":165},[7492],{"type":45,"value":3409},{"type":39,"tag":119,"props":7494,"children":7495},{"class":121,"line":275},[7496],{"type":39,"tag":119,"props":7497,"children":7498},{"emptyLinePlaceholder":2421},[7499],{"type":45,"value":2424},{"type":39,"tag":119,"props":7501,"children":7502},{"class":121,"line":22},[7503,7507,7512,7516],{"type":39,"tag":119,"props":7504,"children":7505},{"style":289},[7506],{"type":45,"value":6686},{"type":39,"tag":119,"props":7508,"children":7509},{"style":353},[7510],{"type":45,"value":7511}," renderer",{"type":39,"tag":119,"props":7513,"children":7514},{"style":165},[7515],{"type":45,"value":4470},{"type":39,"tag":119,"props":7517,"children":7518},{"style":165},[7519],{"type":45,"value":204},{"type":39,"tag":119,"props":7521,"children":7522},{"class":121,"line":312},[7523,7528,7532,7537],{"type":39,"tag":119,"props":7524,"children":7525},{"style":353},[7526],{"type":45,"value":7527},"        apiVersion",{"type":39,"tag":119,"props":7529,"children":7530},{"style":165},[7531],{"type":45,"value":286},{"type":39,"tag":119,"props":7533,"children":7534},{"style":1857},[7535],{"type":45,"value":7536}," 2",{"type":39,"tag":119,"props":7538,"children":7539},{"style":165},[7540],{"type":45,"value":1475},{"type":39,"tag":119,"props":7542,"children":7543},{"class":121,"line":373},[7544,7549,7553,7557,7561,7565,7569,7574,7578,7583,7587,7591,7595,7599],{"type":39,"tag":119,"props":7545,"children":7546},{"style":353},[7547],{"type":45,"value":7548},"        render",{"type":39,"tag":119,"props":7550,"children":7551},{"style":165},[7552],{"type":45,"value":286},{"type":39,"tag":119,"props":7554,"children":7555},{"style":289},[7556],{"type":45,"value":292},{"type":39,"tag":119,"props":7558,"children":7559},{"style":165},[7560],{"type":45,"value":1074},{"type":39,"tag":119,"props":7562,"children":7563},{"style":581},[7564],{"type":45,"value":5976},{"type":39,"tag":119,"props":7566,"children":7567},{"style":165},[7568],{"type":45,"value":286},{"type":39,"tag":119,"props":7570,"children":7571},{"style":321},[7572],{"type":45,"value":7573}," RenderManager",{"type":39,"tag":119,"props":7575,"children":7576},{"style":165},[7577],{"type":45,"value":199},{"type":39,"tag":119,"props":7579,"children":7580},{"style":581},[7581],{"type":45,"value":7582}," control",{"type":39,"tag":119,"props":7584,"children":7585},{"style":165},[7586],{"type":45,"value":286},{"type":39,"tag":119,"props":7588,"children":7589},{"style":321},[7590],{"type":45,"value":6037},{"type":39,"tag":119,"props":7592,"children":7593},{"style":165},[7594],{"type":45,"value":4856},{"type":39,"tag":119,"props":7596,"children":7597},{"style":321},[7598],{"type":45,"value":1102},{"type":39,"tag":119,"props":7600,"children":7601},{"style":165},[7602],{"type":45,"value":204},{"type":39,"tag":119,"props":7604,"children":7605},{"class":121,"line":382},[7606,7611,7615,7620,7624,7629,7633,7637,7641,7645],{"type":39,"tag":119,"props":7607,"children":7608},{"style":159},[7609],{"type":45,"value":7610},"            rm",{"type":39,"tag":119,"props":7612,"children":7613},{"style":165},[7614],{"type":45,"value":168},{"type":39,"tag":119,"props":7616,"children":7617},{"style":353},[7618],{"type":45,"value":7619},"openStart(",{"type":39,"tag":119,"props":7621,"children":7622},{"style":165},[7623],{"type":45,"value":184},{"type":39,"tag":119,"props":7625,"children":7626},{"style":187},[7627],{"type":45,"value":7628},"div",{"type":39,"tag":119,"props":7630,"children":7631},{"style":165},[7632],{"type":45,"value":184},{"type":39,"tag":119,"props":7634,"children":7635},{"style":165},[7636],{"type":45,"value":199},{"type":39,"tag":119,"props":7638,"children":7639},{"style":159},[7640],{"type":45,"value":7582},{"type":39,"tag":119,"props":7642,"children":7643},{"style":353},[7644],{"type":45,"value":365},{"type":39,"tag":119,"props":7646,"children":7647},{"style":165},[7648],{"type":45,"value":370},{"type":39,"tag":119,"props":7650,"children":7651},{"class":121,"line":391},[7652,7656,7660,7665],{"type":39,"tag":119,"props":7653,"children":7654},{"style":159},[7655],{"type":45,"value":7610},{"type":39,"tag":119,"props":7657,"children":7658},{"style":165},[7659],{"type":45,"value":168},{"type":39,"tag":119,"props":7661,"children":7662},{"style":353},[7663],{"type":45,"value":7664},"openEnd()",{"type":39,"tag":119,"props":7666,"children":7667},{"style":165},[7668],{"type":45,"value":370},{"type":39,"tag":119,"props":7670,"children":7671},{"class":121,"line":1848},[7672,7676,7680,7685,7690,7694,7699],{"type":39,"tag":119,"props":7673,"children":7674},{"style":159},[7675],{"type":45,"value":7610},{"type":39,"tag":119,"props":7677,"children":7678},{"style":165},[7679],{"type":45,"value":168},{"type":39,"tag":119,"props":7681,"children":7682},{"style":353},[7683],{"type":45,"value":7684},"text(",{"type":39,"tag":119,"props":7686,"children":7687},{"style":159},[7688],{"type":45,"value":7689},"control",{"type":39,"tag":119,"props":7691,"children":7692},{"style":165},[7693],{"type":45,"value":168},{"type":39,"tag":119,"props":7695,"children":7696},{"style":353},[7697],{"type":45,"value":7698},"getText())",{"type":39,"tag":119,"props":7700,"children":7701},{"style":165},[7702],{"type":45,"value":370},{"type":39,"tag":119,"props":7704,"children":7705},{"class":121,"line":1892},[7706,7710,7714,7719,7723,7727,7731,7735],{"type":39,"tag":119,"props":7707,"children":7708},{"style":159},[7709],{"type":45,"value":7610},{"type":39,"tag":119,"props":7711,"children":7712},{"style":165},[7713],{"type":45,"value":168},{"type":39,"tag":119,"props":7715,"children":7716},{"style":353},[7717],{"type":45,"value":7718},"close(",{"type":39,"tag":119,"props":7720,"children":7721},{"style":165},[7722],{"type":45,"value":184},{"type":39,"tag":119,"props":7724,"children":7725},{"style":187},[7726],{"type":45,"value":7628},{"type":39,"tag":119,"props":7728,"children":7729},{"style":165},[7730],{"type":45,"value":184},{"type":39,"tag":119,"props":7732,"children":7733},{"style":353},[7734],{"type":45,"value":365},{"type":39,"tag":119,"props":7736,"children":7737},{"style":165},[7738],{"type":45,"value":370},{"type":39,"tag":119,"props":7740,"children":7741},{"class":121,"line":1934},[7742],{"type":39,"tag":119,"props":7743,"children":7744},{"style":165},[7745],{"type":45,"value":1983},{"type":39,"tag":119,"props":7747,"children":7748},{"class":121,"line":1977},[7749],{"type":39,"tag":119,"props":7750,"children":7751},{"style":165},[7752],{"type":45,"value":3409},{"type":39,"tag":119,"props":7754,"children":7755},{"class":121,"line":1986},[7756],{"type":39,"tag":119,"props":7757,"children":7758},{"style":165},[7759],{"type":45,"value":535},{"type":39,"tag":52,"props":7761,"children":7762},{},[7763],{"type":45,"value":7764},"The renderer can also be in a separate file (common in libraries) and should in this case stay separate when converting to TypeScript.",{"type":39,"tag":52,"props":7766,"children":7767},{},[7768],{"type":45,"value":7769},"The following JavaScript code:",{"type":39,"tag":107,"props":7771,"children":7775},{"className":7772,"code":7773,"language":7774,"meta":112,"style":112},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","sap.ui.define([\n    \"sap\u002Fui\u002Fcore\u002FControl\",\n    \".\u002FMyControlRenderer\"\n], function (Control, MyControlRenderer) {\n    \"use strict\";\n\n    return Control.extend(\"com.myorg.myapp.control.MyControl\", {\n        ...\n        renderer: MyControlRenderer,\n        ...\n","javascript",[7776],{"type":39,"tag":115,"props":7777,"children":7778},{"__ignoreMap":112},[7779,7807,7826,7842,7883,7903,7910,7954,7962,7984],{"type":39,"tag":119,"props":7780,"children":7781},{"class":121,"line":122},[7782,7786,7790,7794,7798,7802],{"type":39,"tag":119,"props":7783,"children":7784},{"style":159},[7785],{"type":45,"value":3477},{"type":39,"tag":119,"props":7787,"children":7788},{"style":165},[7789],{"type":45,"value":168},{"type":39,"tag":119,"props":7791,"children":7792},{"style":159},[7793],{"type":45,"value":3486},{"type":39,"tag":119,"props":7795,"children":7796},{"style":165},[7797],{"type":45,"value":168},{"type":39,"tag":119,"props":7799,"children":7800},{"style":171},[7801],{"type":45,"value":3495},{"type":39,"tag":119,"props":7803,"children":7804},{"style":159},[7805],{"type":45,"value":7806},"([\n",{"type":39,"tag":119,"props":7808,"children":7809},{"class":121,"line":132},[7810,7814,7818,7822],{"type":39,"tag":119,"props":7811,"children":7812},{"style":165},[7813],{"type":45,"value":1420},{"type":39,"tag":119,"props":7815,"children":7816},{"style":187},[7817],{"type":45,"value":968},{"type":39,"tag":119,"props":7819,"children":7820},{"style":165},[7821],{"type":45,"value":184},{"type":39,"tag":119,"props":7823,"children":7824},{"style":165},[7825],{"type":45,"value":1475},{"type":39,"tag":119,"props":7827,"children":7828},{"class":121,"line":141},[7829,7833,7838],{"type":39,"tag":119,"props":7830,"children":7831},{"style":165},[7832],{"type":45,"value":1420},{"type":39,"tag":119,"props":7834,"children":7835},{"style":187},[7836],{"type":45,"value":7837},".\u002FMyControlRenderer",{"type":39,"tag":119,"props":7839,"children":7840},{"style":165},[7841],{"type":45,"value":2640},{"type":39,"tag":119,"props":7843,"children":7844},{"class":121,"line":26},[7845,7849,7853,7857,7861,7866,7870,7875,7879],{"type":39,"tag":119,"props":7846,"children":7847},{"style":159},[7848],{"type":45,"value":3518},{"type":39,"tag":119,"props":7850,"children":7851},{"style":165},[7852],{"type":45,"value":199},{"type":39,"tag":119,"props":7854,"children":7855},{"style":289},[7856],{"type":45,"value":292},{"type":39,"tag":119,"props":7858,"children":7859},{"style":165},[7860],{"type":45,"value":1074},{"type":39,"tag":119,"props":7862,"children":7863},{"style":581},[7864],{"type":45,"value":7865},"Control",{"type":39,"tag":119,"props":7867,"children":7868},{"style":165},[7869],{"type":45,"value":199},{"type":39,"tag":119,"props":7871,"children":7872},{"style":581},[7873],{"type":45,"value":7874}," MyControlRenderer",{"type":39,"tag":119,"props":7876,"children":7877},{"style":165},[7878],{"type":45,"value":365},{"type":39,"tag":119,"props":7880,"children":7881},{"style":165},[7882],{"type":45,"value":204},{"type":39,"tag":119,"props":7884,"children":7885},{"class":121,"line":207},[7886,7890,7895,7899],{"type":39,"tag":119,"props":7887,"children":7888},{"style":165},[7889],{"type":45,"value":1420},{"type":39,"tag":119,"props":7891,"children":7892},{"style":187},[7893],{"type":45,"value":7894},"use strict",{"type":39,"tag":119,"props":7896,"children":7897},{"style":165},[7898],{"type":45,"value":184},{"type":39,"tag":119,"props":7900,"children":7901},{"style":165},[7902],{"type":45,"value":370},{"type":39,"tag":119,"props":7904,"children":7905},{"class":121,"line":216},[7906],{"type":39,"tag":119,"props":7907,"children":7908},{"emptyLinePlaceholder":2421},[7909],{"type":45,"value":2424},{"type":39,"tag":119,"props":7911,"children":7912},{"class":121,"line":225},[7913,7917,7921,7925,7929,7933,7937,7942,7946,7950],{"type":39,"tag":119,"props":7914,"children":7915},{"style":153},[7916],{"type":45,"value":4382},{"type":39,"tag":119,"props":7918,"children":7919},{"style":159},[7920],{"type":45,"value":6494},{"type":39,"tag":119,"props":7922,"children":7923},{"style":165},[7924],{"type":45,"value":168},{"type":39,"tag":119,"props":7926,"children":7927},{"style":171},[7928],{"type":45,"value":174},{"type":39,"tag":119,"props":7930,"children":7931},{"style":353},[7932],{"type":45,"value":179},{"type":39,"tag":119,"props":7934,"children":7935},{"style":165},[7936],{"type":45,"value":184},{"type":39,"tag":119,"props":7938,"children":7939},{"style":187},[7940],{"type":45,"value":7941},"com.myorg.myapp.control.MyControl",{"type":39,"tag":119,"props":7943,"children":7944},{"style":165},[7945],{"type":45,"value":184},{"type":39,"tag":119,"props":7947,"children":7948},{"style":165},[7949],{"type":45,"value":199},{"type":39,"tag":119,"props":7951,"children":7952},{"style":165},[7953],{"type":45,"value":204},{"type":39,"tag":119,"props":7955,"children":7956},{"class":121,"line":266},[7957],{"type":39,"tag":119,"props":7958,"children":7959},{"style":165},[7960],{"type":45,"value":7961},"        ...\n",{"type":39,"tag":119,"props":7963,"children":7964},{"class":121,"line":275},[7965,7970,7975,7980],{"type":39,"tag":119,"props":7966,"children":7967},{"style":159},[7968],{"type":45,"value":7969},"        renderer",{"type":39,"tag":119,"props":7971,"children":7972},{"style":353},[7973],{"type":45,"value":7974},": ",{"type":39,"tag":119,"props":7976,"children":7977},{"style":159},[7978],{"type":45,"value":7979},"MyControlRenderer",{"type":39,"tag":119,"props":7981,"children":7982},{"style":165},[7983],{"type":45,"value":1475},{"type":39,"tag":119,"props":7985,"children":7986},{"class":121,"line":22},[7987],{"type":39,"tag":119,"props":7988,"children":7989},{"style":165},[7990],{"type":45,"value":7961},{"type":39,"tag":52,"props":7992,"children":7993},{},[7994],{"type":45,"value":7995},"is then converted to this TypeScript code:",{"type":39,"tag":107,"props":7997,"children":7999},{"className":5859,"code":7998,"language":14,"meta":112,"style":112},"import Control from \"sap\u002Fui\u002Fcore\u002FControl\";\nimport type { MetadataOptions } from \"sap\u002Fui\u002Fcore\u002FElement\";\nimport MyControlRenderer from \".\u002FMyControlRenderer\";\n\n\u002F**\n * @namespace com.myorg.myapp.control\n *\u002F\nexport default class MyControl extends Control {\n    ...\n    static renderer = MyControlRenderer;\n    ...\n",[8000],{"type":39,"tag":115,"props":8001,"children":8002},{"__ignoreMap":112},[8003,8035,8078,8110,8117,8124,8144,8151,8182,8189,8212],{"type":39,"tag":119,"props":8004,"children":8005},{"class":121,"line":122},[8006,8010,8015,8019,8023,8027,8031],{"type":39,"tag":119,"props":8007,"children":8008},{"style":153},[8009],{"type":45,"value":1155},{"type":39,"tag":119,"props":8011,"children":8012},{"style":159},[8013],{"type":45,"value":8014}," Control ",{"type":39,"tag":119,"props":8016,"children":8017},{"style":153},[8018],{"type":45,"value":1165},{"type":39,"tag":119,"props":8020,"children":8021},{"style":165},[8022],{"type":45,"value":1170},{"type":39,"tag":119,"props":8024,"children":8025},{"style":187},[8026],{"type":45,"value":968},{"type":39,"tag":119,"props":8028,"children":8029},{"style":165},[8030],{"type":45,"value":184},{"type":39,"tag":119,"props":8032,"children":8033},{"style":165},[8034],{"type":45,"value":370},{"type":39,"tag":119,"props":8036,"children":8037},{"class":121,"line":132},[8038,8042,8046,8050,8054,8058,8062,8066,8070,8074],{"type":39,"tag":119,"props":8039,"children":8040},{"style":153},[8041],{"type":45,"value":1155},{"type":39,"tag":119,"props":8043,"children":8044},{"style":153},[8045],{"type":45,"value":813},{"type":39,"tag":119,"props":8047,"children":8048},{"style":165},[8049],{"type":45,"value":247},{"type":39,"tag":119,"props":8051,"children":8052},{"style":159},[8053],{"type":45,"value":6705},{"type":39,"tag":119,"props":8055,"children":8056},{"style":165},[8057],{"type":45,"value":6784},{"type":39,"tag":119,"props":8059,"children":8060},{"style":153},[8061],{"type":45,"value":4730},{"type":39,"tag":119,"props":8063,"children":8064},{"style":165},[8065],{"type":45,"value":1170},{"type":39,"tag":119,"props":8067,"children":8068},{"style":187},[8069],{"type":45,"value":6797},{"type":39,"tag":119,"props":8071,"children":8072},{"style":165},[8073],{"type":45,"value":184},{"type":39,"tag":119,"props":8075,"children":8076},{"style":165},[8077],{"type":45,"value":370},{"type":39,"tag":119,"props":8079,"children":8080},{"class":121,"line":141},[8081,8085,8090,8094,8098,8102,8106],{"type":39,"tag":119,"props":8082,"children":8083},{"style":153},[8084],{"type":45,"value":1155},{"type":39,"tag":119,"props":8086,"children":8087},{"style":159},[8088],{"type":45,"value":8089}," MyControlRenderer ",{"type":39,"tag":119,"props":8091,"children":8092},{"style":153},[8093],{"type":45,"value":1165},{"type":39,"tag":119,"props":8095,"children":8096},{"style":165},[8097],{"type":45,"value":1170},{"type":39,"tag":119,"props":8099,"children":8100},{"style":187},[8101],{"type":45,"value":7837},{"type":39,"tag":119,"props":8103,"children":8104},{"style":165},[8105],{"type":45,"value":184},{"type":39,"tag":119,"props":8107,"children":8108},{"style":165},[8109],{"type":45,"value":370},{"type":39,"tag":119,"props":8111,"children":8112},{"class":121,"line":26},[8113],{"type":39,"tag":119,"props":8114,"children":8115},{"emptyLinePlaceholder":2421},[8116],{"type":45,"value":2424},{"type":39,"tag":119,"props":8118,"children":8119},{"class":121,"line":207},[8120],{"type":39,"tag":119,"props":8121,"children":8122},{"style":126},[8123],{"type":45,"value":129},{"type":39,"tag":119,"props":8125,"children":8126},{"class":121,"line":216},[8127,8131,8135,8139],{"type":39,"tag":119,"props":8128,"children":8129},{"style":126},[8130],{"type":45,"value":569},{"type":39,"tag":119,"props":8132,"children":8133},{"style":153},[8134],{"type":45,"value":236},{"type":39,"tag":119,"props":8136,"children":8137},{"style":239},[8138],{"type":45,"value":578},{"type":39,"tag":119,"props":8140,"children":8141},{"style":581},[8142],{"type":45,"value":8143}," com.myorg.myapp.control\n",{"type":39,"tag":119,"props":8145,"children":8146},{"class":121,"line":225},[8147],{"type":39,"tag":119,"props":8148,"children":8149},{"style":126},[8150],{"type":45,"value":147},{"type":39,"tag":119,"props":8152,"children":8153},{"class":121,"line":266},[8154,8158,8162,8166,8170,8174,8178],{"type":39,"tag":119,"props":8155,"children":8156},{"style":153},[8157],{"type":45,"value":426},{"type":39,"tag":119,"props":8159,"children":8160},{"style":153},[8161],{"type":45,"value":431},{"type":39,"tag":119,"props":8163,"children":8164},{"style":289},[8165],{"type":45,"value":436},{"type":39,"tag":119,"props":8167,"children":8168},{"style":321},[8169],{"type":45,"value":6037},{"type":39,"tag":119,"props":8171,"children":8172},{"style":289},[8173],{"type":45,"value":446},{"type":39,"tag":119,"props":8175,"children":8176},{"style":321},[8177],{"type":45,"value":6494},{"type":39,"tag":119,"props":8179,"children":8180},{"style":165},[8181],{"type":45,"value":204},{"type":39,"tag":119,"props":8183,"children":8184},{"class":121,"line":275},[8185],{"type":39,"tag":119,"props":8186,"children":8187},{"style":165},[8188],{"type":45,"value":388},{"type":39,"tag":119,"props":8190,"children":8191},{"class":121,"line":22},[8192,8196,8200,8204,8208],{"type":39,"tag":119,"props":8193,"children":8194},{"style":289},[8195],{"type":45,"value":6686},{"type":39,"tag":119,"props":8197,"children":8198},{"style":353},[8199],{"type":45,"value":7511},{"type":39,"tag":119,"props":8201,"children":8202},{"style":165},[8203],{"type":45,"value":4470},{"type":39,"tag":119,"props":8205,"children":8206},{"style":159},[8207],{"type":45,"value":7874},{"type":39,"tag":119,"props":8209,"children":8210},{"style":165},[8211],{"type":45,"value":370},{"type":39,"tag":119,"props":8213,"children":8214},{"class":121,"line":312},[8215],{"type":39,"tag":119,"props":8216,"children":8217},{"style":165},[8218],{"type":45,"value":388},{"type":39,"tag":90,"props":8220,"children":8222},{"id":8221},"complete-control-example",[8223],{"type":45,"value":8224},"Complete Control Example",{"type":39,"tag":988,"props":8226,"children":8228},{"id":8227},"javascript-before",[8229],{"type":45,"value":8230},"JavaScript (Before):",{"type":39,"tag":107,"props":8232,"children":8234},{"className":7772,"code":8233,"language":7774,"meta":112,"style":112},"sap.ui.define([\n    \"sap\u002Fui\u002Fcore\u002FControl\",\n    \"sap\u002Fui\u002Fcore\u002FRenderManager\"\n], function (Control, RenderManager) {\n    \"use strict\";\n    \n    var MyControl = Control.extend(\"ui5.typescript.helloworld.control.MyControl\", {\n        metadata: {\n            properties: {\n                \"text\": \"string\"\n            },\n            events: {\n                \"press\": {}\n            }\n        },\n        \n        renderer: function (rm, control) {\n            rm.openStart(\"div\", control);\n            rm.openEnd();\n            rm.text(control.getText());\n            rm.close(\"div\");\n        },\n        \n        onclick: function() {\n            this.firePress();\n        }\n    });\n\n    return MyControl;\n});\n",[8235],{"type":39,"tag":115,"props":8236,"children":8237},{"__ignoreMap":112},[8238,8265,8284,8299,8338,8357,8364,8417,8433,8449,8481,8488,8504,8528,8535,8542,8549,8588,8636,8660,8699,8739,8746,8753,8777,8798,8806,8822,8830,8846],{"type":39,"tag":119,"props":8239,"children":8240},{"class":121,"line":122},[8241,8245,8249,8253,8257,8261],{"type":39,"tag":119,"props":8242,"children":8243},{"style":159},[8244],{"type":45,"value":3477},{"type":39,"tag":119,"props":8246,"children":8247},{"style":165},[8248],{"type":45,"value":168},{"type":39,"tag":119,"props":8250,"children":8251},{"style":159},[8252],{"type":45,"value":3486},{"type":39,"tag":119,"props":8254,"children":8255},{"style":165},[8256],{"type":45,"value":168},{"type":39,"tag":119,"props":8258,"children":8259},{"style":171},[8260],{"type":45,"value":3495},{"type":39,"tag":119,"props":8262,"children":8263},{"style":159},[8264],{"type":45,"value":7806},{"type":39,"tag":119,"props":8266,"children":8267},{"class":121,"line":132},[8268,8272,8276,8280],{"type":39,"tag":119,"props":8269,"children":8270},{"style":165},[8271],{"type":45,"value":1420},{"type":39,"tag":119,"props":8273,"children":8274},{"style":187},[8275],{"type":45,"value":968},{"type":39,"tag":119,"props":8277,"children":8278},{"style":165},[8279],{"type":45,"value":184},{"type":39,"tag":119,"props":8281,"children":8282},{"style":165},[8283],{"type":45,"value":1475},{"type":39,"tag":119,"props":8285,"children":8286},{"class":121,"line":141},[8287,8291,8295],{"type":39,"tag":119,"props":8288,"children":8289},{"style":165},[8290],{"type":45,"value":1420},{"type":39,"tag":119,"props":8292,"children":8293},{"style":187},[8294],{"type":45,"value":7355},{"type":39,"tag":119,"props":8296,"children":8297},{"style":165},[8298],{"type":45,"value":2640},{"type":39,"tag":119,"props":8300,"children":8301},{"class":121,"line":26},[8302,8306,8310,8314,8318,8322,8326,8330,8334],{"type":39,"tag":119,"props":8303,"children":8304},{"style":159},[8305],{"type":45,"value":3518},{"type":39,"tag":119,"props":8307,"children":8308},{"style":165},[8309],{"type":45,"value":199},{"type":39,"tag":119,"props":8311,"children":8312},{"style":289},[8313],{"type":45,"value":292},{"type":39,"tag":119,"props":8315,"children":8316},{"style":165},[8317],{"type":45,"value":1074},{"type":39,"tag":119,"props":8319,"children":8320},{"style":581},[8321],{"type":45,"value":7865},{"type":39,"tag":119,"props":8323,"children":8324},{"style":165},[8325],{"type":45,"value":199},{"type":39,"tag":119,"props":8327,"children":8328},{"style":581},[8329],{"type":45,"value":7573},{"type":39,"tag":119,"props":8331,"children":8332},{"style":165},[8333],{"type":45,"value":365},{"type":39,"tag":119,"props":8335,"children":8336},{"style":165},[8337],{"type":45,"value":204},{"type":39,"tag":119,"props":8339,"children":8340},{"class":121,"line":207},[8341,8345,8349,8353],{"type":39,"tag":119,"props":8342,"children":8343},{"style":165},[8344],{"type":45,"value":1420},{"type":39,"tag":119,"props":8346,"children":8347},{"style":187},[8348],{"type":45,"value":7894},{"type":39,"tag":119,"props":8350,"children":8351},{"style":165},[8352],{"type":45,"value":184},{"type":39,"tag":119,"props":8354,"children":8355},{"style":165},[8356],{"type":45,"value":370},{"type":39,"tag":119,"props":8358,"children":8359},{"class":121,"line":216},[8360],{"type":39,"tag":119,"props":8361,"children":8362},{"style":353},[8363],{"type":45,"value":4923},{"type":39,"tag":119,"props":8365,"children":8366},{"class":121,"line":225},[8367,8372,8376,8380,8384,8388,8392,8396,8400,8405,8409,8413],{"type":39,"tag":119,"props":8368,"children":8369},{"style":289},[8370],{"type":45,"value":8371},"    var",{"type":39,"tag":119,"props":8373,"children":8374},{"style":159},[8375],{"type":45,"value":6037},{"type":39,"tag":119,"props":8377,"children":8378},{"style":165},[8379],{"type":45,"value":4470},{"type":39,"tag":119,"props":8381,"children":8382},{"style":159},[8383],{"type":45,"value":6494},{"type":39,"tag":119,"props":8385,"children":8386},{"style":165},[8387],{"type":45,"value":168},{"type":39,"tag":119,"props":8389,"children":8390},{"style":171},[8391],{"type":45,"value":174},{"type":39,"tag":119,"props":8393,"children":8394},{"style":353},[8395],{"type":45,"value":179},{"type":39,"tag":119,"props":8397,"children":8398},{"style":165},[8399],{"type":45,"value":184},{"type":39,"tag":119,"props":8401,"children":8402},{"style":187},[8403],{"type":45,"value":8404},"ui5.typescript.helloworld.control.MyControl",{"type":39,"tag":119,"props":8406,"children":8407},{"style":165},[8408],{"type":45,"value":184},{"type":39,"tag":119,"props":8410,"children":8411},{"style":165},[8412],{"type":45,"value":199},{"type":39,"tag":119,"props":8414,"children":8415},{"style":165},[8416],{"type":45,"value":204},{"type":39,"tag":119,"props":8418,"children":8419},{"class":121,"line":266},[8420,8425,8429],{"type":39,"tag":119,"props":8421,"children":8422},{"style":353},[8423],{"type":45,"value":8424},"        metadata",{"type":39,"tag":119,"props":8426,"children":8427},{"style":165},[8428],{"type":45,"value":286},{"type":39,"tag":119,"props":8430,"children":8431},{"style":165},[8432],{"type":45,"value":204},{"type":39,"tag":119,"props":8434,"children":8435},{"class":121,"line":275},[8436,8441,8445],{"type":39,"tag":119,"props":8437,"children":8438},{"style":353},[8439],{"type":45,"value":8440},"            properties",{"type":39,"tag":119,"props":8442,"children":8443},{"style":165},[8444],{"type":45,"value":286},{"type":39,"tag":119,"props":8446,"children":8447},{"style":165},[8448],{"type":45,"value":204},{"type":39,"tag":119,"props":8450,"children":8451},{"class":121,"line":22},[8452,8457,8461,8465,8469,8473,8477],{"type":39,"tag":119,"props":8453,"children":8454},{"style":165},[8455],{"type":45,"value":8456},"                \"",{"type":39,"tag":119,"props":8458,"children":8459},{"style":353},[8460],{"type":45,"value":45},{"type":39,"tag":119,"props":8462,"children":8463},{"style":165},[8464],{"type":45,"value":184},{"type":39,"tag":119,"props":8466,"children":8467},{"style":165},[8468],{"type":45,"value":286},{"type":39,"tag":119,"props":8470,"children":8471},{"style":165},[8472],{"type":45,"value":1170},{"type":39,"tag":119,"props":8474,"children":8475},{"style":187},[8476],{"type":45,"value":5938},{"type":39,"tag":119,"props":8478,"children":8479},{"style":165},[8480],{"type":45,"value":2640},{"type":39,"tag":119,"props":8482,"children":8483},{"class":121,"line":312},[8484],{"type":39,"tag":119,"props":8485,"children":8486},{"style":165},[8487],{"type":45,"value":2648},{"type":39,"tag":119,"props":8489,"children":8490},{"class":121,"line":373},[8491,8496,8500],{"type":39,"tag":119,"props":8492,"children":8493},{"style":353},[8494],{"type":45,"value":8495},"            events",{"type":39,"tag":119,"props":8497,"children":8498},{"style":165},[8499],{"type":45,"value":286},{"type":39,"tag":119,"props":8501,"children":8502},{"style":165},[8503],{"type":45,"value":204},{"type":39,"tag":119,"props":8505,"children":8506},{"class":121,"line":382},[8507,8511,8515,8519,8523],{"type":39,"tag":119,"props":8508,"children":8509},{"style":165},[8510],{"type":45,"value":8456},{"type":39,"tag":119,"props":8512,"children":8513},{"style":353},[8514],{"type":45,"value":4258},{"type":39,"tag":119,"props":8516,"children":8517},{"style":165},[8518],{"type":45,"value":184},{"type":39,"tag":119,"props":8520,"children":8521},{"style":165},[8522],{"type":45,"value":286},{"type":39,"tag":119,"props":8524,"children":8525},{"style":165},[8526],{"type":45,"value":8527}," {}\n",{"type":39,"tag":119,"props":8529,"children":8530},{"class":121,"line":391},[8531],{"type":39,"tag":119,"props":8532,"children":8533},{"style":165},[8534],{"type":45,"value":2749},{"type":39,"tag":119,"props":8536,"children":8537},{"class":121,"line":1848},[8538],{"type":39,"tag":119,"props":8539,"children":8540},{"style":165},[8541],{"type":45,"value":4500},{"type":39,"tag":119,"props":8543,"children":8544},{"class":121,"line":1892},[8545],{"type":39,"tag":119,"props":8546,"children":8547},{"style":353},[8548],{"type":45,"value":4508},{"type":39,"tag":119,"props":8550,"children":8551},{"class":121,"line":1934},[8552,8556,8560,8564,8568,8572,8576,8580,8584],{"type":39,"tag":119,"props":8553,"children":8554},{"style":171},[8555],{"type":45,"value":7969},{"type":39,"tag":119,"props":8557,"children":8558},{"style":165},[8559],{"type":45,"value":286},{"type":39,"tag":119,"props":8561,"children":8562},{"style":289},[8563],{"type":45,"value":292},{"type":39,"tag":119,"props":8565,"children":8566},{"style":165},[8567],{"type":45,"value":1074},{"type":39,"tag":119,"props":8569,"children":8570},{"style":581},[8571],{"type":45,"value":5976},{"type":39,"tag":119,"props":8573,"children":8574},{"style":165},[8575],{"type":45,"value":199},{"type":39,"tag":119,"props":8577,"children":8578},{"style":581},[8579],{"type":45,"value":7582},{"type":39,"tag":119,"props":8581,"children":8582},{"style":165},[8583],{"type":45,"value":365},{"type":39,"tag":119,"props":8585,"children":8586},{"style":165},[8587],{"type":45,"value":204},{"type":39,"tag":119,"props":8589,"children":8590},{"class":121,"line":1977},[8591,8595,8599,8604,8608,8612,8616,8620,8624,8628,8632],{"type":39,"tag":119,"props":8592,"children":8593},{"style":159},[8594],{"type":45,"value":7610},{"type":39,"tag":119,"props":8596,"children":8597},{"style":165},[8598],{"type":45,"value":168},{"type":39,"tag":119,"props":8600,"children":8601},{"style":171},[8602],{"type":45,"value":8603},"openStart",{"type":39,"tag":119,"props":8605,"children":8606},{"style":353},[8607],{"type":45,"value":179},{"type":39,"tag":119,"props":8609,"children":8610},{"style":165},[8611],{"type":45,"value":184},{"type":39,"tag":119,"props":8613,"children":8614},{"style":187},[8615],{"type":45,"value":7628},{"type":39,"tag":119,"props":8617,"children":8618},{"style":165},[8619],{"type":45,"value":184},{"type":39,"tag":119,"props":8621,"children":8622},{"style":165},[8623],{"type":45,"value":199},{"type":39,"tag":119,"props":8625,"children":8626},{"style":159},[8627],{"type":45,"value":7582},{"type":39,"tag":119,"props":8629,"children":8630},{"style":353},[8631],{"type":45,"value":365},{"type":39,"tag":119,"props":8633,"children":8634},{"style":165},[8635],{"type":45,"value":370},{"type":39,"tag":119,"props":8637,"children":8638},{"class":121,"line":1986},[8639,8643,8647,8652,8656],{"type":39,"tag":119,"props":8640,"children":8641},{"style":159},[8642],{"type":45,"value":7610},{"type":39,"tag":119,"props":8644,"children":8645},{"style":165},[8646],{"type":45,"value":168},{"type":39,"tag":119,"props":8648,"children":8649},{"style":171},[8650],{"type":45,"value":8651},"openEnd",{"type":39,"tag":119,"props":8653,"children":8654},{"style":353},[8655],{"type":45,"value":883},{"type":39,"tag":119,"props":8657,"children":8658},{"style":165},[8659],{"type":45,"value":370},{"type":39,"tag":119,"props":8661,"children":8662},{"class":121,"line":1994},[8663,8667,8671,8675,8679,8683,8687,8691,8695],{"type":39,"tag":119,"props":8664,"children":8665},{"style":159},[8666],{"type":45,"value":7610},{"type":39,"tag":119,"props":8668,"children":8669},{"style":165},[8670],{"type":45,"value":168},{"type":39,"tag":119,"props":8672,"children":8673},{"style":171},[8674],{"type":45,"value":45},{"type":39,"tag":119,"props":8676,"children":8677},{"style":353},[8678],{"type":45,"value":179},{"type":39,"tag":119,"props":8680,"children":8681},{"style":159},[8682],{"type":45,"value":7689},{"type":39,"tag":119,"props":8684,"children":8685},{"style":165},[8686],{"type":45,"value":168},{"type":39,"tag":119,"props":8688,"children":8689},{"style":171},[8690],{"type":45,"value":5998},{"type":39,"tag":119,"props":8692,"children":8693},{"style":353},[8694],{"type":45,"value":3130},{"type":39,"tag":119,"props":8696,"children":8697},{"style":165},[8698],{"type":45,"value":370},{"type":39,"tag":119,"props":8700,"children":8701},{"class":121,"line":2036},[8702,8706,8710,8715,8719,8723,8727,8731,8735],{"type":39,"tag":119,"props":8703,"children":8704},{"style":159},[8705],{"type":45,"value":7610},{"type":39,"tag":119,"props":8707,"children":8708},{"style":165},[8709],{"type":45,"value":168},{"type":39,"tag":119,"props":8711,"children":8712},{"style":171},[8713],{"type":45,"value":8714},"close",{"type":39,"tag":119,"props":8716,"children":8717},{"style":353},[8718],{"type":45,"value":179},{"type":39,"tag":119,"props":8720,"children":8721},{"style":165},[8722],{"type":45,"value":184},{"type":39,"tag":119,"props":8724,"children":8725},{"style":187},[8726],{"type":45,"value":7628},{"type":39,"tag":119,"props":8728,"children":8729},{"style":165},[8730],{"type":45,"value":184},{"type":39,"tag":119,"props":8732,"children":8733},{"style":353},[8734],{"type":45,"value":365},{"type":39,"tag":119,"props":8736,"children":8737},{"style":165},[8738],{"type":45,"value":370},{"type":39,"tag":119,"props":8740,"children":8741},{"class":121,"line":2078},[8742],{"type":39,"tag":119,"props":8743,"children":8744},{"style":165},[8745],{"type":45,"value":4500},{"type":39,"tag":119,"props":8747,"children":8748},{"class":121,"line":2773},[8749],{"type":39,"tag":119,"props":8750,"children":8751},{"style":353},[8752],{"type":45,"value":4508},{"type":39,"tag":119,"props":8754,"children":8755},{"class":121,"line":2806},[8756,8761,8765,8769,8773],{"type":39,"tag":119,"props":8757,"children":8758},{"style":171},[8759],{"type":45,"value":8760},"        onclick",{"type":39,"tag":119,"props":8762,"children":8763},{"style":165},[8764],{"type":45,"value":286},{"type":39,"tag":119,"props":8766,"children":8767},{"style":289},[8768],{"type":45,"value":292},{"type":39,"tag":119,"props":8770,"children":8771},{"style":165},[8772],{"type":45,"value":883},{"type":39,"tag":119,"props":8774,"children":8775},{"style":165},[8776],{"type":45,"value":204},{"type":39,"tag":119,"props":8778,"children":8779},{"class":121,"line":2814},[8780,8785,8790,8794],{"type":39,"tag":119,"props":8781,"children":8782},{"style":165},[8783],{"type":45,"value":8784},"            this.",{"type":39,"tag":119,"props":8786,"children":8787},{"style":171},[8788],{"type":45,"value":8789},"firePress",{"type":39,"tag":119,"props":8791,"children":8792},{"style":353},[8793],{"type":45,"value":883},{"type":39,"tag":119,"props":8795,"children":8796},{"style":165},[8797],{"type":45,"value":370},{"type":39,"tag":119,"props":8799,"children":8801},{"class":121,"line":8800},26,[8802],{"type":39,"tag":119,"props":8803,"children":8804},{"style":165},[8805],{"type":45,"value":1983},{"type":39,"tag":119,"props":8807,"children":8809},{"class":121,"line":8808},27,[8810,8814,8818],{"type":39,"tag":119,"props":8811,"children":8812},{"style":165},[8813],{"type":45,"value":4609},{"type":39,"tag":119,"props":8815,"children":8816},{"style":353},[8817],{"type":45,"value":365},{"type":39,"tag":119,"props":8819,"children":8820},{"style":165},[8821],{"type":45,"value":370},{"type":39,"tag":119,"props":8823,"children":8825},{"class":121,"line":8824},28,[8826],{"type":39,"tag":119,"props":8827,"children":8828},{"emptyLinePlaceholder":2421},[8829],{"type":45,"value":2424},{"type":39,"tag":119,"props":8831,"children":8833},{"class":121,"line":8832},29,[8834,8838,8842],{"type":39,"tag":119,"props":8835,"children":8836},{"style":153},[8837],{"type":45,"value":4382},{"type":39,"tag":119,"props":8839,"children":8840},{"style":159},[8841],{"type":45,"value":6037},{"type":39,"tag":119,"props":8843,"children":8844},{"style":165},[8845],{"type":45,"value":370},{"type":39,"tag":119,"props":8847,"children":8849},{"class":121,"line":8848},30,[8850,8854,8858],{"type":39,"tag":119,"props":8851,"children":8852},{"style":165},[8853],{"type":45,"value":258},{"type":39,"tag":119,"props":8855,"children":8856},{"style":159},[8857],{"type":45,"value":365},{"type":39,"tag":119,"props":8859,"children":8860},{"style":165},[8861],{"type":45,"value":370},{"type":39,"tag":988,"props":8863,"children":8865},{"id":8864},"typescript-after",[8866],{"type":45,"value":8867},"TypeScript (After):",{"type":39,"tag":107,"props":8869,"children":8871},{"className":5859,"code":8870,"language":14,"meta":112,"style":112},"import Control from \"sap\u002Fui\u002Fcore\u002FControl\";\nimport type { MetadataOptions } from \"sap\u002Fui\u002Fcore\u002FElement\";\nimport RenderManager from \"sap\u002Fui\u002Fcore\u002FRenderManager\";\n\n\u002F**\n * @namespace ui5.typescript.helloworld.control\n *\u002F\nexport default class MyControl extends Control {\n    \u002F\u002F The following three lines were generated and should remain as-is to make TypeScript aware of the constructor signatures \n    constructor(id?: string | $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings);\n    constructor(id?: string, settings?: $MyControlSettings) { super(id, settings); }\n\n    static readonly metadata: MetadataOptions = {\n        properties: {\n            \"text\": \"string\"\n        },\n        events: {\n            \"press\": {}\n        }\n    };\n\n    static renderer = {\n        apiVersion: 2,\n        render: function (rm: RenderManager, control: MyControl): void {\n            rm.openStart(\"div\", control);\n            rm.openEnd();\n            rm.text(control.getText());\n            rm.close(\"div\");\n        }\n    };\n\n    onclick(): void {\n        this.firePress();\n    }\n}\n",[8872],{"type":39,"tag":115,"props":8873,"children":8874},{"__ignoreMap":112},[8875,8906,8949,8980,8987,8994,9013,9020,9051,9058,9093,9136,9215,9222,9253,9268,9299,9306,9322,9345,9352,9359,9366,9385,9404,9463,9506,9525,9556,9591,9598,9606,9614,9635,9655,9663],{"type":39,"tag":119,"props":8876,"children":8877},{"class":121,"line":122},[8878,8882,8886,8890,8894,8898,8902],{"type":39,"tag":119,"props":8879,"children":8880},{"style":153},[8881],{"type":45,"value":1155},{"type":39,"tag":119,"props":8883,"children":8884},{"style":159},[8885],{"type":45,"value":8014},{"type":39,"tag":119,"props":8887,"children":8888},{"style":153},[8889],{"type":45,"value":1165},{"type":39,"tag":119,"props":8891,"children":8892},{"style":165},[8893],{"type":45,"value":1170},{"type":39,"tag":119,"props":8895,"children":8896},{"style":187},[8897],{"type":45,"value":968},{"type":39,"tag":119,"props":8899,"children":8900},{"style":165},[8901],{"type":45,"value":184},{"type":39,"tag":119,"props":8903,"children":8904},{"style":165},[8905],{"type":45,"value":370},{"type":39,"tag":119,"props":8907,"children":8908},{"class":121,"line":132},[8909,8913,8917,8921,8925,8929,8933,8937,8941,8945],{"type":39,"tag":119,"props":8910,"children":8911},{"style":153},[8912],{"type":45,"value":1155},{"type":39,"tag":119,"props":8914,"children":8915},{"style":153},[8916],{"type":45,"value":813},{"type":39,"tag":119,"props":8918,"children":8919},{"style":165},[8920],{"type":45,"value":247},{"type":39,"tag":119,"props":8922,"children":8923},{"style":159},[8924],{"type":45,"value":6705},{"type":39,"tag":119,"props":8926,"children":8927},{"style":165},[8928],{"type":45,"value":6784},{"type":39,"tag":119,"props":8930,"children":8931},{"style":153},[8932],{"type":45,"value":4730},{"type":39,"tag":119,"props":8934,"children":8935},{"style":165},[8936],{"type":45,"value":1170},{"type":39,"tag":119,"props":8938,"children":8939},{"style":187},[8940],{"type":45,"value":6797},{"type":39,"tag":119,"props":8942,"children":8943},{"style":165},[8944],{"type":45,"value":184},{"type":39,"tag":119,"props":8946,"children":8947},{"style":165},[8948],{"type":45,"value":370},{"type":39,"tag":119,"props":8950,"children":8951},{"class":121,"line":141},[8952,8956,8960,8964,8968,8972,8976],{"type":39,"tag":119,"props":8953,"children":8954},{"style":153},[8955],{"type":45,"value":1155},{"type":39,"tag":119,"props":8957,"children":8958},{"style":159},[8959],{"type":45,"value":7342},{"type":39,"tag":119,"props":8961,"children":8962},{"style":153},[8963],{"type":45,"value":1165},{"type":39,"tag":119,"props":8965,"children":8966},{"style":165},[8967],{"type":45,"value":1170},{"type":39,"tag":119,"props":8969,"children":8970},{"style":187},[8971],{"type":45,"value":7355},{"type":39,"tag":119,"props":8973,"children":8974},{"style":165},[8975],{"type":45,"value":184},{"type":39,"tag":119,"props":8977,"children":8978},{"style":165},[8979],{"type":45,"value":370},{"type":39,"tag":119,"props":8981,"children":8982},{"class":121,"line":26},[8983],{"type":39,"tag":119,"props":8984,"children":8985},{"emptyLinePlaceholder":2421},[8986],{"type":45,"value":2424},{"type":39,"tag":119,"props":8988,"children":8989},{"class":121,"line":207},[8990],{"type":39,"tag":119,"props":8991,"children":8992},{"style":126},[8993],{"type":45,"value":129},{"type":39,"tag":119,"props":8995,"children":8996},{"class":121,"line":216},[8997,9001,9005,9009],{"type":39,"tag":119,"props":8998,"children":8999},{"style":126},[9000],{"type":45,"value":569},{"type":39,"tag":119,"props":9002,"children":9003},{"style":153},[9004],{"type":45,"value":236},{"type":39,"tag":119,"props":9006,"children":9007},{"style":239},[9008],{"type":45,"value":578},{"type":39,"tag":119,"props":9010,"children":9011},{"style":581},[9012],{"type":45,"value":7096},{"type":39,"tag":119,"props":9014,"children":9015},{"class":121,"line":225},[9016],{"type":39,"tag":119,"props":9017,"children":9018},{"style":126},[9019],{"type":45,"value":147},{"type":39,"tag":119,"props":9021,"children":9022},{"class":121,"line":266},[9023,9027,9031,9035,9039,9043,9047],{"type":39,"tag":119,"props":9024,"children":9025},{"style":153},[9026],{"type":45,"value":426},{"type":39,"tag":119,"props":9028,"children":9029},{"style":153},[9030],{"type":45,"value":431},{"type":39,"tag":119,"props":9032,"children":9033},{"style":289},[9034],{"type":45,"value":436},{"type":39,"tag":119,"props":9036,"children":9037},{"style":321},[9038],{"type":45,"value":6037},{"type":39,"tag":119,"props":9040,"children":9041},{"style":289},[9042],{"type":45,"value":446},{"type":39,"tag":119,"props":9044,"children":9045},{"style":321},[9046],{"type":45,"value":6494},{"type":39,"tag":119,"props":9048,"children":9049},{"style":165},[9050],{"type":45,"value":204},{"type":39,"tag":119,"props":9052,"children":9053},{"class":121,"line":275},[9054],{"type":39,"tag":119,"props":9055,"children":9056},{"style":126},[9057],{"type":45,"value":6506},{"type":39,"tag":119,"props":9059,"children":9060},{"class":121,"line":22},[9061,9065,9069,9073,9077,9081,9085,9089],{"type":39,"tag":119,"props":9062,"children":9063},{"style":289},[9064],{"type":45,"value":6514},{"type":39,"tag":119,"props":9066,"children":9067},{"style":165},[9068],{"type":45,"value":179},{"type":39,"tag":119,"props":9070,"children":9071},{"style":581},[9072],{"type":45,"value":6523},{"type":39,"tag":119,"props":9074,"children":9075},{"style":165},[9076],{"type":45,"value":6528},{"type":39,"tag":119,"props":9078,"children":9079},{"style":321},[9080],{"type":45,"value":6533},{"type":39,"tag":119,"props":9082,"children":9083},{"style":165},[9084],{"type":45,"value":6538},{"type":39,"tag":119,"props":9086,"children":9087},{"style":321},[9088],{"type":45,"value":6543},{"type":39,"tag":119,"props":9090,"children":9091},{"style":165},[9092],{"type":45,"value":6548},{"type":39,"tag":119,"props":9094,"children":9095},{"class":121,"line":312},[9096,9100,9104,9108,9112,9116,9120,9124,9128,9132],{"type":39,"tag":119,"props":9097,"children":9098},{"style":289},[9099],{"type":45,"value":6514},{"type":39,"tag":119,"props":9101,"children":9102},{"style":165},[9103],{"type":45,"value":179},{"type":39,"tag":119,"props":9105,"children":9106},{"style":581},[9107],{"type":45,"value":6523},{"type":39,"tag":119,"props":9109,"children":9110},{"style":165},[9111],{"type":45,"value":6528},{"type":39,"tag":119,"props":9113,"children":9114},{"style":321},[9115],{"type":45,"value":6533},{"type":39,"tag":119,"props":9117,"children":9118},{"style":165},[9119],{"type":45,"value":199},{"type":39,"tag":119,"props":9121,"children":9122},{"style":581},[9123],{"type":45,"value":6580},{"type":39,"tag":119,"props":9125,"children":9126},{"style":165},[9127],{"type":45,"value":6528},{"type":39,"tag":119,"props":9129,"children":9130},{"style":321},[9131],{"type":45,"value":6543},{"type":39,"tag":119,"props":9133,"children":9134},{"style":165},[9135],{"type":45,"value":6548},{"type":39,"tag":119,"props":9137,"children":9138},{"class":121,"line":373},[9139,9143,9147,9151,9155,9159,9163,9167,9171,9175,9179,9183,9187,9191,9195,9199,9203,9207,9211],{"type":39,"tag":119,"props":9140,"children":9141},{"style":289},[9142],{"type":45,"value":6514},{"type":39,"tag":119,"props":9144,"children":9145},{"style":165},[9146],{"type":45,"value":179},{"type":39,"tag":119,"props":9148,"children":9149},{"style":581},[9150],{"type":45,"value":6523},{"type":39,"tag":119,"props":9152,"children":9153},{"style":165},[9154],{"type":45,"value":6528},{"type":39,"tag":119,"props":9156,"children":9157},{"style":321},[9158],{"type":45,"value":6533},{"type":39,"tag":119,"props":9160,"children":9161},{"style":165},[9162],{"type":45,"value":199},{"type":39,"tag":119,"props":9164,"children":9165},{"style":581},[9166],{"type":45,"value":6580},{"type":39,"tag":119,"props":9168,"children":9169},{"style":165},[9170],{"type":45,"value":6528},{"type":39,"tag":119,"props":9172,"children":9173},{"style":321},[9174],{"type":45,"value":6543},{"type":39,"tag":119,"props":9176,"children":9177},{"style":165},[9178],{"type":45,"value":365},{"type":39,"tag":119,"props":9180,"children":9181},{"style":165},[9182],{"type":45,"value":247},{"type":39,"tag":119,"props":9184,"children":9185},{"style":159},[9186],{"type":45,"value":493},{"type":39,"tag":119,"props":9188,"children":9189},{"style":353},[9190],{"type":45,"value":179},{"type":39,"tag":119,"props":9192,"children":9193},{"style":159},[9194],{"type":45,"value":6523},{"type":39,"tag":119,"props":9196,"children":9197},{"style":165},[9198],{"type":45,"value":199},{"type":39,"tag":119,"props":9200,"children":9201},{"style":159},[9202],{"type":45,"value":6580},{"type":39,"tag":119,"props":9204,"children":9205},{"style":353},[9206],{"type":45,"value":365},{"type":39,"tag":119,"props":9208,"children":9209},{"style":165},[9210],{"type":45,"value":6007},{"type":39,"tag":119,"props":9212,"children":9213},{"style":165},[9214],{"type":45,"value":4071},{"type":39,"tag":119,"props":9216,"children":9217},{"class":121,"line":382},[9218],{"type":39,"tag":119,"props":9219,"children":9220},{"emptyLinePlaceholder":2421},[9221],{"type":45,"value":2424},{"type":39,"tag":119,"props":9223,"children":9224},{"class":121,"line":391},[9225,9229,9233,9237,9241,9245,9249],{"type":39,"tag":119,"props":9226,"children":9227},{"style":289},[9228],{"type":45,"value":6686},{"type":39,"tag":119,"props":9230,"children":9231},{"style":289},[9232],{"type":45,"value":6691},{"type":39,"tag":119,"props":9234,"children":9235},{"style":353},[9236],{"type":45,"value":6696},{"type":39,"tag":119,"props":9238,"children":9239},{"style":165},[9240],{"type":45,"value":286},{"type":39,"tag":119,"props":9242,"children":9243},{"style":321},[9244],{"type":45,"value":6705},{"type":39,"tag":119,"props":9246,"children":9247},{"style":165},[9248],{"type":45,"value":4470},{"type":39,"tag":119,"props":9250,"children":9251},{"style":165},[9252],{"type":45,"value":204},{"type":39,"tag":119,"props":9254,"children":9255},{"class":121,"line":1848},[9256,9260,9264],{"type":39,"tag":119,"props":9257,"children":9258},{"style":353},[9259],{"type":45,"value":6882},{"type":39,"tag":119,"props":9261,"children":9262},{"style":165},[9263],{"type":45,"value":286},{"type":39,"tag":119,"props":9265,"children":9266},{"style":165},[9267],{"type":45,"value":204},{"type":39,"tag":119,"props":9269,"children":9270},{"class":121,"line":1892},[9271,9275,9279,9283,9287,9291,9295],{"type":39,"tag":119,"props":9272,"children":9273},{"style":165},[9274],{"type":45,"value":1854},{"type":39,"tag":119,"props":9276,"children":9277},{"style":353},[9278],{"type":45,"value":45},{"type":39,"tag":119,"props":9280,"children":9281},{"style":165},[9282],{"type":45,"value":184},{"type":39,"tag":119,"props":9284,"children":9285},{"style":165},[9286],{"type":45,"value":286},{"type":39,"tag":119,"props":9288,"children":9289},{"style":165},[9290],{"type":45,"value":1170},{"type":39,"tag":119,"props":9292,"children":9293},{"style":187},[9294],{"type":45,"value":5938},{"type":39,"tag":119,"props":9296,"children":9297},{"style":165},[9298],{"type":45,"value":2640},{"type":39,"tag":119,"props":9300,"children":9301},{"class":121,"line":1934},[9302],{"type":39,"tag":119,"props":9303,"children":9304},{"style":165},[9305],{"type":45,"value":4500},{"type":39,"tag":119,"props":9307,"children":9308},{"class":121,"line":1977},[9309,9314,9318],{"type":39,"tag":119,"props":9310,"children":9311},{"style":353},[9312],{"type":45,"value":9313},"        events",{"type":39,"tag":119,"props":9315,"children":9316},{"style":165},[9317],{"type":45,"value":286},{"type":39,"tag":119,"props":9319,"children":9320},{"style":165},[9321],{"type":45,"value":204},{"type":39,"tag":119,"props":9323,"children":9324},{"class":121,"line":1986},[9325,9329,9333,9337,9341],{"type":39,"tag":119,"props":9326,"children":9327},{"style":165},[9328],{"type":45,"value":1854},{"type":39,"tag":119,"props":9330,"children":9331},{"style":353},[9332],{"type":45,"value":4258},{"type":39,"tag":119,"props":9334,"children":9335},{"style":165},[9336],{"type":45,"value":184},{"type":39,"tag":119,"props":9338,"children":9339},{"style":165},[9340],{"type":45,"value":286},{"type":39,"tag":119,"props":9342,"children":9343},{"style":165},[9344],{"type":45,"value":8527},{"type":39,"tag":119,"props":9346,"children":9347},{"class":121,"line":1994},[9348],{"type":39,"tag":119,"props":9349,"children":9350},{"style":165},[9351],{"type":45,"value":1983},{"type":39,"tag":119,"props":9353,"children":9354},{"class":121,"line":2036},[9355],{"type":39,"tag":119,"props":9356,"children":9357},{"style":165},[9358],{"type":45,"value":3409},{"type":39,"tag":119,"props":9360,"children":9361},{"class":121,"line":2078},[9362],{"type":39,"tag":119,"props":9363,"children":9364},{"emptyLinePlaceholder":2421},[9365],{"type":45,"value":2424},{"type":39,"tag":119,"props":9367,"children":9368},{"class":121,"line":2773},[9369,9373,9377,9381],{"type":39,"tag":119,"props":9370,"children":9371},{"style":289},[9372],{"type":45,"value":6686},{"type":39,"tag":119,"props":9374,"children":9375},{"style":353},[9376],{"type":45,"value":7511},{"type":39,"tag":119,"props":9378,"children":9379},{"style":165},[9380],{"type":45,"value":4470},{"type":39,"tag":119,"props":9382,"children":9383},{"style":165},[9384],{"type":45,"value":204},{"type":39,"tag":119,"props":9386,"children":9387},{"class":121,"line":2806},[9388,9392,9396,9400],{"type":39,"tag":119,"props":9389,"children":9390},{"style":353},[9391],{"type":45,"value":7527},{"type":39,"tag":119,"props":9393,"children":9394},{"style":165},[9395],{"type":45,"value":286},{"type":39,"tag":119,"props":9397,"children":9398},{"style":1857},[9399],{"type":45,"value":7536},{"type":39,"tag":119,"props":9401,"children":9402},{"style":165},[9403],{"type":45,"value":1475},{"type":39,"tag":119,"props":9405,"children":9406},{"class":121,"line":2814},[9407,9411,9415,9419,9423,9427,9431,9435,9439,9443,9447,9451,9455,9459],{"type":39,"tag":119,"props":9408,"children":9409},{"style":353},[9410],{"type":45,"value":7548},{"type":39,"tag":119,"props":9412,"children":9413},{"style":165},[9414],{"type":45,"value":286},{"type":39,"tag":119,"props":9416,"children":9417},{"style":289},[9418],{"type":45,"value":292},{"type":39,"tag":119,"props":9420,"children":9421},{"style":165},[9422],{"type":45,"value":1074},{"type":39,"tag":119,"props":9424,"children":9425},{"style":581},[9426],{"type":45,"value":5976},{"type":39,"tag":119,"props":9428,"children":9429},{"style":165},[9430],{"type":45,"value":286},{"type":39,"tag":119,"props":9432,"children":9433},{"style":321},[9434],{"type":45,"value":7573},{"type":39,"tag":119,"props":9436,"children":9437},{"style":165},[9438],{"type":45,"value":199},{"type":39,"tag":119,"props":9440,"children":9441},{"style":581},[9442],{"type":45,"value":7582},{"type":39,"tag":119,"props":9444,"children":9445},{"style":165},[9446],{"type":45,"value":286},{"type":39,"tag":119,"props":9448,"children":9449},{"style":321},[9450],{"type":45,"value":6037},{"type":39,"tag":119,"props":9452,"children":9453},{"style":165},[9454],{"type":45,"value":4856},{"type":39,"tag":119,"props":9456,"children":9457},{"style":321},[9458],{"type":45,"value":1102},{"type":39,"tag":119,"props":9460,"children":9461},{"style":165},[9462],{"type":45,"value":204},{"type":39,"tag":119,"props":9464,"children":9465},{"class":121,"line":8800},[9466,9470,9474,9478,9482,9486,9490,9494,9498,9502],{"type":39,"tag":119,"props":9467,"children":9468},{"style":159},[9469],{"type":45,"value":7610},{"type":39,"tag":119,"props":9471,"children":9472},{"style":165},[9473],{"type":45,"value":168},{"type":39,"tag":119,"props":9475,"children":9476},{"style":353},[9477],{"type":45,"value":7619},{"type":39,"tag":119,"props":9479,"children":9480},{"style":165},[9481],{"type":45,"value":184},{"type":39,"tag":119,"props":9483,"children":9484},{"style":187},[9485],{"type":45,"value":7628},{"type":39,"tag":119,"props":9487,"children":9488},{"style":165},[9489],{"type":45,"value":184},{"type":39,"tag":119,"props":9491,"children":9492},{"style":165},[9493],{"type":45,"value":199},{"type":39,"tag":119,"props":9495,"children":9496},{"style":159},[9497],{"type":45,"value":7582},{"type":39,"tag":119,"props":9499,"children":9500},{"style":353},[9501],{"type":45,"value":365},{"type":39,"tag":119,"props":9503,"children":9504},{"style":165},[9505],{"type":45,"value":370},{"type":39,"tag":119,"props":9507,"children":9508},{"class":121,"line":8808},[9509,9513,9517,9521],{"type":39,"tag":119,"props":9510,"children":9511},{"style":159},[9512],{"type":45,"value":7610},{"type":39,"tag":119,"props":9514,"children":9515},{"style":165},[9516],{"type":45,"value":168},{"type":39,"tag":119,"props":9518,"children":9519},{"style":353},[9520],{"type":45,"value":7664},{"type":39,"tag":119,"props":9522,"children":9523},{"style":165},[9524],{"type":45,"value":370},{"type":39,"tag":119,"props":9526,"children":9527},{"class":121,"line":8824},[9528,9532,9536,9540,9544,9548,9552],{"type":39,"tag":119,"props":9529,"children":9530},{"style":159},[9531],{"type":45,"value":7610},{"type":39,"tag":119,"props":9533,"children":9534},{"style":165},[9535],{"type":45,"value":168},{"type":39,"tag":119,"props":9537,"children":9538},{"style":353},[9539],{"type":45,"value":7684},{"type":39,"tag":119,"props":9541,"children":9542},{"style":159},[9543],{"type":45,"value":7689},{"type":39,"tag":119,"props":9545,"children":9546},{"style":165},[9547],{"type":45,"value":168},{"type":39,"tag":119,"props":9549,"children":9550},{"style":353},[9551],{"type":45,"value":7698},{"type":39,"tag":119,"props":9553,"children":9554},{"style":165},[9555],{"type":45,"value":370},{"type":39,"tag":119,"props":9557,"children":9558},{"class":121,"line":8832},[9559,9563,9567,9571,9575,9579,9583,9587],{"type":39,"tag":119,"props":9560,"children":9561},{"style":159},[9562],{"type":45,"value":7610},{"type":39,"tag":119,"props":9564,"children":9565},{"style":165},[9566],{"type":45,"value":168},{"type":39,"tag":119,"props":9568,"children":9569},{"style":353},[9570],{"type":45,"value":7718},{"type":39,"tag":119,"props":9572,"children":9573},{"style":165},[9574],{"type":45,"value":184},{"type":39,"tag":119,"props":9576,"children":9577},{"style":187},[9578],{"type":45,"value":7628},{"type":39,"tag":119,"props":9580,"children":9581},{"style":165},[9582],{"type":45,"value":184},{"type":39,"tag":119,"props":9584,"children":9585},{"style":353},[9586],{"type":45,"value":365},{"type":39,"tag":119,"props":9588,"children":9589},{"style":165},[9590],{"type":45,"value":370},{"type":39,"tag":119,"props":9592,"children":9593},{"class":121,"line":8848},[9594],{"type":39,"tag":119,"props":9595,"children":9596},{"style":165},[9597],{"type":45,"value":1983},{"type":39,"tag":119,"props":9599,"children":9601},{"class":121,"line":9600},31,[9602],{"type":39,"tag":119,"props":9603,"children":9604},{"style":165},[9605],{"type":45,"value":3409},{"type":39,"tag":119,"props":9607,"children":9609},{"class":121,"line":9608},32,[9610],{"type":39,"tag":119,"props":9611,"children":9612},{"emptyLinePlaceholder":2421},[9613],{"type":45,"value":2424},{"type":39,"tag":119,"props":9615,"children":9617},{"class":121,"line":9616},33,[9618,9623,9627,9631],{"type":39,"tag":119,"props":9619,"children":9620},{"style":353},[9621],{"type":45,"value":9622},"    onclick",{"type":39,"tag":119,"props":9624,"children":9625},{"style":165},[9626],{"type":45,"value":472},{"type":39,"tag":119,"props":9628,"children":9629},{"style":321},[9630],{"type":45,"value":1102},{"type":39,"tag":119,"props":9632,"children":9633},{"style":165},[9634],{"type":45,"value":204},{"type":39,"tag":119,"props":9636,"children":9638},{"class":121,"line":9637},34,[9639,9643,9647,9651],{"type":39,"tag":119,"props":9640,"children":9641},{"style":165},[9642],{"type":45,"value":3083},{"type":39,"tag":119,"props":9644,"children":9645},{"style":171},[9646],{"type":45,"value":8789},{"type":39,"tag":119,"props":9648,"children":9649},{"style":353},[9650],{"type":45,"value":883},{"type":39,"tag":119,"props":9652,"children":9653},{"style":165},[9654],{"type":45,"value":370},{"type":39,"tag":119,"props":9656,"children":9658},{"class":121,"line":9657},35,[9659],{"type":39,"tag":119,"props":9660,"children":9661},{"style":165},[9662],{"type":45,"value":527},{"type":39,"tag":119,"props":9664,"children":9666},{"class":121,"line":9665},36,[9667],{"type":39,"tag":119,"props":9668,"children":9669},{"style":165},[9670],{"type":45,"value":535},{"type":39,"tag":90,"props":9672,"children":9674},{"id":9673},"library-specific-guidelines",[9675],{"type":45,"value":9676},"Library-Specific Guidelines",{"type":39,"tag":52,"props":9678,"children":9679},{},[9680],{"type":45,"value":9681},"When converting entire control libraries (not just single controls in apps), additional steps are required:",{"type":39,"tag":988,"props":9683,"children":9685},{"id":9684},"library-module-with-enums-critical-to-avoid-xss-issues",[9686],{"type":45,"value":9687},"Library Module with Enums (CRITICAL to avoid XSS issues!)",{"type":39,"tag":52,"props":9689,"children":9690},{},[9691,9693,9699],{"type":45,"value":9692},"In ",{"type":39,"tag":115,"props":9694,"children":9696},{"className":9695},[],[9697],{"type":45,"value":9698},"library.ts",{"type":45,"value":9700},", enums must be attached to the global library object for UI5 runtime compatibility:",{"type":39,"tag":107,"props":9702,"children":9704},{"className":5859,"code":9703,"language":14,"meta":112,"style":112},"import ObjectPath from \"sap\u002Fbase\u002Futil\u002FObjectPath\";\n\n\u002F\u002F Define enum as TypeScript enum\nexport enum ExampleColor {\n    Red = \"Red\",\n    Green = \"Green\",\n    Blue = \"Blue\"\n}\n\n\u002F\u002F CRITICAL: Attach to global library object\nconst thisLib = ObjectPath.get(\"com.myorg.myui5lib\") as {[key: string]: unknown};\nthisLib.ExampleColor = ExampleColor;\n",[9705],{"type":39,"tag":115,"props":9706,"children":9707},{"__ignoreMap":112},[9708,9741,9748,9756,9777,9806,9835,9860,9867,9874,9882,9974],{"type":39,"tag":119,"props":9709,"children":9710},{"class":121,"line":122},[9711,9715,9720,9724,9728,9733,9737],{"type":39,"tag":119,"props":9712,"children":9713},{"style":153},[9714],{"type":45,"value":1155},{"type":39,"tag":119,"props":9716,"children":9717},{"style":159},[9718],{"type":45,"value":9719}," ObjectPath ",{"type":39,"tag":119,"props":9721,"children":9722},{"style":153},[9723],{"type":45,"value":1165},{"type":39,"tag":119,"props":9725,"children":9726},{"style":165},[9727],{"type":45,"value":1170},{"type":39,"tag":119,"props":9729,"children":9730},{"style":187},[9731],{"type":45,"value":9732},"sap\u002Fbase\u002Futil\u002FObjectPath",{"type":39,"tag":119,"props":9734,"children":9735},{"style":165},[9736],{"type":45,"value":184},{"type":39,"tag":119,"props":9738,"children":9739},{"style":165},[9740],{"type":45,"value":370},{"type":39,"tag":119,"props":9742,"children":9743},{"class":121,"line":132},[9744],{"type":39,"tag":119,"props":9745,"children":9746},{"emptyLinePlaceholder":2421},[9747],{"type":45,"value":2424},{"type":39,"tag":119,"props":9749,"children":9750},{"class":121,"line":141},[9751],{"type":39,"tag":119,"props":9752,"children":9753},{"style":126},[9754],{"type":45,"value":9755},"\u002F\u002F Define enum as TypeScript enum\n",{"type":39,"tag":119,"props":9757,"children":9758},{"class":121,"line":26},[9759,9763,9768,9773],{"type":39,"tag":119,"props":9760,"children":9761},{"style":153},[9762],{"type":45,"value":426},{"type":39,"tag":119,"props":9764,"children":9765},{"style":289},[9766],{"type":45,"value":9767}," enum",{"type":39,"tag":119,"props":9769,"children":9770},{"style":321},[9771],{"type":45,"value":9772}," ExampleColor",{"type":39,"tag":119,"props":9774,"children":9775},{"style":165},[9776],{"type":45,"value":204},{"type":39,"tag":119,"props":9778,"children":9779},{"class":121,"line":207},[9780,9785,9789,9793,9798,9802],{"type":39,"tag":119,"props":9781,"children":9782},{"style":159},[9783],{"type":45,"value":9784},"    Red ",{"type":39,"tag":119,"props":9786,"children":9787},{"style":165},[9788],{"type":45,"value":3001},{"type":39,"tag":119,"props":9790,"children":9791},{"style":165},[9792],{"type":45,"value":1170},{"type":39,"tag":119,"props":9794,"children":9795},{"style":187},[9796],{"type":45,"value":9797},"Red",{"type":39,"tag":119,"props":9799,"children":9800},{"style":165},[9801],{"type":45,"value":184},{"type":39,"tag":119,"props":9803,"children":9804},{"style":165},[9805],{"type":45,"value":1475},{"type":39,"tag":119,"props":9807,"children":9808},{"class":121,"line":216},[9809,9814,9818,9822,9827,9831],{"type":39,"tag":119,"props":9810,"children":9811},{"style":159},[9812],{"type":45,"value":9813},"    Green ",{"type":39,"tag":119,"props":9815,"children":9816},{"style":165},[9817],{"type":45,"value":3001},{"type":39,"tag":119,"props":9819,"children":9820},{"style":165},[9821],{"type":45,"value":1170},{"type":39,"tag":119,"props":9823,"children":9824},{"style":187},[9825],{"type":45,"value":9826},"Green",{"type":39,"tag":119,"props":9828,"children":9829},{"style":165},[9830],{"type":45,"value":184},{"type":39,"tag":119,"props":9832,"children":9833},{"style":165},[9834],{"type":45,"value":1475},{"type":39,"tag":119,"props":9836,"children":9837},{"class":121,"line":225},[9838,9843,9847,9851,9856],{"type":39,"tag":119,"props":9839,"children":9840},{"style":159},[9841],{"type":45,"value":9842},"    Blue ",{"type":39,"tag":119,"props":9844,"children":9845},{"style":165},[9846],{"type":45,"value":3001},{"type":39,"tag":119,"props":9848,"children":9849},{"style":165},[9850],{"type":45,"value":1170},{"type":39,"tag":119,"props":9852,"children":9853},{"style":187},[9854],{"type":45,"value":9855},"Blue",{"type":39,"tag":119,"props":9857,"children":9858},{"style":165},[9859],{"type":45,"value":2640},{"type":39,"tag":119,"props":9861,"children":9862},{"class":121,"line":266},[9863],{"type":39,"tag":119,"props":9864,"children":9865},{"style":165},[9866],{"type":45,"value":535},{"type":39,"tag":119,"props":9868,"children":9869},{"class":121,"line":275},[9870],{"type":39,"tag":119,"props":9871,"children":9872},{"emptyLinePlaceholder":2421},[9873],{"type":45,"value":2424},{"type":39,"tag":119,"props":9875,"children":9876},{"class":121,"line":22},[9877],{"type":39,"tag":119,"props":9878,"children":9879},{"style":126},[9880],{"type":45,"value":9881},"\u002F\u002F CRITICAL: Attach to global library object\n",{"type":39,"tag":119,"props":9883,"children":9884},{"class":121,"line":312},[9885,9889,9894,9898,9903,9907,9912,9916,9920,9925,9929,9933,9937,9941,9945,9950,9954,9958,9962,9966,9970],{"type":39,"tag":119,"props":9886,"children":9887},{"style":289},[9888],{"type":45,"value":3975},{"type":39,"tag":119,"props":9890,"children":9891},{"style":159},[9892],{"type":45,"value":9893}," thisLib ",{"type":39,"tag":119,"props":9895,"children":9896},{"style":165},[9897],{"type":45,"value":3001},{"type":39,"tag":119,"props":9899,"children":9900},{"style":159},[9901],{"type":45,"value":9902}," ObjectPath",{"type":39,"tag":119,"props":9904,"children":9905},{"style":165},[9906],{"type":45,"value":168},{"type":39,"tag":119,"props":9908,"children":9909},{"style":171},[9910],{"type":45,"value":9911},"get",{"type":39,"tag":119,"props":9913,"children":9914},{"style":159},[9915],{"type":45,"value":179},{"type":39,"tag":119,"props":9917,"children":9918},{"style":165},[9919],{"type":45,"value":184},{"type":39,"tag":119,"props":9921,"children":9922},{"style":187},[9923],{"type":45,"value":9924},"com.myorg.myui5lib",{"type":39,"tag":119,"props":9926,"children":9927},{"style":165},[9928],{"type":45,"value":184},{"type":39,"tag":119,"props":9930,"children":9931},{"style":159},[9932],{"type":45,"value":1042},{"type":39,"tag":119,"props":9934,"children":9935},{"style":153},[9936],{"type":45,"value":511},{"type":39,"tag":119,"props":9938,"children":9939},{"style":165},[9940],{"type":45,"value":247},{"type":39,"tag":119,"props":9942,"children":9943},{"style":159},[9944],{"type":45,"value":2890},{"type":39,"tag":119,"props":9946,"children":9947},{"style":581},[9948],{"type":45,"value":9949},"key",{"type":39,"tag":119,"props":9951,"children":9952},{"style":165},[9953],{"type":45,"value":286},{"type":39,"tag":119,"props":9955,"children":9956},{"style":321},[9957],{"type":45,"value":6533},{"type":39,"tag":119,"props":9959,"children":9960},{"style":159},[9961],{"type":45,"value":3518},{"type":39,"tag":119,"props":9963,"children":9964},{"style":165},[9965],{"type":45,"value":286},{"type":39,"tag":119,"props":9967,"children":9968},{"style":321},[9969],{"type":45,"value":1051},{"type":39,"tag":119,"props":9971,"children":9972},{"style":165},[9973],{"type":45,"value":3417},{"type":39,"tag":119,"props":9975,"children":9976},{"class":121,"line":373},[9977,9982,9986,9991,9995,9999],{"type":39,"tag":119,"props":9978,"children":9979},{"style":159},[9980],{"type":45,"value":9981},"thisLib",{"type":39,"tag":119,"props":9983,"children":9984},{"style":165},[9985],{"type":45,"value":168},{"type":39,"tag":119,"props":9987,"children":9988},{"style":159},[9989],{"type":45,"value":9990},"ExampleColor ",{"type":39,"tag":119,"props":9992,"children":9993},{"style":165},[9994],{"type":45,"value":3001},{"type":39,"tag":119,"props":9996,"children":9997},{"style":159},[9998],{"type":45,"value":9772},{"type":39,"tag":119,"props":10000,"children":10001},{"style":165},[10002],{"type":45,"value":370},{"type":39,"tag":52,"props":10004,"children":10005},{},[10006],{"type":39,"tag":1308,"props":10007,"children":10008},{},[10009],{"type":45,"value":10010},"Why this is critical for every enum in the library:",{"type":39,"tag":3873,"props":10012,"children":10013},{},[10014,10025,10030,10035],{"type":39,"tag":62,"props":10015,"children":10016},{},[10017,10019],{"type":45,"value":10018},"Control properties reference types as global names: ",{"type":39,"tag":115,"props":10020,"children":10022},{"className":10021},[],[10023],{"type":45,"value":10024},"type: \"com.myorg.myui5lib.ExampleColor\"",{"type":39,"tag":62,"props":10026,"children":10027},{},[10028],{"type":45,"value":10029},"UI5 runtime needs to find the enum via this global path",{"type":39,"tag":62,"props":10031,"children":10032},{},[10033],{"type":45,"value":10034},"Without this, UI5 cannot validate the property type",{"type":39,"tag":62,"props":10036,"children":10037},{},[10038],{"type":45,"value":10039},"This breaks type checking and can create XSS vulnerabilities as unchecked content can be written to HTML unexpectedly",{"type":39,"tag":988,"props":10041,"children":10043},{"id":10042},"path-mapping-in-tsconfigjson",[10044],{"type":45,"value":10045},"Path Mapping in tsconfig.json",{"type":39,"tag":52,"props":10047,"children":10048},{},[10049],{"type":45,"value":10050},"For libraries, add path mappings for the library namespace:",{"type":39,"tag":107,"props":10052,"children":10054},{"className":1398,"code":10053,"language":1400,"meta":112,"style":112},"{\n    \"compilerOptions\": {\n        \"paths\": {\n            \"com\u002Fmyorg\u002Fmylib\u002F*\": [\".\u002Fsrc\u002F*\"]\n        }\n    }\n}\n",[10055],{"type":39,"tag":115,"props":10056,"children":10057},{"__ignoreMap":112},[10058,10065,10088,10111,10152,10159,10166],{"type":39,"tag":119,"props":10059,"children":10060},{"class":121,"line":122},[10061],{"type":39,"tag":119,"props":10062,"children":10063},{"style":165},[10064],{"type":45,"value":1412},{"type":39,"tag":119,"props":10066,"children":10067},{"class":121,"line":132},[10068,10072,10076,10080,10084],{"type":39,"tag":119,"props":10069,"children":10070},{"style":165},[10071],{"type":45,"value":1420},{"type":39,"tag":119,"props":10073,"children":10074},{"style":289},[10075],{"type":45,"value":797},{"type":39,"tag":119,"props":10077,"children":10078},{"style":165},[10079],{"type":45,"value":184},{"type":39,"tag":119,"props":10081,"children":10082},{"style":165},[10083],{"type":45,"value":286},{"type":39,"tag":119,"props":10085,"children":10086},{"style":165},[10087],{"type":45,"value":204},{"type":39,"tag":119,"props":10089,"children":10090},{"class":121,"line":141},[10091,10095,10099,10103,10107],{"type":39,"tag":119,"props":10092,"children":10093},{"style":165},[10094],{"type":45,"value":1444},{"type":39,"tag":119,"props":10096,"children":10097},{"style":321},[10098],{"type":45,"value":1833},{"type":39,"tag":119,"props":10100,"children":10101},{"style":165},[10102],{"type":45,"value":184},{"type":39,"tag":119,"props":10104,"children":10105},{"style":165},[10106],{"type":45,"value":286},{"type":39,"tag":119,"props":10108,"children":10109},{"style":165},[10110],{"type":45,"value":204},{"type":39,"tag":119,"props":10112,"children":10113},{"class":121,"line":26},[10114,10118,10123,10127,10131,10135,10139,10144,10148],{"type":39,"tag":119,"props":10115,"children":10116},{"style":165},[10117],{"type":45,"value":1854},{"type":39,"tag":119,"props":10119,"children":10120},{"style":1857},[10121],{"type":45,"value":10122},"com\u002Fmyorg\u002Fmylib\u002F*",{"type":39,"tag":119,"props":10124,"children":10125},{"style":165},[10126],{"type":45,"value":184},{"type":39,"tag":119,"props":10128,"children":10129},{"style":165},[10130],{"type":45,"value":286},{"type":39,"tag":119,"props":10132,"children":10133},{"style":165},[10134],{"type":45,"value":1770},{"type":39,"tag":119,"props":10136,"children":10137},{"style":165},[10138],{"type":45,"value":184},{"type":39,"tag":119,"props":10140,"children":10141},{"style":187},[10142],{"type":45,"value":10143},".\u002Fsrc\u002F*",{"type":39,"tag":119,"props":10145,"children":10146},{"style":165},[10147],{"type":45,"value":184},{"type":39,"tag":119,"props":10149,"children":10150},{"style":165},[10151],{"type":45,"value":1974},{"type":39,"tag":119,"props":10153,"children":10154},{"class":121,"line":207},[10155],{"type":39,"tag":119,"props":10156,"children":10157},{"style":165},[10158],{"type":45,"value":1983},{"type":39,"tag":119,"props":10160,"children":10161},{"class":121,"line":216},[10162],{"type":39,"tag":119,"props":10163,"children":10164},{"style":165},[10165],{"type":45,"value":527},{"type":39,"tag":119,"props":10167,"children":10168},{"class":121,"line":225},[10169],{"type":39,"tag":119,"props":10170,"children":10171},{"style":165},[10172],{"type":45,"value":535},{"type":39,"tag":90,"props":10174,"children":10176},{"id":10175},"control-conversion-checklist",[10177],{"type":45,"value":10178},"Control Conversion Checklist",{"type":39,"tag":52,"props":10180,"children":10181},{},[10182],{"type":45,"value":10183},"When converting a control from JavaScript to TypeScript:",{"type":39,"tag":58,"props":10185,"children":10186},{},[10187,10192,10204,10222,10234,10246,10257,10262,10267],{"type":39,"tag":62,"props":10188,"children":10189},{},[10190],{"type":45,"value":10191},"Convert to ES6 class\u002Fmodule like regular UI5 modules",{"type":39,"tag":62,"props":10193,"children":10194},{},[10195,10197,10202],{"type":45,"value":10196},"Add ",{"type":39,"tag":115,"props":10198,"children":10200},{"className":10199},[],[10201],{"type":45,"value":7053},{"type":45,"value":10203}," JSDoc annotation",{"type":39,"tag":62,"props":10205,"children":10206},{},[10207,10208,10213,10215,10220],{"type":45,"value":6999},{"type":39,"tag":115,"props":10209,"children":10211},{"className":10210},[],[10212],{"type":45,"value":7169},{"type":45,"value":10214}," ",{"type":39,"tag":1308,"props":10216,"children":10217},{},[10218],{"type":45,"value":10219},"immediately",{"type":45,"value":10221}," with class definition",{"type":39,"tag":62,"props":10223,"children":10224},{},[10225,10227,10232],{"type":45,"value":10226},"Type metadata as ",{"type":39,"tag":115,"props":10228,"children":10230},{"className":10229},[],[10231],{"type":45,"value":6752},{"type":45,"value":10233}," (import from appropriate base class)",{"type":39,"tag":62,"props":10235,"children":10236},{},[10237,10239,10244],{"type":45,"value":10238},"Define metadata and renderer as ",{"type":39,"tag":115,"props":10240,"children":10242},{"className":10241},[],[10243],{"type":45,"value":7321},{"type":45,"value":10245}," members",{"type":39,"tag":62,"props":10247,"children":10248},{},[10249,10251],{"type":45,"value":10250},"Install and run ",{"type":39,"tag":115,"props":10252,"children":10254},{"className":10253},[],[10255],{"type":45,"value":10256},"@ui5\u002Fts-interface-generator",{"type":39,"tag":62,"props":10258,"children":10259},{},[10260],{"type":45,"value":10261},"Copy constructor signatures from generator output into class",{"type":39,"tag":62,"props":10263,"children":10264},{},[10265],{"type":45,"value":10266},"If in a library: manually attach enums to global library object",{"type":39,"tag":62,"props":10268,"children":10269},{},[10270],{"type":45,"value":10271},"Preserve all JSDoc comments and documentation",{"type":39,"tag":83,"props":10273,"children":10275},{"id":10274},"test-conversion",[10276],{"type":45,"value":10277},"Test Conversion",{"type":39,"tag":52,"props":10279,"children":10280},{},[10281,10283,10290],{"type":45,"value":10282},"There are critical, non-obvious patterns for converting UI5 test code from JavaScript to TypeScript. See ",{"type":39,"tag":10284,"props":10285,"children":10287},"a",{"href":10286},".\u002Freferences\u002Ftest_conversion.md",[10288],{"type":45,"value":10289},"the test conversion document",{"type":45,"value":10291}," for details when tests need to be converted..",{"type":39,"tag":10293,"props":10294,"children":10295},"style",{},[10296],{"type":45,"value":10297},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":10299,"total":10420},[10300,10319,10337,10356,10373,10389,10408],{"slug":10301,"name":10301,"fn":10302,"description":10303,"org":10304,"tags":10305,"stars":22,"repoUrl":23,"updatedAt":10318},"amazon-location-service","integrate Amazon Location Service APIs","Integrates Amazon Location Service APIs for AWS applications. Use this skill when users want to add maps (interactive MapLibre or static images); geocode addresses to coordinates or reverse geocode coordinates to addresses; calculate routes, travel times, or service areas; find places and businesses through text search, nearby search, or autocomplete suggestions; retrieve detailed place information including hours, contacts, and addresses; monitor geographical boundaries with geofences; or track device locations. Covers authentication, SDK integration, and all Amazon Location Service capabilities.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10306,10309,10312,10315],{"name":10307,"slug":10308,"type":15},"API Development","api-development",{"name":10310,"slug":10311,"type":15},"AWS","aws",{"name":10313,"slug":10314,"type":15},"Maps","maps",{"name":10316,"slug":10317,"type":15},"Navigation","navigation","2026-07-12T08:13:53.294026",{"slug":10320,"name":10320,"fn":10321,"description":10322,"org":10323,"tags":10324,"stars":22,"repoUrl":23,"updatedAt":10336},"amplify-workflow","build full-stack apps with AWS Amplify","Build and deploy full-stack web and mobile apps with AWS Amplify Gen2 (TypeScript code-first). Covers auth (Cognito), data (AppSync\u002FDynamoDB including schema modeling, enum types, relationships, authorization rules), storage (S3), functions, APIs, and AI (Amplify AI Kit with Bedrock). Supports React, Next.js, Vue, Angular, React Native, Flutter, Swift, and Android. Always use this skill for Amplify Gen2 topics — even for questions you think you know — it contains validated, version-specific patterns that prevent common mistakes. TRIGGER when: user mentions Amplify Gen2; project has amplify\u002F directory or amplify_outputs; code imports @aws-amplify packages; user asks about defineBackend, defineAuth, defineData, defineStorage, or npx ampx. SKIP: Amplify Gen1 (amplify CLI v6), standalone SAM\u002FCDK without Amplify (use aws-serverless), direct Bedrock without Amplify AI Kit (use bedrock).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10325,10328,10329,10332,10335],{"name":10326,"slug":10327,"type":15},"Auth","auth",{"name":10310,"slug":10311,"type":15},{"name":10330,"slug":10331,"type":15},"Database","database",{"name":10333,"slug":10334,"type":15},"Frontend","frontend",{"name":13,"slug":14,"type":15},"2026-07-12T08:13:47.134012",{"slug":10338,"name":10338,"fn":10339,"description":10340,"org":10341,"tags":10342,"stars":22,"repoUrl":23,"updatedAt":10355},"analyzer","analyze queried data for trends","Analyze queried data for trends, week-over-week comparisons, distributions, funnels, cohorts, top-N lists, anomalies, sanity checks, and report-ready findings. Use after or alongside ClickHouse queries when the user wants insight rather than raw rows.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10343,10346,10349,10352],{"name":10344,"slug":10345,"type":15},"Analytics","analytics",{"name":10347,"slug":10348,"type":15},"ClickHouse","clickhouse",{"name":10350,"slug":10351,"type":15},"Data Analysis","data-analysis",{"name":10353,"slug":10354,"type":15},"Statistics","statistics","2026-07-12T08:14:05.606036",{"slug":10357,"name":10357,"fn":10358,"description":10359,"org":10360,"tags":10361,"stars":22,"repoUrl":23,"updatedAt":10372},"artifact-management","manage and organize analysis artifacts","Save, organize, and describe reusable analysis artifacts such as SQL, result snapshots, CSV exports, summaries, caveats, plots, and report-ready files. Use when users ask to save, export, share, cite, reproduce, or organize data-analysis outputs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10362,10363,10366,10369],{"name":10350,"slug":10351,"type":15},{"name":10364,"slug":10365,"type":15},"Productivity","productivity",{"name":10367,"slug":10368,"type":15},"Reporting","reporting",{"name":10370,"slug":10371,"type":15},"SQL","sql","2026-07-12T08:14:09.265555",{"slug":10374,"name":10374,"fn":10375,"description":10376,"org":10377,"tags":10378,"stars":22,"repoUrl":23,"updatedAt":10388},"attorney-assist","connect with attorneys for legal consultation","Connects the user with a LegalZoom attorney for legal consultation. Use when a user asks about attorneys, lawyers, or legal help, or when contract review reveals high risks or low-confidence findings.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10379,10382,10385],{"name":10380,"slug":10381,"type":15},"Contracts","contracts",{"name":10383,"slug":10384,"type":15},"Legal","legal",{"name":10386,"slug":10387,"type":15},"Risk Assessment","risk-assessment","2026-07-12T08:13:45.878361",{"slug":10390,"name":10390,"fn":10391,"description":10392,"org":10393,"tags":10394,"stars":22,"repoUrl":23,"updatedAt":10407},"building-pydantic-ai-agents","build AI agents with Pydantic AI","Build AI agents with Pydantic AI — tools, capabilities (including on-demand loading), structured output, streaming, testing, and multi-agent patterns. Use when the user mentions Pydantic AI, imports pydantic_ai, or asks to build an AI agent, add tools\u002Fcapabilities, defer capability loading, stream output, define agents from YAML, or test agent behavior.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10395,10398,10401,10404],{"name":10396,"slug":10397,"type":15},"Agents","agents",{"name":10399,"slug":10400,"type":15},"LLM","llm",{"name":10402,"slug":10403,"type":15},"Multi-Agent","multi-agent",{"name":10405,"slug":10406,"type":15},"Python","python","2026-07-12T08:14:01.893781",{"slug":10348,"name":10348,"fn":10409,"description":10410,"org":10411,"tags":10412,"stars":22,"repoUrl":23,"updatedAt":10419},"query ClickHouse databases via CLI","Connect to and query ClickHouse (a local server or a ClickHouse Cloud service) from the terminal using the official clickhousectl CLI, including the browser OAuth login flow. Use when the user wants to run SQL against ClickHouse, explore schemas and tables, inspect Cloud services, or authenticate clickhousectl. For building a local dev environment or deploying to Cloud, defer to the official ClickHouse skills (see Scope).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10413,10414,10417,10418],{"name":10344,"slug":10345,"type":15},{"name":10415,"slug":10416,"type":15},"CLI","cli",{"name":10347,"slug":10348,"type":15},{"name":10330,"slug":10331,"type":15},"2026-07-12T08:14:06.829692",43,{"items":10422,"total":10548},[10423,10430,10438,10445,10452,10458,10465,10472,10484,10502,10522,10535],{"slug":10301,"name":10301,"fn":10302,"description":10303,"org":10424,"tags":10425,"stars":22,"repoUrl":23,"updatedAt":10318},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10426,10427,10428,10429],{"name":10307,"slug":10308,"type":15},{"name":10310,"slug":10311,"type":15},{"name":10313,"slug":10314,"type":15},{"name":10316,"slug":10317,"type":15},{"slug":10320,"name":10320,"fn":10321,"description":10322,"org":10431,"tags":10432,"stars":22,"repoUrl":23,"updatedAt":10336},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10433,10434,10435,10436,10437],{"name":10326,"slug":10327,"type":15},{"name":10310,"slug":10311,"type":15},{"name":10330,"slug":10331,"type":15},{"name":10333,"slug":10334,"type":15},{"name":13,"slug":14,"type":15},{"slug":10338,"name":10338,"fn":10339,"description":10340,"org":10439,"tags":10440,"stars":22,"repoUrl":23,"updatedAt":10355},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10441,10442,10443,10444],{"name":10344,"slug":10345,"type":15},{"name":10347,"slug":10348,"type":15},{"name":10350,"slug":10351,"type":15},{"name":10353,"slug":10354,"type":15},{"slug":10357,"name":10357,"fn":10358,"description":10359,"org":10446,"tags":10447,"stars":22,"repoUrl":23,"updatedAt":10372},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10448,10449,10450,10451],{"name":10350,"slug":10351,"type":15},{"name":10364,"slug":10365,"type":15},{"name":10367,"slug":10368,"type":15},{"name":10370,"slug":10371,"type":15},{"slug":10374,"name":10374,"fn":10375,"description":10376,"org":10453,"tags":10454,"stars":22,"repoUrl":23,"updatedAt":10388},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10455,10456,10457],{"name":10380,"slug":10381,"type":15},{"name":10383,"slug":10384,"type":15},{"name":10386,"slug":10387,"type":15},{"slug":10390,"name":10390,"fn":10391,"description":10392,"org":10459,"tags":10460,"stars":22,"repoUrl":23,"updatedAt":10407},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10461,10462,10463,10464],{"name":10396,"slug":10397,"type":15},{"name":10399,"slug":10400,"type":15},{"name":10402,"slug":10403,"type":15},{"name":10405,"slug":10406,"type":15},{"slug":10348,"name":10348,"fn":10409,"description":10410,"org":10466,"tags":10467,"stars":22,"repoUrl":23,"updatedAt":10419},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10468,10469,10470,10471],{"name":10344,"slug":10345,"type":15},{"name":10415,"slug":10416,"type":15},{"name":10347,"slug":10348,"type":15},{"name":10330,"slug":10331,"type":15},{"slug":10473,"name":10473,"fn":10474,"description":10475,"org":10476,"tags":10477,"stars":22,"repoUrl":23,"updatedAt":10483},"cline-session-history","search and browse Cline session history","Search and browse Cline session history. Use when the user asks to find, list, inspect, or export Cline sessions by time period, prompt content, status, model, provider, source, mode, workspace, or other criteria. Also use when the user wants to read a session transcript or export sessions to a directory. Trigger phrases include \"find my session\", \"search my session history\", \"show me past sessions\", \"what was that session where\", \"find the session that started with\", and any mention of past Cline conversations.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10478,10479,10482],{"name":10396,"slug":10397,"type":15},{"name":10480,"slug":10481,"type":15},"History","history",{"name":10364,"slug":10365,"type":15},"2026-07-19T06:03:13.945151",{"slug":10485,"name":10485,"fn":10486,"description":10487,"org":10488,"tags":10489,"stars":22,"repoUrl":23,"updatedAt":10501},"convex-design","build reactive backends with Convex","Design and build reactive, type-safe, production-grade backends on Convex. Covers schema, queries\u002Fmutations\u002Factions, indexes, auth, file storage, scheduling, real-time multiplayer, mobile backends, and LLM\u002Fagent workflows on Convex's one-platform stack.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10490,10491,10494,10495,10498],{"name":10326,"slug":10327,"type":15},{"name":10492,"slug":10493,"type":15},"Backend","backend",{"name":10330,"slug":10331,"type":15},{"name":10496,"slug":10497,"type":15},"Real-time","real-time",{"name":10499,"slug":10500,"type":15},"Storage","storage","2026-07-12T08:13:37.101253",{"slug":10503,"name":10503,"fn":10504,"description":10505,"org":10506,"tags":10507,"stars":22,"repoUrl":23,"updatedAt":10521},"cosmosdb-best-practices","optimize Azure Cosmos DB performance","Azure Cosmos DB performance optimization and best practices guidelines for NoSQL,\npartitioning, queries, SDK usage, and vector search. Use when writing, reviewing,\nor refactoring code that interacts with Azure Cosmos DB, designing data models,\noptimizing queries, or implementing high-performance database operations.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10508,10511,10514,10515,10518],{"name":10509,"slug":10510,"type":15},"Azure","azure",{"name":10512,"slug":10513,"type":15},"Cosmos DB","cosmos-db",{"name":10330,"slug":10331,"type":15},{"name":10516,"slug":10517,"type":15},"NoSQL","nosql",{"name":10519,"slug":10520,"type":15},"Performance","performance","2026-07-12T08:13:54.531719",{"slug":10523,"name":10523,"fn":10524,"description":10525,"org":10526,"tags":10527,"stars":22,"repoUrl":23,"updatedAt":10534},"data-analyst","analyze ClickHouse analytics data","Act as an interactive data analyst for ClickHouse-backed analytics. Use when the user asks questions about internal data, metrics, dashboards, telemetry, active users, revenue, funnels, trends, distributions, or wants an analyst-style conversation, ad hoc SQL, charts, or a data export against ClickHouse (local or ClickHouse Cloud).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10528,10529,10530,10533],{"name":10344,"slug":10345,"type":15},{"name":10347,"slug":10348,"type":15},{"name":10531,"slug":10532,"type":15},"Dashboards","dashboards",{"name":10350,"slug":10351,"type":15},"2026-07-12T08:13:31.975246",{"slug":10536,"name":10536,"fn":10537,"description":10538,"org":10539,"tags":10540,"stars":22,"repoUrl":23,"updatedAt":10547},"dataproc-skills","manage Dataproc clusters and jobs","Skills to interact with your Dataproc clusters and jobs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[10541,10544],{"name":10542,"slug":10543,"type":15},"Data Engineering","data-engineering",{"name":10545,"slug":10546,"type":15},"Operations","operations","2026-07-12T08:13:42.179275",45]