14. TypeScript

Почему TypeScript для UI5

TypeScript помогает писать более надёжный и поддерживаемый код, облегчает рефакторинг и улучшает автодополнение в IDE. Для UI5-проектов это особенно актуально из-за сложной архитектуры и большого количества кода.

Как включить поддержку TypeScript в существующее SAPUI5 JavaScript-приложение

1. Настройка окружения

Убедитесь, что используете UI5 Tooling, и добавьте поддержку TypeScript через ui5-tooling-modules:

package.json:

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

tsconfig.json
Создайте файл tsconfig.json в корне проекта:

{
  "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 и checkJs: false позволяют компилятору TypeScript понимать JavaScript, но не валидировать его, что идеально для гибридного режима.

2. Структура проекта

Разделите код логически:

/webapp
  /controller
    LegacyController.controller.js        // старый код
  /model
  Component.js

/src
  /controller
    NewFancyController.ts                 // новый TS код
  /types
    sap-ui.d.ts                           // типы для SAPUI5 (если нужны)

src — папка для нового TypeScript-кода
webapp — папка для legacy-кода и артефактов сборки

При сборке src транслируется в webapp, и оба типа файлов работают вместе.

3. Взаимодействие между JS и TS

Использовать TS из JS:
TS-классы можно импортировать в JS, если правильно указать namespace и использовать sap.ui.define.
Например, src/controller/NewFancyController.ts:

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

После компиляции файл появится как webapp/controller/NewFancyController.js и может использоваться как обычный UI5-контроллер.

Использовать JS из TS:
В TypeScript-классе можно использовать существующие JS-классы:

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

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

Для новых проектов

Рекомендуется использовать генератор:

npm install -g yo @sap/generator-fiori
yo @sap/fiori

В мастере выберите TypeScript.
Генератор создаст корректную структуру, конфиги и скрипты для сборки.

Пример контроллера на TypeScript

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);
  }
}

Особенности и подводные камни

Namespace: UI5 ожидает определённую структуру путей и неймспейсов. Например, если у вас webapp/controller/App.controller.js, то в manifest/view указывается your.namespace.controller.App.
Типы: Типы UI5 покрывают только публичные API. Для нестандартных расширений может понадобиться declare module.
this: В TypeScript классы UI5-контроллеров наследуются от базовых классов, и this всегда типизирован.
Сборка: Не забывайте компилировать TypeScript в JavaScript перед деплоем.