一、declare基本用法介紹

在TypeScript中，declare關鍵字用于定義全局變量、函數和類型等，提供了一種在編譯過程中告訴TypeScript編譯器某個標識符的類型的方式。它告訴編譯器：雖然它在當前文件中沒有聲明，但它在其他地方已經存在了。也就是說，declare讓編譯器知道這些聲明的實體是在編譯階段存在的，而不是在運行時。

使用declare關鍵字的目的是為了告訴TypeScript編譯器，某個標識符的聲明位于其他地方，不需要進行編譯器級別的檢查。它在以下幾個方面有用：

1. 聲明第三方庫

在TypeScript中，如果要使用第三方庫，需要安裝對應的類型聲明文件。但是有些第三方庫可能沒有相關聲明文件，這時候可以使用declare語句來告訴編譯器該庫的存在，使其不會報錯。

例如，要使用全局變量lodash，可以通過以下方式聲明：

declare var _: any;

這樣就可以在代碼中使用_變量，而不會報錯。

2. 聲明全局變量

有時候我們需要在代碼中使用一些全局變量，但是這些變量并沒有在當前文件中聲明。可以使用declare來告訴編譯器該變量的類型。

例如，要使用全局變量Config，在代碼中可以這樣聲明：

declare var Config: {
  apiUrl: string;
  apiKey: string;
};

這樣就可以在代碼中使用Config.apiUrl和Config.apiKey，而不會報錯。

3. 聲明全局函數和方法

有時候我們需要使用一些全局函數或方法，但是這些函數或方法并沒有在當前文件中聲明。可以使用declare來告訴編譯器這些函數或方法的類型。

例如，要使用全局函數sum，在代碼中可以這樣聲明：

declare function sum(a: number, b: number): number;

這樣就可以在代碼中調用sum函數，而不會報錯。

總結起來，declare關鍵字在TypeScript中用于聲明全局的變量、函數和類型等，在編譯過程中告訴TypeScript編譯器某個標識符的類型和存在方式，使其不會報錯。它在使用第三方庫、聲明全局變量、聲明全局函數和方法等場景下都很有用。

二、 手動編寫聲明文件

在TypeScript中，可以手動編寫聲明文件來為第三方庫或模塊添加類型定義。聲明文件的命名約定為*.d.ts，例如jquery.d.ts。

編寫聲明文件的方法有三種：

1. 全局聲明：通過declare關鍵字，直接聲明全局變量、函數或命名空間。

例如，對于全局變量$和全局函數myFunction，可以這樣編寫聲明文件：

declare const $: JQueryStatic;

declare function myFunction(a: number, b: number): number;

2. 模塊聲明：通過declare module關鍵字，為模塊添加類型定義。

例如，對于模塊myModule，可以這樣編寫聲明文件：

declare module 'myModule' {
  export function myFunction(): void;
  export const myVariable: number;
}

3. 擴展聲明：通過聲明全局的模塊依賴，為已有模塊添加類型定義。

例如，自動化構建工具gulp沒有官方的類型聲明文件，可以通過擴展聲明為其添加類型定義：

declare module 'gulp' {
  function task(name: string, cb: () => void): void;
  export = task;
}

當引入第三方庫或模塊時，TypeScript會按以下順序查找聲明文件：

1. 先查找默認位置：TypeScript會在和引入的模塊相同的文件夾下尋找名為index.d.ts的聲明文件。

2. 遍歷node_modules：TypeScript會從當前文件所在的目錄開始，逐級向上遍歷父級目錄中的node_modules文件夾，按照引入模塊的路徑尋找相應的聲明文件。

3. 與聲明文件同名的 JavaScript 文件：如果找不到聲明文件，TypeScript會查找與引入模塊文件同名的 JavaScript 文件，并嘗試解析其中的類型。

在tsconfig.json中，可以配置以下選項來輔助聲明文件的編譯：

• typeRoots：指定額外的類型聲明文件的搜索位置，通常用于指定全局聲明文件的位置。
• include：指定哪些文件需要參與編譯，可以使用通配符匹配多個文件。
• exclude：指定哪些文件不參與編譯，可以使用通配符排除多個文件。

一個完整的例子是，在使用Vue.js時，可以手動編寫聲明文件來為其添加類型定義。

1. 創建一個名為vue.d.ts的文件，內容如下：

declare module 'vue' {
  import Vue from 'vue';

  export default Vue;
}

2. 在tsconfig.json中，添加以下配置：

{
  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
}

3. 將vue.d.ts放置在./typings文件夾下。

這樣，在使用import Vue from 'vue'時，TypeScript就會使用手動編寫的聲明文件來解析類型。

通過手動編寫聲明文件，可以為第三方庫或模塊添加類型定義，提升代碼的可讀性和維護性。