共计 2554 个字符，预计需要花费 7 分钟才能阅读完成。
我有下列这段基于 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.helloworld
type: application
framework:
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 的原创文章，尽在：” 汪子熙 ”:
