14. TypeScript

Why TypeScript for UI5

TypeScript helps you write more reliable and maintainable code, makes refactoring easier, and improves IDE autocompletion. For UI5 projects, this is especially relevant due to the complex architecture and large codebase.

How to enable TypeScript support in an existing SAPUI5 JavaScript application

1. Environment setup

Make sure you are using UI5 Tooling, and add TypeScript support via ui5-tooling-modules:

package.json:

{
  "devDependencies": {
    "@ui5/cli": "^3",
    "typescript": "^5",
    "ui5-tooling-modules": "^2"
  },
  "ui5": {
    "dependencies": [
      "ui5-tooling-modules"
    ]
  }
}

tsconfig.json
Create a tsconfig.json file in the project root:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "Node",
    "lib": ["ES6", "DOM"],
    "strict": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowJs": true,
    "checkJs": false,
    "outDir": "webapp",
    "rootDir": "src",
    "baseUrl": ".",
    "paths": {
      "*": ["types/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "webapp"]
}

allowJs: true and checkJs: false let the TypeScript compiler understand JavaScript but not validate it, which is ideal for hybrid mode.

2. Project structure

Organize your code logically:

/webapp
  /controller
    LegacyController.controller.js        // old code
  /model
  Component.js

/src
  /controller
    NewFancyController.ts                 // new TS code
  /types
    sap-ui.d.ts                           // types for SAPUI5 (if needed)
  • src — folder for new TypeScript code
  • webapp — folder for legacy code and build artifacts

When building, src is transpiled to webapp, and both file types work together.

3. Interoperability between JS and TS

Using TS from JS:
TS classes can be imported into JS if you specify the namespace correctly and use sap.ui.define.
For example, src/controller/NewFancyController.ts:

export default class NewFancyController extends Controller {
  onInit() {
    console.log("TypeScript controller initialized");
  }
}

After compilation, the file appears as webapp/controller/NewFancyController.js and can be used as a regular UI5 controller.

Using JS from TS:
In a TypeScript class, you can use existing JS classes:

import LegacyController from "../controller/LegacyController.controller";

export default class NewController extends LegacyController {
  onInit() {
    super.onInit();
  }
}

For new projects

It is recommended to use the generator:

npm install -g yo @sap/generator-fiori
yo @sap/fiori
  • In the wizard, select TypeScript.
  • The generator will create the correct structure, configs, and build scripts.

Example of a TypeScript controller

import Controller from "sap/ui/core/mvc/Controller";
import JSONModel from "sap/ui/model/json/JSONModel";

export default class AppController extends Controller {
  onInit(): void {
    const oModel = new JSONModel({ name: "UI5 + TypeScript" });
    this.getView().setModel(oModel);
  }
}

Features and caveats

  • Namespace: UI5 expects a certain path and namespace structure. For example, if you have webapp/controller/App.controller.js, then in the manifest/view you specify your.namespace.controller.App.
  • Types: UI5 types cover only public APIs. For custom extensions, you may need declare module.
  • this: In TypeScript, UI5 controller classes inherit from base classes, and this is always typed.
  • Build: Don’t forget to compile TypeScript to JavaScript before deployment.

See also