SAP UI5 的 TypeScript 实践

JerryWang_汪子熙 - 2022-02-17 03:37:06

TypeScript 是 JavaScript 的超集，它为语言添加了可选的静态类型。它带有一个编译器，可以将 TypeScript 代码转换为 JavaScript，并在 JavaScript 运行的任何地方运行它，浏览器，NodeJS 等等。最大的变化是 TypeScript 自带了 Types。同时，这使得开发像您在 JavaScript 中可能习惯的通用代码变得更加困难，因为它是无类型的。

TypeScript 的目标是在我们的 IDE 中提供更好的集成，以帮助我们更早地发现错误。TypeScript 是 JavaScript 的扩展，用于提供类型信息，并通过类型检查和在许多支持代码编辑器（代码完成、内联文档等）中提供代码辅助来帮助进行错误检测。浏览器不能直接执行 TypeScript，需要一个转译步骤。

UI5 中的 TypeScript 是什么？ UI5 是我们用来创建 UI5 应用程序的框架/SDK，也称为 Fiori 应用程序。当您使用框架、库或 SDK 构建应用程序时，应使用 TypeScript 构建或提供定义文件 (d.ts) 以支持 TypeScript。从 2021年 4 月开始，SAP 提供 UI5 的 TypeScript 定义文件。这些文件允许我们在 UI5 中使用 TypeScript！

UI5 使用 JSDoc 信息来生成 TS 定义文件。

UI5 为 UI5 API 提供生成的类型定义，让 TypeScript 理解所有涉及的类型，因此它可以完成它的工作。为 OpenUI5 和 SAPUI5 提供了这些定义，每个都有两种不同的风格。两种口味分别是：

遗留类型定义（“ts-types”）允许（但不鼓励）使用全局对象，如 sap.ui.Button。它们不再是我们关注的焦点并且得到的支持较少，但旧的应用程序项目可能仍然需要它们。新的类型定义（“ts-types-esm”）需要将依赖项加载为 ES 模块，例如 import Button from “sap/ui/Button”，鼓励使用现代 JavaScript 语言功能。

使用 TypeScript 开发的 SAP UI5 应用，在浏览器中的调试也没有任何障碍。

直接在 Chrome 开发者工具的 TypeScript 代码里设置断点：