SAP Spartacus 是一個 TypeScript 應用，在有些檔案開頭，發現了這樣的定義：

```typescript
// '@sapui5/ts-types-esm' package contains types for sap modules, e.g. 'sap/ui/core/Core'
/// <reference types="@sapui5/ts-types-esm"></reference>
```

對第 31 行的程式碼按住 Ctrl 再單擊滑鼠左鍵：

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

直接跳轉到了 `sap.ui.core.d.ts` 檔案內部：

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

`///` 的正式名稱叫 [Triple-Slash Directives](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html).

三斜槓指令是包含單個 XML 標記的單行註釋。 註釋的內容用作編譯器指令。

三斜槓指令僅在其包含檔案的頂部有效。 三斜槓指令前只能有單行或多行註釋，包括其他三斜槓指令。 如果在語句或宣告之後遇到它們，它們將被視為常規的單行註釋，並且沒有特殊含義。

/// <reference types="..."></reference> 指令宣告對包的依賴。

解析這些包名的過程類似於在 import 語句中解析模組名的過程。將三斜槓引用型別指令視為宣告包的匯入的一種簡單方法。

例如，在宣告檔案中包含 /// <reference types="node"></reference> 宣告該檔案使用在 @types/node/index.d.ts 中宣告的名稱；因此，這個包需要與宣告檔案一起包含在編譯中。

僅當手動創作 d.ts 檔案時才使用這些指令。

對於編譯時產生的宣告檔案，編譯器會自動新增 /// <reference types="..."></reference>；當且僅當生成的檔案使用來自引用包的任何宣告時，才會在生成的宣告檔案中新增 /// <reference types="..."></reference>。

要在 .ts 檔案中宣告對 @types 包的依賴，請在命令列或 tsconfig.json 中使用型別。

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

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

從這三個 Observable 的 pipe 內的 Operator 能看出這些操作之間的邏輯順序。
![](https://img-blog.csdnimg.cn/img_convert/1cf0db24dd4b4ed4f9c31ec88536ba9d.png)

這個 ui5bootstrapped 返回的 Observable，什麼時候被 subscribe 呢？

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

為什麼觸發點是 loadVisualization 的 subscribe 呼叫呢？loadVisualization 和 bootstrapUi5 的關聯在哪裡？

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

答案：`loadVisualization` 返回的是 `this.viewportAdded$`, 而 `this.viewportAdded$` 是 `ui5Initialized$` mergedMap 之後的產物，`ui5Initialized$` 又是 `ui5BootStrapped$` 的產物，因此 this.viewportAdded$ 被 subscribe，一定是 `ui5BootStrapped$` 的 subscribe 邏輯最先被執行，然後是 `ui5Initialized$`，最後才是 `this.viewportAdded$`.

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

執行時除錯：`ui5BootStrapped$` 最先被呼叫：

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

然後是 initializeUI5：
![](https://img-blog.csdnimg.cn/img_convert/ba91cd132f24c627ebdb0560bcb80535.png)

最後是 addViewport：
![](https://img-blog.csdnimg.cn/img_convert/7f605ffdd6414577e729d40d4822a078.png)

TypeScript 裡的 Reference Type 和 Triple-Slash Directives

相關文章