TypeScript 運行時類型檢查補充工具
TypeScript是靜態(tài)類型系統(tǒng),在編譯時做類型檢查。一般而言,如果項目所用到的所有庫、模塊都是基于ts的,那么靜態(tài)類型已經(jīng)可以避免大部分編程層面的類型問題。不過,在一些場景下來,單純靜態(tài)類型是無法解決問題的,部分?jǐn)?shù)據(jù)是動態(tài)傳入到系統(tǒng)中的,主要包含場景如下:
- 第三方數(shù)據(jù)源(接口API、本地持久化存儲、postMessage等)
- 第三方調(diào)用者傳參
- 全局狀態(tài)變更
當(dāng)然,還有其他可能,總之,單純靠靜態(tài)類型檢查,無法解決運行時類型問題。因此,我寫了tyshemo這個工具。它可以幫助我們完成運行時的類型檢查。它暴露了很多接口,其中的Ty接口,很適合在js中作為ts的補充被使用,我們來看下。
import { Ty } from 'tyshemo'
@Ty.decorate.with([Number, Number])
class Some {
constructor(a, b) {
this.x = a + b
}
@Ty.decorate.with(String)
name = 'calc'
@Ty.decorate.with([Number], Number)
plus(y) {
return this.x + y
}
}
const some = new Some(1, 3) // ok
const some2 = new Some('1', '3') // throw error
some.name = 'ooo' // ok
some.name = 123 // throw error
const z = some.plus(2) // ok
const z1 = some.plus('3') // throw error
我們可以通過 Ty.decorate.with() 作為裝飾器來限定一個類上屬性的值類型,方法的參數(shù)和返回值類型。
在正常的程序中,我們有的時候也需要對值進行限定,但是由于js語言的特性,我們無法對基礎(chǔ)類型的值進行監(jiān)聽,不過我們可以對object進行監(jiān)聽。我們可以如下操作:
const o = process.env.NODE_ENV === 'production' ? {} : Ty.decorate({}).with({
name: String,
age: Number,
})
o.name = null // throw error
o.name = 'aaa' // ok
o.age = '12' // throw error
o.age = 12 // ok
通過 process.env.NODE_ENV === 'production' 來控制當(dāng)前環(huán)境,如果在正式環(huán)境,就不需要這個能力,畢竟我們在測試環(huán)境已經(jīng)做過充分驗證了。
要對來自API的數(shù)據(jù)進行檢查,我們可以這樣操作。
function getData(url) {
return fetch(url).then(res => res()).then((data) => {
if (process.env.NODE_ENV !== 'production') {
Ty.expect(data).to.be({
name: String,
age: Number,
})
}
return data
})
}
Ty 這個接口可以快速對數(shù)據(jù)進行結(jié)構(gòu)化檢查。tyshemo還有很多其他方面的能力,可以在它的文檔中了解更多。
到此這篇關(guān)于TypeScript 運行時類型檢查補充工具的文章就介紹到這了,更多相關(guān)TypeScript 運行時類型檢查內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript使用focus()設(shè)置焦點失敗的解決方法
這篇文章主要介紹了JavaScript使用focus()設(shè)置焦點失敗的一個解決方法 ,需要的朋友可以參考下2014-09-09
JavaScript?中的?parseInt()?函數(shù)詳解
parseInt函數(shù)將其第一個參數(shù)轉(zhuǎn)換為一個字符串,對該字符串進行解析,然后返回一個整數(shù)或?NaN,這篇文章主要介紹了JavaScript?的?parseInt()?函數(shù),需要的朋友可以參考下2023-05-05
詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb(2)
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb,jsPlumb是一個強大的JavaScript連線庫,它可以將html中的元素用箭頭、曲線、直線等連接起來,適用于開發(fā)Web上的圖表、建模工具等,需要的朋友可以參考下2015-12-12

