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

typescript 混用js

當咱們引用了一個js編寫的模塊時會報錯，這時候，若是不在引入的index文件裏面添加.d.ts描述文件，那麼這個模塊就無法在語義上一致經過.

通用兼容性解決方案

假設導入一個JS的模塊A，而且這個模塊是由npm下載的

> npm install A;
複製代碼

這時候在ts中使用時發生如下錯誤：

// 當常規的導入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';
複製代碼

詳細描述文件

// A.d.ts
declare module  "A" {
    // 添加具體的描述內容
};
複製代碼

常規的類型描述

1. module

   模塊描述 聲明這個是一個模塊文件，模塊裏面使用export拋出相應的內容

2. namespace

   定義命名空間，一般用的不多

3. interface

定義接口類型，這點通常配合class使用

4. class

定義class類型

5. type

定義基礎類型變量

6. keyof

指定定義變量的非基礎類型

interface Person { 
    // some props
}
type name = keyof Person
複製代碼

7. global

這個屬性用來定義全局變量的申明的變量能夠直接調用，這點用來某些直接綁定再window下的變量

declare global {
    $:any
}
複製代碼

能夠從這裏查詢到@type包查詢，已經被編寫的文件聲明能夠直接下載

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