跳转到内容
技术文章
作者简介照片Wouter Lemaire

我在UI5–安装项目中使用TypeScript的第一次经验

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

在我的第一篇博文中,我首先介绍了什么是TypeScript、如何开始以及我面临的挑战://www.hncdgy.com/2021/11/19/my-first-experience-with-typescript-in-ui5-introduction/

在这篇博文中,我将分享我是如何开始我的演示项目的,我将在这篇博文系列中作为一个例子。我将生成一个TypeScript UI5项目,添加Fiori工具,并将其连接到northwind服务作为演示用途。

您可以观看此视频或继续阅读以下步骤:

生成项目

为了生成项目,我使用easy UI5 yeoman生成器。可以使用以下命令安装此命令:

npm安装-g yo发电机-easy-ui5

安装此发电机后,您可以键入“yo”以获取所有已安装发电机的列表:

当您选择“Easy UI5”时,它将提供UI5生成器的列表:

“generator-ui5-ts-app”是类型脚本生成器。

填写所有问题,UI5中的第一个打字脚本将为您生成

得益于简易UI5生成器,您可以在UI5中立即启动并运行TypeScript。多亏了马吕斯·奥伯特!

与“普通”UI5项目相比,生成器附带了额外的配置,以支持TypeScript。您会注意到的一点是,它附带了更多用于构建和启动应用程序的脚本。

构建脚本仍将构建完整的应用程序,但将首先将TypeScript编译为JavaScript并将其放入webapp文件夹中。如果没有,它将创建一个webapp文件夹。之后,它将像我们习惯的那样在webapp文件夹上运行UI5 build命令。除此之外,生成器还为自包含的构建提供脚本。因此,我们现在有5个构建脚本

与启动脚本类似,要在本地运行,必须将TypeScript代码编译为webapp文件夹中的JavaScript。正在本地提供服务的是webapp文件夹。“watch:ts”脚本确保我们总能在浏览器中看到TypeScript的最新更改。简单的刷新无法完成这项工作,每次更改TypeScript中的代码时,都需要将其编译为JavaScript。“start:ui5”将用于webapp文件夹,其中包含已编译的JavaScript代码。

运行“npm start”将并行启动两个脚本。

该项目还附带了一些附加功能。这是因为build:ts和watch:ts使用babel将TypeScript编译为JavaScript。它需要babel cli、core和带有预设类型脚本的预设环境。预设也用于巴别塔配置:

其次,它需要ui5类型在IDE中为您提供自动完成功能:“@openui5/ts types esm”,在tsconfig.json中配置:

依赖性:

添加fiori工具

我还将fiori工具添加到我的项目中,以配置我的后端服务。还有其他UI5工具扩展也可用于此,您可以在此处找到完整列表:https://ui5-community.github.io/ui5-ecosystem-showcase/

为什么我在这种情况下使用Fiori工具?它完成了任务并提供SAP支持

安装Fiori工具作为一种设备:

sap/ux-ui5-D下的npm i

将Fiori工具作为UI5依赖项注册到UI5工具:

配置北风服务

使用ui5.yaml文件中的fiori工具将代理配置添加到“services.odata.org”:

服务器:customMiddleware:-名称:fiori tools proxy afterMiddleware:压缩配置:ignoreCertError:false#如果设置为true,将忽略证书错误。例如,将接受自签名证书后端:-路径:/v2 url:https://services.odata.org/

将northwind V2 OData服务的路径作为manifest.json中的数据源添加:

“数据源”:{“Northwind.svc”:{“uri”:“/V2/(S(mo4mpsdbi0fygmzhfv5ik5gf))/OData/OData.svc/”,“类型”:“OData”,“设置”:{“odataVersion”:“2.0”,“localUri”:“localService/metadata.xml”}

使用manifest.json中的Northwind数据源定义主模型:

“”:{“数据源”:“Northwind.svc”,“类型”:“sap.ui.model.odata.v2.ODataModel”,“设置”:{“defaultOperationMode”:“服务器”,“defaultBindingMode”:“双向”,“defaultCountMode”:“无”},“预加载”:false}

UI5项目已经为下一步使用TypeScript开发UI5做好了准备!

通过运行npm start,您已经可以看到它的外观

指定标签

      2评论
      你一定是登录评论或回复帖子。
      作者简介照片西蒙·霍尔多夫
      西蒙·霍尔多夫

      非常好的阅读,非常感谢!

      作者简介照片马吕斯·奥伯特
      马吕斯·奥伯特

      棒极了!

      谢谢你为TS应用程序提供的积分,但实际上他们都去了彼得·穆西.

      Baidu