向微軟官方貢獻 @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 installcd ~/.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 你的程式碼。機器再厲害也只是一個減少工作量的工具。我們應該致敬的還是這些為社群默默奉獻的人。

相關文章