JS如何捆綁TypeScript聲明文件

前話

TypeScript是JavaScript類型的超集

這是TypeScript的文檔介紹的一句話，那麼他們存在聯繫呢？

個人理解是，TypeScript在JavaScript基礎上引入強類型語言的特性。開發者使用TypeScript語法進行編程開發，最終經過轉換工具將TypeScript轉換成JavaScript。

使用TypeScript可以避免在原生JavaScript上開發所帶來的弱類型語言的坑。（我該輸入啥？調用後返回啥？哎仍是看看源碼吧。。。）

---

嗯！很好，強類型的JavaScript，挺好的。可是，我捨不得那NPM裏衆多庫無微不至的人文關懷啊o(TヘTo)

別怕，如今不少庫已經悄悄地支持TypeScript，就算它無意支持，也有無私奉獻的大佬們悄悄地幫這些庫支持TypeScript了

這就是引出了本文的主題，TypeScript的聲明文件，我認爲它是JavaScript庫相似C語言的頭文件，它的存在即是幫助TypeScript引入JavaScript庫

---

關於TypeScript聲明文件的寫法和規範請參考參考以下官方文檔和優秀博文：

• https://www.tslang.cn/docs/handbook/declaration-files/introduction.html
• http://www.javashuo.com/article/p-nbbegfxc-ct.html

根據官方文檔介紹，有如下兩個捆綁方式：

• 與你的npm包捆綁在一塊兒
• 發佈到npm上的@types organization

與npm包捆綁一塊兒就是前面說的，開發者在ts項目中npm install一個庫並在代碼文件中import後直接便可使用。

當部分庫官方不維護的時候，就能夠經過第二個方式，在npm install一個庫後，再執行 npm install @types/庫名 安裝庫的聲明文件便可使用。其原理是TypeScript在2.0版本以後，當你import 一個庫的時候，當他在配置的include路徑中未找到指定的庫，就會在node_modules的@types中尋找該庫。

通常來講，官方推薦第一種方式書寫發佈聲明文件，下面我直接用例子來展現第一種捆綁方式吧。

例子

首先初始化TypeScript項目，目錄結構以下：

tsconfig.json配置以下：

{
  "compilerOptions": {
    "target": "es5",
    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",
    /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "allowJs": true,
    "outDir": "./dist",
    /* Redirect output structure to the directory. */
    /* Allow javascript files to be compiled. */
    "strict": true /* Enable all strict type-checking options. */
  },
  "include": [
    "src/**/*"
  ]
}

能夠看到，我寫了個模塊 a ，而且給它捆綁了聲明文件，模塊 a ，即 src/a/index.js 內容以下：

const NAME = 'A';

let call = (who) => {
    console.log('Hello ' + who + '! I am ' + NAME);
}

export default {
    call
}

其聲明文件即 src/a/index.d.ts 內容以下：

declare namespace a {
    function call(who: string): void;
}

export default a;

這時，咱們即可以在入口文件 src/index.ts 引入 a 模塊：

import a from './a';
a.call('Pwcong');

命令行執行 tsc 後便可在目錄 dist 中生成js代碼：

執行命令 node ./dist/index.js 能夠獲得相應正確的輸出。

---

咱們再模擬導入發佈後的NPM庫，在 node_modules 目錄下建立目錄 b ，並初始化Node項目，這時目錄結構以下：

其中 node_modules/b/types/package.json 內容以下：

{
  "name": "b",
  "version": "1.0.0",
  "main": "./src/index.js",
  "types": "./types/index.d.ts"
}

node_modules/b/src/index.js 內容以下：

const NAME = 'B';

let call = (who) => {
    console.log('Hello ' + who + '! I am ' + NAME);
}

module.exports = {
    call
}

聲明文件 node_modules/b/types/index.d.ts 內容以下：

declare namespace b {
    function call(who: string): void;
}

export = b;

這時，咱們修改 src/index.ts ：

import a from './a';
a.call('Pwcong');

import b =  require('b');
b.call('Pwcong');

命令行執行 tsc 後便可在目錄 dist 中生成js代碼後執行命令 node ./dist/index.js 也能夠獲得相應正確的輸出。