跳到内容
技术文章
作者的个人资料照片

我在UI5中第一次使用TypeScript的经历——介绍

大约在4月,SAP第一次宣布了对UI5的TypeScript支持。从那时起,我就尽可能在每个新的UI5项目中使用它。现在是时候在这个系列博文中分享我在UI5中使用TypeScript的经验了。

关于TypeScript支持的第一次社区访问:

您可以观看以下视频:

或者,如果你更喜欢阅读,请继续阅读这篇博文:

UI5中的typescript是什么

让我从头开始,什么是Typescript?你们中的大多数人可能已经听说过TypeScript。TypeScript已经存在一段时间了,在JavaScript世界中并不是什么新鲜事物。然而,你使用的框架或库必须支持TypeScript,这在今年年初之前对UI5来说是不适用的。

TypeScript是JavaScript的超集,它为语言添加了可选的静态类型。它附带了一个编译器,可以将TypeScript代码转换成JavaScript,并在JavaScript运行的任何地方运行它,浏览器、NodeJS、... .最大的变化是TypeScript随类型而来。When you are new to JavaScript or UI5, this will be closer to other languages like Java, C# and somehow even ABAP . At the same time this makes it harder to develop generic code like you might be used to in JavaScript because it is untyped.

TypeScript的目标是在IDE中提供更好的集成,帮助你更早地捕获错误。

如果这对你来说没有意义,之前已经在很多地方解释过了:

你也可以自己试试:https://www.typescriptlang.org/play

UI5中的TypeScript是什么?UI5是一个框架/SDK,我们用来创建UI5应用,也被称为Fiori应用。当你使用框架、库或SDK来构建应用时,应该使用TypeScript构建,或者提供定义文件(d.ts)来支持TypeScript。从今年4月开始,SAP为UI5提供了TypeScript定义文件。这些文件允许我们在UI5中使用TypeScript !

UI5使用JSDoc信息来生成TS定义文件。关于TypeScript在UI5中的更多细节已经由Peter Muessig很好地解释过了://www.hncdgy.com/2021/07/01/getting-started-with-typescript-for-ui5-application-development/

Peter还在这个社区调用中解释了TypeScript对UI5的支持:https://www.youtube.com/watch?v=OuNMb9kPhTg&list=PLpQebylHrdh5XQts8bKoMUKexpun_YPvU

它也在UI5ers现场:https://www.youtube.com/watch?v=0notj9PPTho

如何开始

要真正开始使用你在UI5项目中的第一个TypeScript,建议你先学习TypeScript。TypeScript一般来说并不复杂,也不容易学习,它的基础知识对任何其他语言来说都很常见。用JavaScript中常用的方式编写更复杂的代码在TypeScript中可能会更难,因为它需要一直使用类型。在这种情况下,泛型类型的概念可能会对你有所帮助,我发现在使用TypeScript开发时,理解泛型类型非常重要。

为此,最好先学习一些教程或课程。我推荐的一门很棒的课程是Udemy上的“理解TypeScript - 2021版”:https://www.udemy.com/share/1013yQ3@f94FYMaIwd5er1akskrQdHTYpQrDKdDpWvYqWvyqxTEk6SSnbyoxDXlYhBbxxMkI/

你也可以从SAP已经提供的例子中学到很多。当我开始用TypeScript做第一个项目时,我只有这个repo作为参考:https://github.com/SAP-samples/ui5-cap-event-app/tree/typescript/packages/ui-form

同时,你也有这个HelloWorld例子:https://github.com/SAP-samples/ui5-typescript-helloworld

Peter Muessig已经分享了一篇关于如何在UI5中开始使用TypeScript的博文://www.hncdgy.com/2021/07/01/getting-started-with-typescript-for-ui5-application-development/

除此之外,我们还有Andreaz Kunz在UI5con上的演讲,他在2021年的UI5con AIR上对如何在UI5中使用TypeScript做了很好的介绍。你可以在youtube上找到回放:https://www.youtube.com/watch?v=5jfHNKQ48w8

有了所有提到的资源,我可以用TypeScript启动我的第一个UI5项目。

在开始之前,还有一件事你需要知道,在使用TypeScript时,SAP Web IDE不是一个选项。它甚至变得更好;你可以选择任何你喜欢的IDE !使用UI5工具+ Fiori工具,大多数工具都是通过NPM提供的,而NPM独立于你的IDE。随着Fiori工具也带来了生成器/模板作为vscode插件,这只对支持vscode插件的IDE可用。

因此,我更喜欢在UI5的TypeScript项目中使用VScode。可能发生的情况是,由于公司的政策,很难把所有东西都安装到你的电脑上。在这种情况下,Business Application Studio是一个很好的选择。它为你的UI5开发提供了一个预先安装的设置。

Lena Hammerer已经发表了一篇关于如何为UI5设置VSCode环境的博文://www.hncdgy.com/2021/10/15/getting-ready-for-ui5-development-with-visual-studio-code/

这个工具主题让我想起了我在twitter上注意到的一个有趣的迷因:

学分:https://twitter.com/mianbsp

刚开始的时候,还没有可用的TypeScript模板。因此,我必须将生成的模板转换为TypeScript版本。与此同时,还没有一个官方的UI5 Typescript生成器/模板,但你在简单的UI5约曼生成器中有一个Typescript模板:https://github.com/SAP/generator-easy-ui5(这是基于HelloWorld的例子)

挑战

在UI5中开始使用TypeScript带来了一些挑战:

  • 由于简单的UI5,我们有一个可用的模板,但它仍然是相当空的。它附带了TypeScript所需的配置,而TypeScript已经很棒了!但是,我们仍然没有主-细节、工作列表等的模板。我们还遗漏了一些基本对象,如BaseController或formatters。也许我们在过去已经被可用的模板宠坏了
  • 缺少一些最佳实践/文档。我们有我上面提到的例子和所有其他资源,但没有正式的文档。
  • 并不是所有的UI5对象在定义文件中都有Type。许多对象只是作为任意对象返回。您必须为它创建一个类型并进行类型转换。
  • 在一开始,集成第三方库是不可能的。多亏了Volker,我注意到了Peter Muessig的例子:https://github.com/ui5-community/ui5-ts-shim-showcase
  • 集成了UI5库,你的库必须在TypeScript中或者提供TS定义文件。我们在一开始并没有真正的工具,所以使用可重用的代码重用我们的库并不是一个真正的选择。同时,Maricio设计了一个UI5任务,为UI5库生成TS定义文件:https://www.npmjs.com/package/ui5-task-dts-generator
  • 如何与类型打交道?如何最大限度地利用TypeScript,而不只是简单地把所有东西都变成any类型?
  • 我们如何用TypeScript来适应JavaScript的项目结构和开发方式?

由于缺乏实例和推荐,这并不容易。

最后,我不得不转换我的许多可重用代码,使之与TypeScript兼容。它还迫使我们做一些与我们习惯做的略有不同的事情。

在接下来的博客文章中,我将分享代码片段,以及如何设置你的项目,以充分受益于typescript!

指定的标签

      4评论
      你必须登录评论或回复一篇文章
      作者的个人资料照片Andreas Kunz
      安德烈亚斯•坎斯

      感谢你的精彩综述,Wouter,也感谢你的techhed会议,你把所有的事情都解释得很好!

      一个来自UI5方面的提示:开https://sap.github.io/ui5-typescript我们已经建立了中央入口点所有与TypeScript和UI5相关的文档和例子。也许这将有助于找到一个或另一个资源,这是迄今为止被错过的。

      一些支持自定义的新工具和示例控制发展在TypeScript中(在应用程序中或作为库中)将很快发布。我可以在这里向你汇报。下一个UI5ers生活会话也会有一个全面的TypeScript更新。

      再次感谢!

      安德烈亚斯

      作者的个人资料照片Andreas Kunz
      安德烈亚斯•坎斯

      当我写"很快"时,我是认真的。

      https://sap.github.io/ui5-typescript#how-to-develop-custom-controls-in-typescript现在有文档、示例项目和一个帮助控件开发的新工具的链接。

      控制库的开发计划很快将在https://github.com/SAP-samples/ui5-typescript-control-library进行演示。(注意我没有写“很快”?)等待批准,所以可能只是几天的事。

      作者的个人资料照片Andreas Kunz
      安德烈亚斯•坎斯

      现在,控件库示例也是公共的:https://github.com/SAP-samples/ui5-typescript-control-library

      作者的头像Lena Hammerer
      莉娜锻工

      很棒的介绍,Wouter,我也很喜欢视频版本!我最近一直在探索UI5中的TypeScript,所以当我面对你描述的同样的挑战时,这是非常相关的。期待本系列的下一篇文章

      Baidu