快捷導(dǎo)航

詳解Anyscript開(kāi)發(fā)指南繞過(guò)typescript類(lèi)型檢查

更新時(shí)間：2022年09月21日 10:44:09 作者：CharTen

這篇文章主要為大家介紹了詳解Anyscript開(kāi)發(fā)指南繞過(guò)typescript類(lèi)型檢查，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

隨著越來(lái)越多的前端項(xiàng)目采用 typescript 來(lái)開(kāi)發(fā)，越來(lái)越多前端開(kāi)發(fā)者會(huì)接觸、使用這門(mén)語(yǔ)言。它是前端項(xiàng)目工程化的一個(gè)重要幫手，結(jié)合 vscode 編輯器，給予了前端開(kāi)發(fā)者更嚴(yán)謹(jǐn)、高效的編碼體驗(yàn)。但同時(shí)，嚴(yán)格的類(lèi)型檢查也會(huì)使部分開(kāi)發(fā)者的編碼效率有所降低，將時(shí)間花費(fèi)在解決類(lèi)型沖突、類(lèi)型不匹配上，從而導(dǎo)致望而卻步，遲遲不敢上手。

本文描述了幾種繞過(guò) typescript 類(lèi)型檢查的方法，幫助ts開(kāi)發(fā)者在遇上第三方庫(kù)類(lèi)型聲明有誤、上線時(shí)間緊張卻還被ts類(lèi)型耽擱開(kāi)發(fā)進(jìn)度、以及其他奇奇怪怪ts類(lèi)型聲明的場(chǎng)景時(shí)，能夠快速擺脫ts類(lèi)型檢測(cè)，保障項(xiàng)目盡快上線。

注意，本文所提到的方法，只能作為一種最后不得已的hack手段，其目的是為了盡快完成需求而非代碼取巧，讀者不應(yīng)該將其當(dāng)成一種常用的寫(xiě)法并在項(xiàng)目?jī)?nèi)任意使用！

場(chǎng)景設(shè)定

假設(shè)存在一個(gè)第三方庫(kù)，允許開(kāi)發(fā)者通過(guò) json 定義一個(gè)表單，其 typescript 類(lèi)型定義如下：

interface FormItem{
    /** 表單類(lèi)型 */
    type:string
    /** 顯示文本 */
    label:string
}
interface FormSelectItem extends FormItem{  
    /** 將表單類(lèi)型指定為'select' */
    type:'select'
    /** 新增一個(gè)options屬性，類(lèi)型為數(shù)組，此類(lèi)型定義存在錯(cuò)誤，沒(méi)有定義options數(shù)組里面的內(nèi)容 */
    options:[]
}
type FormRule = (FormSelectItem|FormItem)[]

代碼里，FormSelectItem.options期望的是一個(gè)有內(nèi)容的數(shù)組，但因?yàn)榈谌綆?kù)給定的類(lèi)型文件編寫(xiě)錯(cuò)誤，沒(méi)有給出數(shù)組內(nèi)部項(xiàng)的結(jié)構(gòu)，只留下[]空數(shù)組類(lèi)型定義，導(dǎo)致開(kāi)發(fā)者給FormSelectItem.options賦予一個(gè)有內(nèi)容的數(shù)組都會(huì)導(dǎo)致 typescript 報(bào)錯(cuò)。

解決方法

注釋忽略

//@ts-ignore會(huì)讓typescript編譯器跳過(guò)注釋下一行代碼，不對(duì)其進(jìn)行類(lèi)型檢查。通過(guò)不檢查類(lèi)型的方式，繞過(guò)類(lèi)型檢查

//@ts-ignore
window.aaaa = "使用示例（ts里不允許通過(guò)此行代碼往全局對(duì)象掛載屬性）"

場(chǎng)景用例

加上//@ts-ignore在options屬性之上，編譯器跳過(guò)了options屬性的檢查，因此報(bào)錯(cuò)消失。使用起來(lái)十分簡(jiǎn)單快捷，但是加了注釋忽略之后，開(kāi)發(fā)者為options賦予任何值都是合法的，如非數(shù)組的對(duì)象、null、undefined等容易引起程序出錯(cuò)的類(lèi)型。同時(shí)加了//@ts-ignore之后，編輯器無(wú)法再對(duì)此行進(jìn)行代碼提示和自動(dòng)補(bǔ)全。

類(lèi)型斷言

類(lèi)型斷言是typescript中一種將一個(gè)類(lèi)型指定為另一個(gè)類(lèi)型的語(yǔ)法。通過(guò)指定任意類(lèi)型為目標(biāo)類(lèi)型的方式，達(dá)到編譯器不報(bào)錯(cuò)的效果。

(window as unknown as {aaa:string}).aaa = "使用示例（ts里不允許通過(guò)此行代碼往全局對(duì)象掛載屬性）"

場(chǎng)景用例

上圖使用了斷言語(yǔ)法，且用到兩種斷言方式：

第一種寫(xiě)法是給賦值數(shù)據(jù)下斷言，將數(shù)據(jù)類(lèi)型強(qiáng)制斷言為定義類(lèi)型，即在上圖中，將{label:string,value:string}[]斷言為[]，使得能夠與options 的類(lèi)型匹配上。在屬性賦值中只能使用此種斷言寫(xiě)法。
第二種寫(xiě)法是反過(guò)來(lái)，通過(guò)將定義類(lèi)型強(qiáng)制斷言為數(shù)據(jù)類(lèi)型，即在上圖中，將[]斷言為{label:string,value:string}[]，使得select.options能夠按照開(kāi)發(fā)者的數(shù)據(jù)類(lèi)型進(jìn)行工作。并且通過(guò)此種方式，對(duì)select.options進(jìn)行操作時(shí)，編輯器還會(huì)根據(jù)開(kāi)發(fā)者的斷言類(lèi)型進(jìn)行語(yǔ)法提示。

相比注釋忽略，類(lèi)型斷言原本就是typescript語(yǔ)法的一部分，本身就會(huì)接受類(lèi)型檢查，因此后續(xù)的代碼補(bǔ)全提示功能是完整的。但同時(shí)開(kāi)發(fā)者主觀上應(yīng)當(dāng)明白類(lèi)型斷言的作用，避免將不正確的數(shù)據(jù)類(lèi)型傳入導(dǎo)致代碼出錯(cuò)。

泛型轉(zhuǎn)換

泛型是typescript最強(qiáng)大的功能，它提供給了開(kāi)發(fā)者們對(duì)類(lèi)型“編程”的能力。通過(guò)定義泛型輔助函數(shù)，在類(lèi)型斷言的基礎(chǔ)上，利用函數(shù)返回泛型的手段，巧妙地將類(lèi)型匹配上，從而達(dá)到縮小代碼量且編譯器不報(bào)錯(cuò)的效果。

function _any<T>(obj:any):T{
    return obj as unknown as T
}
_any<{aaa:string}>(window).aaa='使用示例（ts里不允許通過(guò)此行代碼往全局對(duì)象掛載屬性）'

實(shí)際上，輔助函數(shù)也只是將參數(shù)當(dāng)作是返回值而已，只不過(guò)利用泛型可以指定為任意類(lèi)型。

甚至可以設(shè)置兩個(gè)泛型：一個(gè)是目標(biāo)泛型，也就是函數(shù)要返回的數(shù)據(jù)類(lèi)型，一個(gè)是參數(shù)泛型，也就是傳入的數(shù)據(jù)類(lèi)型。當(dāng)顯式地賦予泛型P一個(gè)類(lèi)型時(shí)，typescript可以為參數(shù)提供類(lèi)型檢查和語(yǔ)法補(bǔ)全。

function _any<T,P=any>(obj:P):T{
    return obj as unknown as T
}
const select:FormSelectItem = {
    type:'select',
    options:_any<[],{label:string,value:string}[]>([{
        label:'',
        value:''
    }])
}
_any<{label:string,value:string}[]>(select.options).push({
    label:'',
    value:''
})

場(chǎng)景用例

相比類(lèi)型斷言，使用泛型轉(zhuǎn)換輔助函數(shù)的做法最大的作用，是簡(jiǎn)化了as unknow as xxx的寫(xiě)法，本質(zhì)上還是一樣的。開(kāi)發(fā)者同樣需要明白轉(zhuǎn)類(lèi)型的作用，避免使用錯(cuò)誤的類(lèi)型導(dǎo)致代碼錯(cuò)誤。