如何使用 vue + typescript 編寫頁面 （typescript進階-相容篇）

董輝輝發表於2019-03-08
VueTypeScript

typescript 混用js

當我們引用了一個js編寫的模組時會報錯，這時候，如果不在引入的index檔案裡面新增.d.ts描述檔案，那麼這個模組就沒法在語義上一致通過.

通用相容性解決方案

假設匯入一個JS的模組A，並且這個模組是由npm下載的

// 當常規的匯入A時，會發生以下錯誤
/*無法找到模組“A”的宣告檔案。“D:/XXXX/XXXX/node_modules/xxxx/index.min.js”隱式擁有 "any" 型別。
  Try `npm install @types/A` if it exists or add a new declaration (.d.ts) file containing 
  `declare module 'A';`ts(7016) */
  
import A from 'A'
複製程式碼

這時候如果有提供模組的描述檔案就最好了,可以直接按照提示下載 npm install @types/A.不過很可惜,大部分都是沒有編寫宣告檔案的.但是又需要使用到這個模組時,應該怎麼做.

  • 新增描述檔案

定義和模組相同的名稱的描述檔案A.d.ts,在描述檔案內編寫模組宣告描述

// A.d.ts
declare module '*';
複製程式碼

這樣屬於一勞永逸的描述,但是無法描述到具體模組內容,因此這種方式僅僅引入的元件沒有任何操作時,比如引入的是第三方開發的vue元件,可以用這種方式偷懶.

詳細描述檔案

// A.d.ts
declare module  "A" {
    // 新增具體的描述內容
};
複製程式碼

常規的型別描述

  1. module

    模組描述 宣告這個是一個模組檔案，模組裡面使用export丟擲相應的內容

  2. namespace

    定義名稱空間，通常用的很少

  3. interface

定義介面型別，這點一般配合class使用

  1. class

定義class型別

  1. type

定義基礎型別變數

  1. keyof

指定定義變數的非基礎型別

interface Person { 
    // some props
}
type name = keyof Person
複製程式碼
  1. global

這個屬性用來定義全域性變數的申明的變數可以直接呼叫，這點用來某些直接繫結再window下的變數

declare global {
    $:any
}
複製程式碼

可以從這裡查詢到@type包查詢，已經被編寫的檔案宣告可以直接下載

如何使用 vue + typescript 編寫頁面 （typescript簡單語法篇）

相關文章