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

2022-02-15 19:02:03 阅读：170 来源： 互联网

标签：src TypeScript openui5 Component ts UI5 SAP types

新建一个文件夹 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 应用程序的一种方式。

如下图所示：

安装对应的依赖：

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 成功完成：

执行命令行：

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

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

但这并不是推荐的方式，况且采取这种方式生成的 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/**/*"
    ]
}

之后再次执行npx tsc 命令，即可顺利生成 Component.js.

更多Jerry的原创文章，尽在："汪子熙"。

标签：src,TypeScript,openui5,Component,ts,UI5,SAP,types
来源： https://www.cnblogs.com/sap-jerry/p/15897807.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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