前言

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

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

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

場景設定

假設存在一個第三方庫，允許開發(fā)者通過 json 定義一個表單，其 typescript 類型定義如下：

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

代碼里，FormSelectItem.options期望的是一個有內(nèi)容的數(shù)組，但因為第三方庫給定的類型文件編寫錯誤，沒有給出數(shù)組內(nèi)部項的結(jié)構(gòu)，只留下[]空數(shù)組類型定義，導致開發(fā)者給FormSelectItem.options賦予一個有內(nèi)容的數(shù)組都會導致 typescript 報錯。

解決方法

注釋忽略

//@ts-ignore會讓typescript編譯器跳過注釋下一行代碼，不對其進行類型檢查。通過不檢查類型的方式，繞過類型檢查

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

場景用例

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

類型斷言

類型斷言是typescript中一種將一個類型指定為另一個類型的語法。通過指定任意類型為目標類型的方式，達到編譯器不報錯的效果。

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

場景用例

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

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

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

泛型轉(zhuǎn)換

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

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

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

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

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:''
})

場景用例

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

總結(jié)

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

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

類型斷言、泛型轉(zhuǎn)換都通過斷言的語法，強行指定類型，使類型對應上，進而通過編譯；

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

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

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

最新評論