前言

隨著越來(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)格的類型檢查也會(huì)使部分開(kāi)發(fā)者的編碼效率有所降低，將時(shí)間花費(fèi)在解決類型沖突、類型不匹配上，從而導(dǎo)致望而卻步，遲遲不敢上手。

本文描述了幾種繞過(guò) typescript 類型檢查的方法，幫助ts開(kāi)發(fā)者在遇上第三方庫(kù)類型聲明有誤、上線時(shí)間緊張卻還被ts類型耽擱開(kāi)發(fā)進(jìn)度、以及其他奇奇怪怪ts類型聲明的場(chǎng)景時(shí)，能夠快速擺脫ts類型檢測(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 類型定義如下：

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

代碼里，FormSelectItem.options期望的是一個(gè)有內(nèi)容的數(shù)組，但因?yàn)榈谌綆?kù)給定的類型文件編寫(xiě)錯(cuò)誤，沒(méi)有給出數(shù)組內(nèi)部項(xiàng)的結(jié)構(gòu)，只留下[]空數(shù)組類型定義，導(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)行類型檢查。通過(guò)不檢查類型的方式，繞過(guò)類型檢查

//@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ò)的類型。同時(shí)加了//@ts-ignore之后，編輯器無(wú)法再對(duì)此行進(jìn)行代碼提示和自動(dòng)補(bǔ)全。

類型斷言

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

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

場(chǎng)景用例

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

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

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

泛型轉(zhuǎn)換

泛型是typescript最強(qiáng)大的功能，它提供給了開(kāi)發(fā)者們對(duì)類型“編程”的能力。通過(guò)定義泛型輔助函數(shù)，在類型斷言的基礎(chǔ)上，利用函數(shù)返回泛型的手段，巧妙地將類型匹配上，從而達(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ò)利用泛型可以指定為任意類型。

甚至可以設(shè)置兩個(gè)泛型：一個(gè)是目標(biāo)泛型，也就是函數(shù)要返回的數(shù)據(jù)類型，一個(gè)是參數(shù)泛型，也就是傳入的數(shù)據(jù)類型。當(dāng)顯式地賦予泛型P一個(gè)類型時(shí)，typescript可以為參數(shù)提供類型檢查和語(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)景用例

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

總結(jié)

遇上類型對(duì)不上，項(xiàng)目又急著上線，缺乏足夠的時(shí)間跟typescript編譯器慢慢折騰的情況下，可以酌情使用注釋忽略、類型斷言、泛型轉(zhuǎn)換的方法來(lái)強(qiáng)行指定類型。

其中注釋忽略是利用編譯器跳過(guò)的方式，停止類型檢查，帶來(lái)的后果就是該行其他數(shù)據(jù)無(wú)法獲得類型校驗(yàn)；

類型斷言、泛型轉(zhuǎn)換都通過(guò)斷言的語(yǔ)法，強(qiáng)行指定類型，使類型對(duì)應(yīng)上，進(jìn)而通過(guò)編譯；

而泛型轉(zhuǎn)換是利用輔助函數(shù)的寫(xiě)法，來(lái)減少斷言代碼的編寫(xiě)。

但這三種方式都存在風(fēng)險(xiǎn)，開(kāi)發(fā)者都需要明白賦予的數(shù)據(jù)類型的含義，避免數(shù)據(jù)錯(cuò)誤導(dǎo)致代碼出錯(cuò)。

以上就是詳解Anyscript開(kāi)發(fā)指南繞過(guò)typescript類型檢查的詳細(xì)內(nèi)容，更多關(guān)于Anyscript繞過(guò)typescript類型檢查的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論