TS聲明文件(.d.ts文件)

聲明文件介紹： 

  聲明文件 也 叫做描述文件，以d.ts結尾的文件名，比如xxx.d.ts。聲明文件主要是ts編譯器 和 編輯器用的。

• 給 ts 編譯器用：開發中 ts 不可避免要引用其它第三方的 js庫。雖然通過總結引用可以調用庫的類和方法，但是卻無法使用 TS 諸如類型檢查等特性功能。用 聲明文件就可以解決。
• 編輯器使用：使用JS文件時，讓編輯器具有智能提示功能，編輯器需要通過 聲明文件 做到 類或方法 的參數和類型。

https://segmentfault.com/a/1190000009247663  或  https://ts.xcatliu.com/basics/declaration-files

xxx.d.ts語法說明：https://www.cnblogs.com/Free-Thinker/p/10695612.html  

使用方法：

• 使用npm中的  @types 下面的 ts聲明文件：比如使用jquery，只要安裝上 
  只要項目下載了 @types/packName 這個包，項目下的文件，在使用對應的API就會有對應的智能提升。
  不需要有 tsconfig.json 配置就可以生效。不過我們使用  jsconfig.json 配置 可以對哪些目錄生效做寫限定。
  
  
• 使用自定義的 types 聲明文件：
  【個人】需要 tsconfig.json 文件中包含 聲明文件，才可以生效。

 

---

 類型聲明文件寫法：

一、全局類型

• 變量

　　　比如現在有一個全局變量，那對應的d.ts文件里面這樣寫。

declare var aaa:number

其中關鍵字declare表示聲明的意思。在d.ts文件里面，在最外層聲明變量或者函數或者類要在前面加上這個關鍵字。在typescript的規則里面，如果一個.ts、.d.ts文件如果沒有用到import或者export語法的話，那么最頂層聲明的變量就是全局變量。

• 函數

　　   由上面的全局變量的寫法我們很自然的推斷出一個全局函數的寫法如下：

/** id是用戶的id，可以是number或者string */
decalre function getName(id:number|string):string

最后的那個string表示的是函數的返回值的類型。如果函數沒有返回值可以用void表示。

• class

　　    當然除了變量和函數外，我們還有類（class）。

declare class Person {

    static maxAge: number //靜態變量
    static getMaxAge(): number //靜態方法

    constructor(name: string, age: number)  //構造函數
    getName(id: number): string 
}

• • constructor表示的是構造方法：
  • 其中static表示靜態的意思，用來表示靜態變量和靜態方法：

• 對象

declare namespace OOO{
    
}

當然了這個對象上面可能有變量，可能有函數可能有類。

declare namespace OOO{
    var aaa: number | string
    function getName(id: number | string): string
    class Person {

        static maxAge: number //靜態變量
        static getMaxAge(): number //靜態方法

        constructor(name: string, age: number) //構造函數
        getName(id: number): string //實例方法
    }
}

其實就是把上面的那些寫法放到這個namespace包起來的大括號里面，注意括號里面就不需要declare關鍵字了。

對象里面套對象也是可以的：

declare namespace OOO{
    var aaa: number | string
    // ...
    namespace O2{
        let b:number
    }
}

• 混合類型

　　　有時候有些值既是函數又是class又是對象的復雜對象。比如我們常用的jquery有各種用法：

new $()
$.ajax()
$()

　　  下面寫聲明一個  既是函數又是對象：

declare function $2(s:string): void

declare namespace $2{
    let aaa:number
}

 

二、ES6的模塊化方式（import export）   【CommonJS模式這里不講】

　　除了上面的全局的方式，我們有時候還是通過 import 的方式引入模塊化的代碼。

declare var aaa: 1
declare var bbb: 2
declare var ccc: 3 //因為這個文件里我們使用了import或者export語法，所以bbb和ccc在其他代碼里不能訪問到，即不是全局變量

export { aaa }

　使用：

import { a1, a2 } from "./A"

console.log(a1)
console.log(a2)