---
tags: TypeScript 新手指南
---

# #5 宣告檔案

> 討論日期: 2021/12/07
> 討論範圍: 宣告檔案

## 筆記分享

https://dazedbear.notion.site/TypeScript-5-41a147795d1646a784a157c4237926ae

## 待解決問題

> 這次內容有點複雜，需要再多讀一下..

### ES6 Module 一定要搭配 npm 使用嗎?

不一定，npm 只是個套件管理工具，如果你要在 client side 純 HTML 上使用 ES6 module 語法也是可以的。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

<!-- 載入另一隻 JS 作為 module，那隻 JS 裡面可以使用 import/export 語法 -->
<script type="module" src="main.js"></script>


<!-- 直接將這段 code 定義成 module，不能使用 import/export 語法 -->
<script type="module">
  /* JavaScript module code here */
</script>

## 線上討論紀錄

### JavaScript 模組進化論 - 模組化的演進與實戰

> 認識各種 module 定義格式後，再看 [宣告檔案的各種撰寫情境](https://willh.gitbook.io/typescript-tutorial/basics/declaration-files#zhuan-xie-xuan-gao-dang-an) 會比較有脈絡

https://hackmd.io/@JSDC-tw/2021conference/%2FWkLLTE_ARW-D5kEq98KJ3g

IIFE
|
|
CommonJS
| - server side only (Node.js)
|
AMD
| - client side only (Browser)
| - 需要使用 RequireJS Loader 輔助
|   https://requirejs.org/docs/start.html
|
UMD
| - for both server and client side
| - 最外層是 IIFE，判斷並根據不同模組系統進行不同的動作
|
ESM
|
| - native support for both server and client side
| - Node.js 預設使用 CommonJS，想要用 ESM Node.js v13 以上版本可以透過以下方式使用
|   https://nodejs.org/api/esm.html#enabling
|   https://awdr74100.github.io/2020-02-16-nodejs-enableesm/

- 透過 <script> 引入
- 全域變數：定義新的型別
- 全域變數：擴充現有 module 的型別
- UMD：定義新的型別
- 外掛模組：匯入後改變另一個模組的結構
- module
- ESM (npm)：定義新的型別
- UMD：定義新的型別
- npm/UMD：擴充現有 module 的型別
- 外掛模組：匯入後改變另一個模組的結構