新建一個資料夾 ui5-ts, 執行命令列 npm init -y 初始化：

![](https://img-blog.csdnimg.cn/img_convert/e228d2cb3517f0382b252227432f0c89.png)

新建一個 src 資料夾，裡面存放一個 Component.ts 檔案，原始碼如下：

```typescript
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 應用程式的一種方式。

如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/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 成功完成：

![](https://img-blog.csdnimg.cn/img_convert/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

![](https://img-blog.csdnimg.cn/img_convert/7fbf00fa537fa787a8d8838b178b129e.png)

之後 tsc 命令可以成功執行。

![](https://img-blog.csdnimg.cn/img_convert/2e12f6ca05e74f56ced172e0aecea206.png)

但這並不是推薦的方式，況且採取這種方式生成的 Component.js, 內容並不正確。

正確的做法是：新建一個 tsconfig.json 檔案，維護如下的內容：

```typescript
{
    "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.

![](https://img-blog.csdnimg.cn/img_convert/fe7ad0b703425b3528839ce43a2635d8.png)

更多Jerry的原創文章，盡在："汪子熙"。

使用 TypeScript 編寫 SAP UI5 應用的準備工作

相關文章