HelloType:JS運行時數據類型檢查工具

NO IMAGE

HelloType:JS運行時數據類型檢查工具

進入GitHub主頁

使用文檔

HelloType是一個api設計簡單的js運行時的數據類型檢查工具,它可以幫助你的js程序在使用某個(組)變量前,對變量的數據類型進行檢查,防止在使用變量進行運算時由於數據類型不同導致報錯。

雖然我們已經有typescript,但是它只能在編譯時進行靜態數據類型檢查,而不能進行動態的運行時數據檢查。而HelloType就是想補充這個空缺。它的使用方法非常簡單,api設計非常容易理解,並且語義化。

解除API數據格式煩惱

前端通過讀取後端接口返回的數據進行界面渲染,但是經常碰到的問題是,前端對後端數據無比信任,按照大家約定的格式讀取數據,但是,突然有一天深夜,監控系統突然報警,南非的大老闆進去頁面後不斷產生錯誤。作為有修養的程序員,果斷cmd+opt+I打開開發者工具,一看,一堆紅色報錯,就像心臟滴血。經過一整夜的奮戰,最後發現,原來是後端發佈了新版本,在一個關鍵接口的返回數據中,統一將數值型的返回值修改成了字符串的數字。內心一陣MMP之後,你現在終於有了HelloType。

HelloType:JS運行時數據類型檢查工具

通過hello-type提供的方法,創建具有一定格式的數據結構

當你使用HelloType創建了一個特定的數據結構容器之後,利用這個容器,和接收到的API數據進行對比,就可以知道API返回的數據格式是否符合本地規定的格式,數據節點上的數據類型是否是規定的數據類型。一旦API返回的數據格式、類型不符合要求,你就可以追蹤到這個錯誤,並且把錯誤發送到你的監控系統,並且通知後端同學“你們改數據類型不通知下游團隊,是要藥丸嗎?”

檢查函數的輸入輸出

TypeScript是前端語言的一次升級,然鵝,它只在編譯時對項目內的數據類型做檢查,而無法做到運行時的類型檢查。除了api的數據是不可測的以外,用戶輸入的數據也不可測,你還會用第三方庫吧,或者你自己現在就在寫一個第三方庫,但凡跨項目的代碼,就會有不可測的數據類型。為了學習TypeScript的接口、範型,你大刀闊斧的改項目代碼,最後上線了,看看監控系統,內心MMP……

HelloType:JS運行時數據類型檢查工具

利用ES7裝飾器,快速對某個方法的輸入輸出的數據類型進行限制

如果你和我一樣超級懶不想為了編寫一大堆接口、範型、類型寫一大堆和業務本身無關的ts代碼時,HelloType給你直觀的感受,而且完完全全是ES語法,不帶半點地方方言。

靜靜地追蹤數據類型錯誤

對業務代碼的大舉侵入是最討厭的是,對於我的應用而言,已經做好了程序報錯時的萬全準備,那就是——提示用戶系統出錯了!!既然這樣,HelloType可以幫助你收集數據類型錯誤,讓你的代碼做一段安靜的代碼。

HelloType:JS運行時數據類型檢查工具

利用一個全局函數,抓取錯誤信息,並將錯誤信息通過ajax請求上傳到服務器

HelloType中到trace方法完全異步,徹底的異步執行,不影響界面的渲染,在追蹤到數據類型報錯之後,異步執行with方法中的函數,這個函數是自定義的,因此你可以在這個函數裡面做任何事情,但它是異步的,你可以收集日誌,然後上傳到監控系統,幹得漂亮。

兼容模式和嚴格模式

HelloType默認是兼容模式對數據進行檢查的,所謂兼容模式嚴格模式,主要是針對數組和對象而言。兼容模式下,一個被檢查的對象如果屬性比規定的要多,並不會報錯,只要規定的那部分屬性數據類型檢查沒報錯即可。嚴格模式下,數組的元素個數必須和規定的一樣,不能多也不能少,即使IfExists,也會被忽略,必須遵守嚴格模式。對象的話,主要是屬性必須和規定的相同,不能多也不能少,IfExists也一樣被忽略。

HelloType:JS運行時數據類型檢查工具

由於多了height屬性,會報錯。通過strict屬性獲取一個類型容器的嚴格模式狀態,對結構比較嚴格要求的情況非常有用

另外,還有一個方法可以開啟嚴格模式:toBeStrict()。它直接改變當前容器為一個嚴格模式的容器。在必要的時候使用它會讓代碼顯得很精煉。例如:

const SomeType = Dict({
body: Dict({ name: String }).toBeStrict(), // 使用Dict直接作為規則的時候,由於只會在這裡用到一次,所以直接調用toBeStrict()比較好
})

小結

JS的數據類型本身的混亂對於開發者而言,簡直就是噩夢,但是HelloType讓你可以睡個好覺。通過非常合理的代碼佈局,讓你可以非常優秀的攔截由於數據類型問題產生的bug。而且,由於它是基於Error,所以調試起來非常方便,對於監控而言也非常有利,利用它,可以收集具體的錯誤數據,上報到服務端,由服務端對自己輸出的數據格式和類型進行糾正。

開始使用

本文原載於 www.tangshuang.net/hello-type
如果你覺得這個想法還不錯,github上給個star吧😊

相關文章

學不動系列:新前端框架Nautil,哇~

TySheMo前端數據管理模型

連續同源異步操作隊列

JS超級對象Objext:響應式、版本控制、數據鎖