如何在SAPUI5中使用TypeScript并解决两种模块系统冲突

你当前通过全局变量桥接TS类和SAPUI5控制器的方案确实能跑起来，但确实存在模块系统分离、冗余代码多的问题。核心矛盾是TypeScript默认生成的模块代码和SAPUI5基于AMD（RequireJS）的模块系统不兼容，导致define not found或export not found的报错。我们可以通过调整TS编译配置和模块写法，让两者原生协作，完全消除全局变量的依赖。

关键思路：对齐模块规范 #

SAPUI5底层基于AMD模块系统（通过RequireJS实现），所以我们只需要让TypeScript生成符合AMD规范的代码，就能和SAPUI5的模块加载器无缝协作，不需要额外的桥接层。

步骤1：配置TypeScript编译参数（tsconfig.json） #

创建或修改tsconfig.json，让TS输出AMD格式的代码，并映射SAPUI5的依赖路径：

{
  "compilerOptions": {
    "target": "ES5", // 兼容SAPUI5支持的浏览器
    "module": "AMD", // 生成AMD格式代码，匹配SAPUI5的模块系统
    "moduleResolution": "Node",
    "strict": true, // 开启严格类型检查
    "esModuleInterop": true, // 处理模块导出兼容问题
    "skipLibCheck": true,
    "outDir": "./testApp/controller/tsclasses", // 编译后的JS输出到对应目录
    "baseUrl": "./",
    "paths": {
      "jquery": ["./resources/sap/ui/thirdparty/jquery"], // 映射到SAPUI5内置的jQuery
      "sap/*": ["./resources/sap/*"] // 可选：映射所有SAPUI5模块，获得完整类型提示
    }
  },
  "include": ["./testApp/controller/tsclasses/**/*.ts"]
}

可选优化：安装@openui5/ts-types包，获得SAPUI5完整的API类型定义，不需要再用declare var sap: any。

步骤2：重写TypeScript控制器类 #

去掉冗余的namespace，直接导出类，并且正确继承SAPUI5的Controller（如果安装了类型定义，会有智能提示）：

import * as $ from "jquery";
import Controller from "sap/ui/core/mvc/Controller";

export default class Home extends Controller {
  public onInit(): void {
    alert('here');
    const windowWidth = $(window).width();
    console.log("Window width:", windowWidth);
  }
}

步骤3：修改SAPUI5控制器，直接依赖TS模块 #

不再依赖全局变量，通过sap.ui.define直接引入编译后的TS模块：

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "./tsclasses/Home" // 指向编译后的JS文件路径
], function(Controller, HomeController) {
  "use strict";

  return Controller.extend("TestApp.controller.Home", new HomeController());
});

步骤4：简化index.html加载逻辑 #

去掉单独加载TS模块的脚本，让SAPUI5的组件初始化流程自动处理依赖加载：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Test App</title>
  <script src="/resources/sap/ui/thirdparty/require.js"></script>
  <script src="/resources/sap-ui-core.js" 
    data-sap-ui-theme='sap_bluecrystal' 
    data-sap-ui-libs='sap.m,sap.ui.commons,sap.ui.table' 
    data-sap-ui-bindingSyntax='complex' 
    data-sap-ui-resourceroots='{"TestApp": "/testApp"}'>
  </script>
  <script>
    sap.ui.getCore().attachInit(function () {
      sap.m.Shell({
        title: "Test App",
        showLogout: true,
        appWidthLimited: false,
        app: new sap.ui.core.ComponentContainer({
          height: "100%",
          name: "TestApp"
        })
      }).placeAt("content");
    });
  </script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>

步骤5：保留原有视图和组件配置 #

你的Component.js、App.view.xml、Home.view.xml可以保持不变，路由和视图渲染逻辑不受影响。

为什么这个方案可行？ #

• TS编译后的AMD模块完全符合SAPUI5的sap.ui.define规范，RequireJS可以直接加载，不需要额外的全局变量桥接。
• 通过tsconfig.json的paths配置，让TS识别SAPUI5的内置依赖（比如jQuery），避免加载外部版本，同时获得类型检查支持。
• 模块依赖关系清晰，后续维护成本更低，完全保留了TypeScript的类型检查和智能提示优势。

内容的提问来源于stack exchange，提问作者Mark Rabjohn