我們看個具體的例子。下面這個使用 TypeScript 編寫的 SAP UI5 Component：

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

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

第一行 import 的 UIComponent，其型別定義從哪裡來？

我們如果對著 "sap/ui/core/UIComponent" 單擊滑鼠左鍵，就會看到一個 declare module 的宣告。

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

單擊之後，在 node_modules 資料夾下的 @types 資料夾的 openui5 下面，能找到一個 sap.ui.core.d.ts 檔案：

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

這就是所謂的 DefinitelyTyped 外部型別定義檔案。

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

UI5 for TypeScript 的外部型別定義檔案的安裝方式：

> npm install --save @types/openui5

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

地址：https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/openui5

這些外部定義都是從 OpenUI5 JSDoc 生成的。 如果出現問題，需要修復原始 OpenUI5 儲存庫中的生成器或 JSDoc，而不是此儲存庫中的定義檔案。

OpenUI5 型別定義在兩個 npm 包名下發布：

- @openui5/ts-types-esm（由 UI5 開發團隊直接釋出）
- @types/openui5（透過 DefinitelyTyped 維護的）

二者的差異：

- 對於@openui5/ts-types-esm 上的那些型別定義，每當釋出 OpenUI5 的新補丁版本時，都會釋出一個新補丁版本。即使型別定義沒有變化。這意味著程式碼和型別定義在使用完全相同的版本時完全同步。

然而，對於 @types/openui5，DefinitelyTyped 採用了definitelyTyped 的版本控制方法：

只有主要和次要版本號在庫包和型別宣告包之間對齊。
型別宣告包的補丁版本與庫補丁版本無關。

這背後的原因是，使用語義版本控制，對於相同主要/次要版本的所有補丁版本，API 將保持不變。例如：OpenUI5 1.90.0 和 OpenUI5 1.90.8 之間沒有 API 變化。因此，無需為 OpenUI5 1.90.8（以及 1.90.7、1.90.6 等）釋出新的型別定義。

唯一的例外是，當文件或定義生成器中存在重大改進或修復時，我們仍可能在 DefinitiveTyped 上建立新的補丁版本。

透過 SAP UI5 的 TypeScript 開發環境，來學習什麼是 DefinitelyTyped

相關文章