Preparations for writing SAP UI5 applications with TypeScript

Create a new folder ui5-ts, execute the command line npm init -y initialization:

Create a new src folder and store a Component.ts file in it. The source code is as follows:

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;
    }
}

It's TypeScript code, which means that while it's mostly pure JavaScript, it also contains type declarations for variables, parameters, and function return values, as shown in the definition of the "multiply" method. We'll soon be able to see how TypeScript compilation will strip these things out.

It's "modern JavaScript" code with modules and classes that will be converted to classic UI5 code in further steps of the build process. This isn't really related to TypeScript, but it's our recommended way of writing modern UI5 applications whenever a build step is required.

As shown below:

Install the corresponding dependencies:

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

When you develop SAPUI5 applications (that is, using control libraries not available in OpenUI5), use @sapui5/ts-types-esm types instead of @types/openui5 types.

On the other hand, the types available in @openui5/ts-types-esm, how are they different from @types/openui5? The only difference is versioning: while types in the @openui5 namespace are fully synchronized with the corresponding OpenUI5 version, types in the @types namespace follow DefinitiveTyped versioning and are only released once per minor version of OpenUI5. Actually, it shouldn't have an effect on what we use, but note that usually only the ..0 patch version is available in the @types namespace.

SAPUI5 types are not available in the @types namespace.

We install specific versions to ensure that the type definitions match the UI5 code used and the accompanying jQuery version.

Types of other libraries need to be added in the same way.

npm install completed successfully:

Execute the command line:

npx tsc src/Component.ts

Encountered the error message:

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.

Try executing this command:

npm install -D @types/node

After that the tsc command can be executed successfully.

But this is not the recommended way, and the content of Component.js generated in this way is not correct.

The correct way is to create a new tsconfig.json file and maintain the following content:

{
    "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/**/*"
    ]
}

After executing the npx tsc command again, Component.js can be successfully generated.

More Jerry's original articles, all at: "Wang Zixi".