向微軟官方貢獻 @types 包後引發的思考

洛竹發表於2021-01-30
微軟

塗鴉智慧大量優質 HC，歡迎大家加入，需要內推評論區告訴我！

在前端社群中，TypeScript 差不多是老生常談的主題了。這不僅反映了 TypeScript 的流行度，也反映了它的學習上手成本。今天我們不來探討 TypeScript 本身。而是記錄一下我艱難地釋出一個 @types 包的歷程。

a year ago

向微軟官方貢獻 @types 包後引發的思考

上圖是我在掘金的第一篇文章 優雅地使用 TypeScript 開發 React Native 應用 中的一條素質問答。問題就是有些庫不是 TS 寫的，也沒提供型別宣告該怎麼辦。從圖中可見我當時的解決方法都是不可複用且不利他的。但這就是我這一年來處理該問題的常規手段。

DefinitelyTyped

像是 Node 有 NPM，Java 有 Maven，TypeScript 也有它的另一半，那就是號稱 GitHub review 數量之最的 DefinitelyTyped 專案。

在 TypeScript 大規模應用之前，社群已經有超過 90% 的頂級 JavaScript 庫，或基於 Flow 編寫的庫（React系）。如果沒有 DefinitelyTyped 專案，這些庫想要提供型別支援，無疑只有完全重構程式碼。這既不現實也沒必要。

鑑於 DefinitelyTyped 的作用，我們說 DefinitelyTyped 讓 TypeScript 再次偉大也不為過。

DefinitelyTyped 目前是由微軟官方維護的開源專案，參與的方式和 Homebrew 差不多，都是基於 GitHub 的工作流:

  1. fork DefinitelyTyped 到自己的賬號下
  2. 新增自己的包並編寫型別宣告
  3. 提交 PR
  4. 官方 review 併合併發布到 NPM

艱辛的貢獻歷程

1、檢查是否已存在同名的包：

npm info @types/tuya-panel-kit
複製程式碼

2、安裝 dts-gen：

npm install -g dts-gen
複製程式碼

3、生成新包

dts-gen --dt --name tuya-panel-kit --template module
複製程式碼

4、格式化程式碼

npm run prettier -- --write types/tuya-panel-kit/**/*.ts
複製程式碼

這一步務必要執行，因為 DefinitelyTyped 十分嚴格，格式不對過不了 CI。過不了 CI，就只配和機器人對話：

5、dtslint

yarn lint tuya-panel-kit
複製程式碼

這一步是最讓人頭大的一步，Definitely 的規則可謂嚴苛，真就對的起它的 SLOGAN：

The repository for high quality TypeScript type definitions

我梳理了一下成功路上的絆腳石：

1、 Cannot find module 'csstype' when npm run lint package-name

這是一個流程 BUG，如果你的包依賴了 react，你需要執行 cd types/react && npm install 和 cd ~/.dts/typescript-installs/3.2/ && npm install

2、如果你的包依賴了別的外部庫，需要新增到 microsoft/DefinitelyTyped-tools 專案中，否則 CI 不給過。

3、你的型別宣告可能有很多不符合 dtslint 的標準，我看到有的包是在 tslint.json 中配置禁用掉部分規則，但是我做了嘗試後被人工拒絕了。

然後我嘗試在頂部加入 // tslint:disable:max-line-length 禁用規則，在說明原因後通過了 Review。就在發稿時，最新 PR 卻因為一個禁用規則，被要求修改：

規範的重要性

剛開始時，這種嚴苛漫長的 review 流程著實讓我頭大。但在提過 4 個 PR 都被合併後，我發現 review 的人關心的是你為什麼要這麼寫，是不是有什麼不得已的苦衷，是否符合高質量的要求。

在參與 DefinitelyTyped 的協作中，我越來越發現規範的重要。如此體量的專案，如果沒有嚴格有效的規範約束，勢必會被開發者拋棄。那我們來看看 DefinitelyTyped 中是如何約束的：

  1. dtslint ：微軟專門寫的用來檢驗型別宣告檔案的工具。正是因為它，我做了大量優化工作。
  2. 機器人?（dt-mergebot、dt-review-bot、typescript-bot-watchdog）：在你的程式碼通過所有規範之前，都是這些機器人在和你互動。大家感興趣的話，之後我會單獨出一篇解析的文章
  3. 盡職盡責的維護：雖然有時 review 速度明顯很慢（可能因為國外疫情）。但是這些維護者真的是盡職盡責的 review 你的程式碼。機器再厲害也只是一個減少工作量的工具。我們應該致敬的還是這些為社群默默奉獻的人。

相關文章