新建一个文件夹 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的原创文章,尽在:"汪子熙"。