这是Jerry在2022年的第3篇原创文章，也是这篇公众号的第371篇原创文章。近年来，前端开发领域发展迅速，各种新技术、新框架、新工具、新开发理念层出不穷。另一方面，前端应用的规则和复杂度也大大增加。虽然JavaScript已经成为Web前端开发最常用的编程语言，但JavaScript在诞生之初并不是为了开发大型复杂的前端应用而设计的。JavaScript作为一种动态类型的编程语言，缺乏类型检查的支持，所以很多代码问题要到运行时才能发现，这降低了项目开发的效率，使其无法开发复杂的前端应用。正因为如此，越来越多的现代前端开发框架，如Angular、React和Vue，都引入了对TypeScript的支持。TypeScript出身名门，是微软于2012年推出的静态类型编程语言，是JavaScript的超集，可以编译成JavaScript执行。TypeScript最大的特点是静态类型和在语言层面对ECMAScript6标准的原生支持。基于TypeScript开发的前端应用可以在编译时进行类型和语法检查，提高了代码的健壮性和可预测性，降低了项目维护成本。TypeScript对模块、命名空间和面向对象的原生支持也有助于降低大型复杂前端应用程序的项目组织和管理成本。让Web开发者如虎添翼的是，现代流行的Web开发工具，如VisualStudioCode、WebStorm、Atom等，都对TypeScript提供了非常完善的支持。TypeScript在SAP产品开发中的成功案例以Jerry的SAP电商云SpartacusUI开发团队的工作为例。到2022年1月，Spartacus最新版本为4.3.0：https://github.com/SAP/spartacus中有效代码总数超过35万行，ts和html文件数量超过5000个。Spartacus选择的开发语言是TypeScript。得益于上面提到的TypeScript的诸多优势，我们团队的开发效率并没有因为应用本身的复杂性而降低。作为又一款诞生十余年的企业级前端应用开发框架，SAPUI5也将从2021年开始引入对TypeScript的支持。今天，这项支持工作仍在进行中，可以获取最新进展来自SAP官网：https://sap.github.io/ui5-typ...本文以一个实际的HelloWorld级别的SAPUI5应用，描述了SAPUI5如何引入对TypeScript的支持。创建一个空文件夹ts-ui5。因为我们需要使用npm来安装TypeScript开发相关的依赖，所以首先使用npminit创建一个空的Node.js项目。此命令行将生成一个默认的package.json文件。新建一个src文件夹，在里面放一个Component.ts文件，代码如下：在这段代码中，我新建了一个Component类（第6行），它的父类是SAPUI5标准的UIComponent。这里先领略下TypeScript静态类型检查的风格：Vis??ualStudioCode报错找不到模块sap/ui/core/UIComponent及其类型定义。这是一个预料之中的错误，因为TypeScript本身无法识别SAPUI5的那套类型定义，所以我们需要手动将SAPUI5框架的完整类型定义体系导入到我们的TypeScript项目中。使用如下命令行导入SAPUI5为TypeScript提供的类型定义：npminstall--save-devtypescript@types/openui5@1.97.0安装完成后，上述编译错误消失。我们通过命令行npminstall为SAPUI5安装了所谓的DefinitelyTyped（外部类型定义）。SAPUI5开发团队基于SAPUI5JSDoc生成了一套TypeScript可以识别的外部类型定义，使得TypeScript可以遵循这些类型定义，在编译时进行静态类型检查。SAPUI5开发团队为TypeScript所做的外部类型定义发布在以下可公开访问的Github存储库中：https://github.com/Definitely...在npminstall之后，这些类型定义文件是d.ts格式的该文件的文件格式出现在项目的node_modules\@types\openui5文件夹中。这些文件也是TypeScript对SAPUI5应用程序代码进行语法检查的基础。因为浏览器不能直接运行TypeScript，所以我们需要使用TypeScript编译器tsc将Component.ts编译成JavaScript代码。为TypeScript编译器创建配置文件tsconfig.json。该文件的目的是提供更详细的编译选项。例如维护target字段为es2015，可以指定编译后的JavaScript文件支持es2015的语法特性，编译后的输入目录为src，输出目录为dist。ES2015是ECMAScript6的第一个版本，于2015年6月发布，正式名称为ECMAScript2015标准，简称ES2015。维护好tsconfig.json文件后，执行命令行npxtsccompile。编译成功后会在dist文件夹下生成一个新的Component.js文件，其JavaScript语法支持ES2015特性。对于很多SAPUI5开发者来说，他们可能更习惯使用传统的UIComponent.extend("ui5.typescript.helloworld.Component")方法来定义Components，而不是下面展示的基于ES2015的extends语法。另一方面，并??不是所有的浏览器都支持ES2015，我们也不应该强迫客户将浏览器升级到支持ES2015的版本：所以我们可以使用工具Babel将ES2015JavaScript代码翻译成低级版本的传统JavaScript代码（如ES5）。使用命令行安装Babel转译器的相关依赖：npminstall--save-dev@babel/core@babel/cli@babel/preset-envnpminstall--save-dev@babel/preset-typescriptbabel-preset-transform-ui5还为Babel创建了一个配置文件.babelrc.json，通过presets数组中的记录告诉它翻译操作的细节：执行以下命令行使用Babel进行JavaScript翻译操作，指定输出folderaswebapp:npxbabelsrc--out-dirwebapp--extensions".ts,.js"翻译完成后，在输出文件夹webapp中出现了一个Component.js，它的源代码是SAPUI5开发者熟悉的也使用UIComponent.extend的传统语法。SAPUI5开发团队提前准备了一个Github仓库供大家学习，里面有一个用TypeScript开发的SAPUI5HelloWorld应用的源码：https://github.com/SAP-sample...我们把所有内容复制过来在仓库的src文件夹到本地src文件夹。下图是用TypeScript开发的AppController代码：（1）从sap.ui.core.d.ts提供的外部类型定义中导入Controller类定义（2）定义一个新的App类，继承自SAPUI5标准Controller类（三）重载Controller类定义的两个public方法。你认为TypeScript这种纯面向对象的代码编写方式比传统的ES5JavaScript代码更具可读性吗？得益于SAPUI5团队提供的外部类型定义，我们现在可以在VisualStudioCode等本地开发环境中享受到原本只在SAPWebIDE和SAPBusinessApplicationStudio等在线开发环境中才支持的语法检查和代码。自动完成提示等功能：开发完TypeScript后，使用开源的SAPUI5Tools（@ui5/cli）在本地构建启动。为此，首先安装SAPUI5工具的依赖项：npminstall--save-dev@ui5/cli另外我们需要为@ui5/cli创建一个配置文件ui5.yaml以提供特定的构建选项。使用如下命令行将src文件夹中的TypeScript代码通过Babel转换为传统的JavaScript代码，并放置在输出文件夹webapp中。npxbabelsrc--out-dirwebapp--source-mapstrue--extensions\".ts,.js\"--copy-files上面命令行中两个选项的解释：source-mapstrue:generate.map源映射文件，以便我们可以直接在ChromeDevTools中设置断点和单步执行原始TypeScript代码。浏览器实际执行的是babel转译后的JavaScript代码。通过这些.map映射文件，Chrome开发者工具会自动帮我们将当前执行的JavaScript代码映射到原来的TypeScript代码。copy-files：对于所有后缀不是.ts的文件，直接从src文件夹复制到webapp文件夹，比如本项目中的所有xml视图文件。babel生成的.map源码映射文件：最后通过命令行在本地启动SAPUI5应用：npxui5serve-oindex.html外观如下：在Chrome开发者工具的Sources选项卡中打开后，what你看到的是原始的TypeScript文件，可以直接设置断点，一步步调试：SAPUI5对TypeScript支持的最新进展，请继续关注SAP官网：https://sap.github。io/ui5-typ...感谢阅读。更多Jerry原创文章在这里：《王子熙》：
