SAP UI5 的 TypeScript 实践

举报
汪子熙 发表于 2022/10/03 10:11:28 2022/10/03
【摘要】 TypeScript 是 JavaScript 的超集,它为语言添加了可选的静态类型。 它带有一个编译器,可以将 TypeScript 代码转换为 JavaScript,并在 JavaScript 运行的任何地方运行它,浏览器,NodeJS 等等。 最大的变化是 TypeScript 自带了 Types。同时,这使得开发像您在 JavaScript 中可能习惯的通用代码变得更加困难,因为它是...

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 代码里设置断点:

可以直接在 dev tools 里调试 TypeScript 代码。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。