摘要：進(jìn)入主頁(yè)使用文檔是一個(gè)設(shè)計(jì)簡(jiǎn)單的運(yùn)行時(shí)的數(shù)據(jù)類(lèi)型檢查工具，它可以幫助你的程序在使用某個(gè)組變量前，對(duì)變量的數(shù)據(jù)類(lèi)型進(jìn)行檢查，防止在使用變量進(jìn)行運(yùn)算時(shí)由于數(shù)據(jù)類(lèi)型不同導(dǎo)致報(bào)錯(cuò)。

進(jìn)入GitHub主頁(yè)
使用文檔

HelloType是一個(gè)api設(shè)計(jì)簡(jiǎn)單的js運(yùn)行時(shí)的數(shù)據(jù)類(lèi)型檢查工具，它可以幫助你的js程序在使用某個(gè)（組）變量前，對(duì)變量的數(shù)據(jù)類(lèi)型進(jìn)行檢查，防止在使用變量進(jìn)行運(yùn)算時(shí)由于數(shù)據(jù)類(lèi)型不同導(dǎo)致報(bào)錯(cuò)。

雖然我們已經(jīng)有typescript，但是它只能在編譯時(shí)進(jìn)行靜態(tài)數(shù)據(jù)類(lèi)型檢查，而不能進(jìn)行動(dòng)態(tài)的運(yùn)行時(shí)數(shù)據(jù)檢查。而HelloType就是想補(bǔ)充這個(gè)空缺。它的使用方法非常簡(jiǎn)單，api設(shè)計(jì)非常容易理解，并且語(yǔ)義化。

前端通過(guò)讀取后端接口返回的數(shù)據(jù)進(jìn)行界面渲染，但是經(jīng)常碰到的問(wèn)題是，前端對(duì)后端數(shù)據(jù)無(wú)比信任，按照大家約定的格式讀取數(shù)據(jù)，但是，突然有一天深夜，監(jiān)控系統(tǒng)突然報(bào)警，南非的大老板進(jìn)去頁(yè)面后不斷產(chǎn)生錯(cuò)誤。作為有修養(yǎng)的程序員，果斷cmd+opt+I打開(kāi)開(kāi)發(fā)者工具，一看，一堆紅色報(bào)錯(cuò)，就像心臟滴血。經(jīng)過(guò)一整夜的奮戰(zhàn)，最后發(fā)現(xiàn)，原來(lái)是后端發(fā)布了新版本，在一個(gè)關(guān)鍵接口的返回?cái)?shù)據(jù)中，統(tǒng)一將數(shù)值型的返回值修改成了字符串的數(shù)字。內(nèi)心一陣MMP之后，你現(xiàn)在終于有了HelloType。

圖：通過(guò)hello-type提供的方法，創(chuàng)建具有一定格式的數(shù)據(jù)結(jié)構(gòu)

當(dāng)你使用HelloType創(chuàng)建了一個(gè)特定的數(shù)據(jù)結(jié)構(gòu)容器之后，利用這個(gè)容器，和接收到的API數(shù)據(jù)進(jìn)行對(duì)比，就可以知道API返回的數(shù)據(jù)格式是否符合本地規(guī)定的格式，數(shù)據(jù)節(jié)點(diǎn)上的數(shù)據(jù)類(lèi)型是否是規(guī)定的數(shù)據(jù)類(lèi)型。一旦API返回的數(shù)據(jù)格式、類(lèi)型不符合要求，你就可以追蹤到這個(gè)錯(cuò)誤，并且把錯(cuò)誤發(fā)送到你的監(jiān)控系統(tǒng)，并且通知后端同學(xué)“你們改數(shù)據(jù)類(lèi)型不通知下游團(tuán)隊(duì)，是要藥丸嗎？”

TypeScript是前端語(yǔ)言的一次升級(jí)，然鵝，它只在編譯時(shí)對(duì)項(xiàng)目?jī)?nèi)的數(shù)據(jù)類(lèi)型做檢查，而無(wú)法做到運(yùn)行時(shí)的類(lèi)型檢查。除了api的數(shù)據(jù)是不可測(cè)的以外，用戶輸入的數(shù)據(jù)也不可測(cè)，你還會(huì)用第三方庫(kù)吧，或者你自己現(xiàn)在就在寫(xiě)一個(gè)第三方庫(kù)，但凡跨項(xiàng)目的代碼，就會(huì)有不可測(cè)的數(shù)據(jù)類(lèi)型。為了學(xué)習(xí)TypeScript的接口、范型，你大刀闊斧的改項(xiàng)目代碼，最后上線了，看看監(jiān)控系統(tǒng)，內(nèi)心MMP……

圖：利用ES7裝飾器，快速對(duì)某個(gè)方法的輸入輸出的數(shù)據(jù)類(lèi)型進(jìn)行限制

如果你和我一樣超級(jí)懶不想為了編寫(xiě)一大堆接口、范型、類(lèi)型寫(xiě)一大堆和業(yè)務(wù)本身無(wú)關(guān)的ts代碼時(shí)，HelloType給你直觀的感受，而且完完全全是ES語(yǔ)法，不帶半點(diǎn)地方方言。

對(duì)業(yè)務(wù)代碼的大舉侵入是最討厭的是，對(duì)于我的應(yīng)用而言，已經(jīng)做好了程序報(bào)錯(cuò)時(shí)的萬(wàn)全準(zhǔn)備，那就是——提示用戶系統(tǒng)出錯(cuò)了！！既然這樣，HelloType可以幫助你收集數(shù)據(jù)類(lèi)型錯(cuò)誤，讓你的代碼做一段安靜的代碼。

圖：利用一個(gè)全局函數(shù)，抓取錯(cuò)誤信息，并將錯(cuò)誤信息通過(guò)ajax請(qǐng)求上傳到服務(wù)器

HelloType中到trace方法完全異步，徹底的異步執(zhí)行，不影響界面的渲染，在追蹤到數(shù)據(jù)類(lèi)型報(bào)錯(cuò)之后，異步執(zhí)行with方法中的函數(shù)，這個(gè)函數(shù)是自定義的，因此你可以在這個(gè)函數(shù)里面做任何事情，但它是異步的，你可以收集日志，然后上傳到監(jiān)控系統(tǒng)，干得漂亮。

HelloType默認(rèn)是兼容模式對(duì)數(shù)據(jù)進(jìn)行檢查的，所謂兼容模式嚴(yán)格模式，主要是針對(duì)數(shù)組和對(duì)象而言。兼容模式下，一個(gè)被檢查的對(duì)象如果屬性比規(guī)定的要多，并不會(huì)報(bào)錯(cuò)，只要規(guī)定的那部分屬性數(shù)據(jù)類(lèi)型檢查沒(méi)報(bào)錯(cuò)即可。嚴(yán)格模式下，數(shù)組的元素個(gè)數(shù)必須和規(guī)定的一樣，不能多也不能少，即使IfExists，也會(huì)被忽略，必須遵守嚴(yán)格模式。對(duì)象的話，主要是屬性必須和規(guī)定的相同，不能多也不能少，IfExists也一樣被忽略。

圖：由于多了height屬性，會(huì)報(bào)錯(cuò)。通過(guò)strict屬性獲取一個(gè)類(lèi)型容器的嚴(yán)格模式狀態(tài)，對(duì)結(jié)構(gòu)比較嚴(yán)格要求的情況非常有用

另外，還有一個(gè)方法可以開(kāi)啟嚴(yán)格模式：toBeStrict()。它直接改變當(dāng)前容器為一個(gè)嚴(yán)格模式的容器。在必要的時(shí)候使用它會(huì)讓代碼顯得很精煉。例如：

const SomeType = Dict({
  body: Dict({ name: String }).toBeStrict(), // 使用Dict直接作為規(guī)則的時(shí)候，由于只會(huì)在這里用到一次，所以直接調(diào)用toBeStrict()比較好
})

JS的數(shù)據(jù)類(lèi)型本身的混亂對(duì)于開(kāi)發(fā)者而言，簡(jiǎn)直就是噩夢(mèng)，但是HelloType讓你可以睡個(gè)好覺(jué)。通過(guò)非常合理的代碼布局，讓你可以非常優(yōu)秀的攔截由于數(shù)據(jù)類(lèi)型問(wèn)題產(chǎn)生的bug。而且，由于它是基于Error，所以調(diào)試起來(lái)非常方便，對(duì)于監(jiān)控而言也非常有利，利用它，可以收集具體的錯(cuò)誤數(shù)據(jù)，上報(bào)到服務(wù)端，由服務(wù)端對(duì)自己輸出的數(shù)據(jù)格式和類(lèi)型進(jìn)行糾正。

開(kāi)始使用

本文原載于 https://www.tangshuang.net/he...
如果你覺(jué)得這個(gè)想法還不錯(cuò)，github上給個(gè)star吧