快捷導(dǎo)航

TypeScript 運行時類型檢查補充工具

更新時間：2020年09月28日 09:55:07 作者：否子戈

這篇文章主要介紹了TypeScript 運行時類型檢查補充工具，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: