共计 4163 个字符，预计需要花费 11 分钟才能阅读完成。
这是 Jerry 2022 年第 3 篇原创文章，也是本公众号第 371 篇原创文章。
近年来，前端开发畛域迅猛发展，各种新技术、新框架、新工具和新的开发理念，层出不穷。另一方面，前端利用的规定和复杂度也大大增加。尽管 JavaScript 曾经成为 Web 前端开发最广泛应用的编程语言，但 JavaScript 诞生之初，并不是为了开发超大规模的简单前端利用而设计的。作为一门动静类型编程语言，JavaScript 不足类型查看反对，使得许多代码问题直至运行时能力被发现，升高了我的项目开发效率，使其在开发简单前端利用时显得力不从心。
正因如此，越来越多的古代前端开发框架，比方 Angular，React 和 Vue，都引入了对 TypeScript 的反对。
TypeScript 出身名门，是微软 2012 年推出的一门动态类型编程语言，属于 JavaScript 的超集，能够编译为 JavaScript 执行。
TypeScript 的最大特点就是动态类型和从语言层面对 ECMAScript 6 规范的原生反对。
基于 TypeScript 开发的前端利用，在编译期就能进行类型和语法查看，进步了代码的健壮性和可预测性，升高了我的项目保护老本。TypeScript 对模块、命名空间和面向对象的原生反对，也有助于升高大型简单前端利用的我的项目组织和治理老本。
让 Web 开发人员锦上添花的是，古代风行的 Web 开发工具比方 Visual Studio Code，WebStorm，Atom 等等，均对 TypeScript 提供了十分欠缺的反对。
TypeScript 在 SAP 产品开发中的一个胜利案例
以 Jerry 所在 SAP 电商云 Spartacus UI 开发团队的工作为例，到 2022 年 1 月，Spartacus 最新的版本为 4.3.0：
https://github.com/SAP/spartacus
总共无效代码数曾经超过 35 万行，ts 和 html 文件个数超过 5000 个。
Spartacus 抉择的开发语言正是 TypeScript，归功于前文所述 TypeScript 的诸多长处，咱们团队的开发效率丝毫没有因为利用自身的复杂度而升高。
作为另一个诞生曾经十余年的企业级前端利用开发框架，SAP UI5，也从 2021 年开始，引入了对 TypeScript 的反对。时至今日，这一反对工作依然在进行中，最新进展能够从 SAP 官网取得：
https://sap.github.io/ui5-typ…
本文通过一个理论的 Hello World 级别的 SAP UI5 利用，介绍 SAP UI5 如何引入对 TypeScript 的反对。
新建一个空的文件夹 ts-ui5. 因为咱们要借助 npm 来装置和 TypeScript 开发相干的依赖，所以首先应用 npm init 创立一个空的 Node.js 我的项目。该命令行会生成一个默认的 package.json 文件。
新建一个 src 文件夹，外面搁置一个 Component.ts 文件，代码如下：
在这段代码里，我创立了一个新的 Component 类 (第 6 行)，其父类为 SAP UI5 规范的 UIComponent.
这里咱们首次领略了 TypeScript 动态类型查看的格调：Visual Studio Code 埋怨找不到 sap/ui/core/UIComponent 这个 module 以及其类型定义。
这正是意料之中的谬误，因为 TypeScript 自身是无奈辨认 SAP UI5 那一套类型定义的，为此咱们须要手动将 SAP UI5 框架残缺的类型定义零碎，导入咱们的 TypeScript 我的项目。
应用如下的命令行导入 SAP UI5 为 TypeScript 提供的类型定义：
npm install –save-dev typescript @types/openui5@1.97.0
装置完之后，上述编译谬误就隐没了。
咱们通过命令行 npm install 为 TypeScript 装置了针对 SAP UI5 所谓的 DefinitelyTyped(内部类型定义). SAP UI5 开发团队基于 SAP UI5 JSDoc 生成了一套 TypeScript 可能辨认的内部类型定义，这样 TypeScript 能够根据这些类型定义，进行编译期的动态类型查看。
SAP UI5 开发团队为 TypeScript 制作的内部类型定义公布在如下的公网可拜访的 Github 仓库里：
https://github.com/Definitely…
npm install 之后，这些类型定义文件，以 d.ts 格局的文件模式，呈现在工程的 node_modules\@types\openui5 文件夹内。这些文件也是 TypeScript 对 SAP UI5 利用代码进行语法查看的根底。
因为浏览器无奈间接运行 TypeScript，因而咱们须要应用 TypeScript 的编译器 tsc，将 Component.ts 编译成 JavaScript 代码。
为 TypeScript 编译器创立一个配置文件 tsconfig.json, 这个文件的作用是提供更具体的编译选项，比方通过将 target 字段保护成 es2015，从而指定编译进去的 JavaScript 文件反对 es2015 的语法个性，编译的输出目录为 src，输入目录为 dist.
ES2015 是 ECMAScript 6 的第一个版本，于 2015 年 6 月公布，正式名称为 ECMAScript 2015 规范，简称为 ES2015.
tsconfig.json 文件维护好之后，执行命令行 npx tsc 进行编译。
胜利编译之后，在文件夹 dist 里生成了一个新的 Component.js 文件，其 JavaScript 语法反对 ES2015 个性。
对于很多 SAP UI5 开发人员来说，可能更习惯应用传统的 UIComponent.extend(“ui5.typescript.helloworld.Component”) 形式来定义 Component，而不是下图基于 ES2015 的 extends 语法。
另一方面，并不是所有的浏览器都反对 ES2015，咱们也不应该强制客户降级其浏览器到可能反对 ES2015 的版本：
因而咱们能够应用 Babel 这个工具，将 ES2015 版本的 JavaScript 代码，转译成低版本的传统 JavaScript 代码 (比方 ES5).
应用命令行装置 Babel 转译器的相干依赖：
- npm install –save-dev @babel/core @babel/cli @babel/preset-env
- npm install –save-dev @babel/preset-typescript babel-preset-transform-ui5
同样为 Babel 创立一个配置文件 .babelrc.json，通过 presets 数组里的记录，通知其执行转译操作的具体细节：
执行下列命令行，应用 Babel 进行 JavaScript 的转译操作，输入文件夹指定为 webapp：
npx babel src –out-dir webapp –extensions “.ts,.js”
转译实现后，输入文件夹 webapp 里呈现了一个 Component.js, 其源代码就是 SAP UI5 开发人员相熟的 UIComponent.extend 这种传统语法了。
SAP UI5 开发团队曾经当时筹备好了一个用于学习的 Github 仓库，外面蕴含了采纳 TypeScript 开发好的一个 SAP UI5 Hello World 利用的源代码：
https://github.com/SAP-sample…
咱们把该仓库的 src 文件夹里的全部内容，拷贝到本地 src 文件夹。
下图是应用 TypeScript 开发的 App Controller 代码：
(1) 从 sap.ui.core.d.ts 提供的内部类型定义里，导入 Controller 类定义
(2) 定义一个新的 App 类，继承自 SAP UI5 规范的 Controller 类
(3) 重载 Controller 类定义的两个 public 办法
是不是感觉 TypeScript 这种纯正面向对象的代码编写形式，可读性要优于传统 ES5 的 JavaScript 代码呢？
归功于 SAP UI5 团队提供的内部类型定义，此刻咱们就能够在 Visual Studio Code 这种本地开发环境里，享受到本来只有在 SAP WebIDE 和 SAP Business Application Studio 等在线开发环境里能力反对的语法检查和代码主动实现提醒等性能了：
TypeScript 开发完结之后，应用开源的 SAP UI5 Tools(@ui5/cli) 这个工具进行构建和本地启动。
为此，首先装置 SAP UI5 Tools 的依赖：
npm install –save-dev @ui5/cli
同样咱们须要为 @ui5/cli 创立一个配置文件 ui5.yaml，提供具体的构建选项。
应用下列命令行，将 src 文件夹里的 TypeScript 代码，通过 Babel 转译成传统的 JavaScript 代码，搁置于输入文件夹 webapp 内。
npx babel src –out-dir webapp –source-maps true –extensions \”.ts,.js\” –copy-files
上述命令行里两个选项的解释：
- source-maps true: 生成 .map 源码映射文件，这样咱们就能够间接在 Chrome 开发者工具里，给原始的 TypeScript 代码设置断点并单步调试。浏览器理论执行的是 babel 转译后的 JavaScript 代码。通过这些 .map 映射文件，Chrome 开发者工具会主动帮忙咱们将以后执行到的 JavaScript 代码映射成原始的 TypeScript 代码。
- copy-files：对于所有后缀非 .ts 的文件，间接从 src 文件夹拷贝到 webapp 文件夹，比方这个我的项目里所有的 xml view 文件。
babel 生成的 .map 源码映射文件：
最初通过命令行本地启动这个 SAP UI5 利用：
npx ui5 serve -o index.html
外观如下：
Chrome 开发者工具 Sources 标签页里关上后，看到的是原始的 TypeScript 文件，能够间接设置断点，单步调试：
对于 SAP UI5 对 TypeScript 反对工作的最新进展，请继续关注 SAP 官网：https://sap.github.io/ui5-typ…
感激浏览。
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
