我有下列这段基于 ES6 的 SAP UI5 代码，应用 JavaScript 编写而成：

import UIComponent from "sap/ui/core/UIComponent";/** * @namespace ui5.typescript.helloworld */export default class Component extends UIComponent {    multiply(x, y) {        return x * y;    }}

能够看到外面还是有很多基于 ES6 的语法，比方 class, extends 等关键字。

上面咱们应用工具将这段代码转换成传统的 JavaScript 代码。

应用上面的命令行增加依赖：

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save-dev @babel/preset-typescript babel-preset-transform-ui5

在 ui5 我的项目根目录新建一个文件 .babelrc.json，这个文件通知 babel 须要具体执行的工作。

{    "ignore": [        "**/*.d.ts"    ],    "presets": [        "transform-ui5",        "@babel/preset-typescript"    ]}

应用上面的命令行触发 babel 构建：

npx babel src --out-dir webapp --extensions ".ts,.js"

咱们须要明确容许 *.ts 文件，因为 Babel 默认不解决 TypeScript 文件。

后果是一个带有 Component.js 文件的 webapp 文件夹，该文件是从 TypeScript 转换的，也转换为经典的 UI5 代码。

关上这个文件能够看到：模块导入被经典的 sap.ui.define(...) 替换，“Component”类当初通过调用 UIComponent.extend(...) 来定义：

sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {  /**   * @namespace ui5.typescript.helloworld   */  const Component = UIComponent.extend("ui5.typescript.helloworld.Component", {    multiply: function _multiply(x, y) {      return x * y;    }  });  return Component;});

尽管不是严格要求，但应用 linter 查看咱们的代码是有意义的。 当增加一些插件时，风行的“ESLint”工具也能了解 TypeScript。 它是 lint TypeScript 代码的举荐工具。

所以让咱们增加 ESLint 和这些插件作为开发依赖。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

ESLint 须要被告知要应用哪些插件以及代码应该具备哪种 JavaScript 语言级别，因而在我的项目根目录中应用以下设置创立一个 .eslintrc.json 文件：

{    "env": {        "browser": true,        "es6": true,        "node": true    },    "extends": [        "eslint:recommended",        "plugin:@typescript-eslint/recommended",        "plugin:@typescript-eslint/recommended-requiring-type-checking"    ],    "parser": "@typescript-eslint/parser",    "parserOptions": {        "project": ["./tsconfig.json"],        "sourceType": "module"    },    "plugins": [        "@typescript-eslint"    ]}

当初能够执行命令行 npx eslint 来进行语法查看了：

npx eslint

这里不应该有任何输入（这意味着：没有谬误），然而如果咱们向 Component.ts 引入语法错误，则查看将报错，例如 短少“乘法”函数的返回类型，它将显示正告。

当初咱们能够在 src 文件夹里进行基于 TypeScript 的 SAP UI5 的开发了。

  • npx tsc
  • npx babel src --out-dir webapp --extensions ".ts,.js"

最初装置 SAP UI5 cli 工具来部署和启动这个 SAP UI5 利用：

npm install --save-dev @ui5/cli

新建一个 ui5.yaml 文件，保护如下内容：

specVersion: "2.3"metadata:  name: ui5.typescript.helloworldtype: applicationframework:  name: OpenUI5  version: "1.97.0"  libraries:    - name: sap.m    - name: sap.ui.core    - name: sap.ui.unified    - name: themelib_sap_fiori_3

进行最终的构建：

npx babel src --out-dir webapp --source-maps true --extensions \".ts,.js\" --copy-files

npx ui5 serve -o index.html

稍稍解释一下 npx babel 命令的一些参数。

--source-maps true：将原始 TypeScript 源代码增加到转译的 JavaScript 文件旁边的 *.js.map 文件中，并将指向这些 .map 文件的指针增加到 JS 文件的开端。 浏览器理解这一点，因而即便它们实际上在后盾运行已编译的 JavaScript 代码，它们也能够在调试器中启用对原始 TypeScript 代码的单步执行。 请留神，这形容了 webapp 目录中的转译输入； 优化 UI5 构建到 dist 目录中删除了这些源映射。

--copy-files 确保非 TypeScript 文件也从“src”复制到“webapp”，例如 视图 XML 文件。

胜利启动：

更多Jerry的原创文章，尽在："汪子熙":