使用 TypeScript 编写 SAP UI5 应用的准备工作

简介: 使用 TypeScript 编写 SAP UI5 应用的准备工作

新建一个文件夹 ui5-ts, 执行命令行 npm init -y 初始化:

新建一个 src 文件夹,里面存放一个 Component.ts 文件,源代码如下:

import UIComponent from "sap/ui/core/UIComponent";
/**
 * @namespace ui5.typescript.helloworld
 */
export default class Component extends UIComponent {
    public multiply(x : number, y : number) : number {
        return x * y;
    }
}

它是 TypeScript 代码,这意味着虽然大部分是纯 JavaScript,但它还包含变量、参数和函数返回值的类型声明,如“multiply”方法的定义所示。 我们马上将能够看到 TypeScript 编译将如何去除这些内容。


它是带有模块和类的“现代 JavaScript”代码,将在构建过程的进一步步骤中转换为经典的 UI5 代码。 这与 TypeScript 并没有真正的关系,但它是我们推荐的在任何时候都需要构建步骤时编写现代 UI5 应用程序的一种方式。


如下图所示:


4210aa9b0c1ff0e967bd70e5887502a8.png


安装对应的依赖:


npm install --save-dev typescript @types/openui5@1.97.0 @types/jquery@3.5.1 @types/qunit@2.5.4


当您开发 SAPUI5 应用程序时(即使用 OpenUI5 中不可用的控件库),请使用 @sapui5/ts-types-esm 类型而不是 @types/openui5 类型。


另一方面,@openui5/ts-types-esm 中的可用类型,它们与@types/openui5 有什么不同? 唯一的区别在于版本控制:虽然@openui5 命名空间中的类型与相应的 OpenUI5 版本完全同步,但 @types 命名空间中的类型遵循 DefinitiveTyped 版本控制,并且每个 OpenUI5 的次要版本只发布一次。 实际上,它不应该对我们使用的内容产生影响,但请注意,在 @types 命名空间中通常只有 …0 补丁版本可用。


SAPUI5 类型在 @types 命名空间中不可用。


我们安装具体版本,以确保类型定义与使用的 UI5 代码和随附的 jQuery 版本相匹配。


其他库的类型需要以相同的方式添加。


npm install 成功完成:

a620a8a5a732b06211a49c2d89602ce8.png



执行命令行:


npx tsc src/Component.ts


遇到错误消息:


node_modules/@types/openui5/sap.ui.core.d.ts:1890:13 - error TS2583: Cannot find name ‘Iterator’. Do you need to change your target library? Try changing the ‘lib’ compiler option to ‘es2015’ or later.


尝试执行这个命令:


npm install -D @types/node


7fbf00fa537fa787a8d8838b178b129e.png


之后 tsc 命令可以成功执行。


2e12f6ca05e74f56ced172e0aecea206.png


但这并不是推荐的方式,况且采取这种方式生成的 Component.js, 内容并不正确。


正确的做法是:新建一个 tsconfig.json 文件,维护如下的内容:

{
    "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "skipLibCheck": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "strict": true,
        "strictNullChecks": false,
        "strictPropertyInitialization": false,
        "rootDir": "./src",
        "outDir": "./dist",
        "baseUrl": "./",
        "paths": {
            "ui5/typescript/helloworld/*": [
                "./src/*"
            ]
        }
    },
    "include": [
        "./src/**/*"
    ]
}





相关文章
|
15天前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
2月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
4月前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
2天前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
|
4月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
8天前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
22 0
|
8天前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
16 0
|
8天前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
19 0
|
1月前
|
JavaScript 安全 前端开发
TypeScript中的枚举类型有哪些应用场景
【8月更文挑战第4天】TypeScript中的枚举类型有哪些应用场景
46 5
|
26天前
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
10 0