大约在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，您已经可以看到它的外观