詳解Anyscript開發指南繞過typescript型別檢查

2022-09-24 14:01:35

前言

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

本文描述了幾種繞過 typescript 型別檢查的方法，幫助ts開發者在遇上第三方庫型別宣告有誤、上線時間緊張卻還被ts型別耽擱開發進度、以及其他奇奇怪怪ts型別宣告的場景時，能夠快速擺脫ts型別檢測，保障專案儘快上線。

注意，本文所提到的方法，只能作為一種最後不得已的hack手段，其目的是為了儘快完成需求而非程式碼取巧，讀者不應該將其當成一種常用的寫法並在專案內任意使用！

場景設定

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

interface FormItem{
    /** 表單型別 */
    type:string
    /** 顯示文字 */
    label:string
}
interface FormSelectItem extends FormItem{  
    /** 將表單型別指定為'select' */
    type:'select'
    /** 新增一個options屬性，型別為陣列，此型別定義存在錯誤，沒有定義options陣列裡面的內容 */
    options:[]
}
type FormRule = (FormSelectItem|FormItem)[]

程式碼裡，FormSelectItem.options期望的是一個有內容的陣列，但因為第三方庫給定的型別檔案編寫錯誤，沒有給出陣列內部項的結構，只留下[]空陣列型別定義，導致開發者給FormSelectItem.options賦予一個有內容的陣列都會導致 typescript 報錯。

解決方法

註釋忽略

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

//@ts-ignore
window.aaaa = "使用範例（ts裡不允許通過此行程式碼往全域性物件掛載屬性）"

場景用例

加上//@ts-ignore在options屬性之上，編譯器跳過了options屬性的檢查，因此報錯消失。使用起來十分簡單快捷，但是加了註釋忽略之後，開發者為options賦予任何值都是合法的，如非陣列的物件、null、undefined等容易引起程式出錯的型別。同時加了//@ts-ignore之後，編輯器無法再對此行進行程式碼提示和自動補全。

型別斷言

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

(window as unknown as {aaa:string}).aaa = "使用範例（ts裡不允許通過此行程式碼往全域性物件掛載屬性）"

場景用例

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

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

相比註釋忽略，型別斷言原本就是typescript語法的一部分，本身就會接受型別檢查，因此後續的程式碼補全提示功能是完整的。但同時開發者主觀上應當明白型別斷言的作用，避免將不正確的資料型別傳入導致程式碼出錯。

泛型轉換

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

function _any<T>(obj:any):T{
    return obj as unknown as T
}
_any<{aaa:string}>(window).aaa='使用範例（ts裡不允許通過此行程式碼往全域性物件掛載屬性）'

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

甚至可以設定兩個泛型：一個是目標泛型，也就是函數要返回的資料型別，一個是引數泛型，也就是傳入的資料型別。當顯式地賦予泛型P一個型別時，typescript可以為引數提供型別檢查和語法補全。

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