當你打開 TypeScript 項目中 *.d.ts 聲明文件時，你可能會看到 declare 的身影。你知道 declare 的作用是什么?如果不知道的話，看完本文之后，也許你就懂了。

在開發 TypeScript 項目的過程中，你可能會通過 script 標簽的形式來引入第三方 JS-SDK，比如引入微信公眾平臺的 JS-SDK。初始化之后，你就會在某個 TypeScript 文件中調用該 JS-SDK 提供的接口。

比如，調用拍照或從手機相冊中選圖接口來實現選圖的功能：

wx.chooseImage({ // Error：找不到名稱“wx”。ts(2304)
  count: 1, // 默認9
  sizeType: ["original", "compressed"],
  sourceType: ["album", "camera"],
  success: function (res) {
    var localIds = res.localIds;
  },
});

雖然你是按照微信開發文檔來使用 JS-SDK 提供的接口，但對于以上的代碼，TypeScript 編譯器仍會提示相應的錯誤信息。為什么會這樣呢?這是因為 TypeScript 編譯器不認識 wx 這個全局變量。

那么如何解決這個問題呢?答案就是使用 declare 關鍵字來聲明 wx 全局變量，從而讓 TypeScript 編譯器能夠識別該全局變量。

declare var wx: any;

在以上代碼中，declare 的意思是聲明，var 的全稱是 variable 表示變量。wx 是全局變量的名稱，而 any 表示該變量的類型。

看到這里，你會不會有困惑?為什么在 TypeScript 項目中，你可以正常地使用 JSON、Math 或 Object 等這些全局變量呢?這是因為 TypeScript 內部幫我們完成了聲明的操作，前面提到的那些全局變量被聲明在 lib.es5.d.ts 聲明文件中：

// typescript/lib/lib.es5.d.ts
declare var JSON: JSON;
declare var Math: Math;
declare var Object: ObjectConstructor;

其實，declare 關鍵字除了可以聲明全局變量之外，它還可以用來聲明全局函數、全局類或全局枚舉類型等。工作中你可能已經用過的 eval、isNaN、encodeURI 和 parseInt 等函數也是在 lib.es5.d.ts 聲明文件中聲明的：

declare function eval(x: string): any;
declare function isNaN(number: number): boolean;
declare function encodeURI(uri: string): string;
declare function parseInt(string: string, radix?: number): number;

需要注意的是，在聲明全局函數時，我們并不會包含該函數的具體實現。有了聲明文件之后，TypeScript 編譯器就能識別上面的這些全局的 JavaScript 函數了。之前找不到名稱 “wx” 問題的解決方案，相對比較暴力。更好的方案是創建一個 wx.d.ts 文件并詳細聲明 JS-SDK 中所提供的方法。

值得慶幸的是，在使用常見 JavaScript 開發的第三方庫的時候，你可以不用自己定義類型聲明文件。利用 TypeScript 官網提供的類型聲明文件搜索功能，也許就能找到質量較高的第三方庫對應的 TypeScript 類型聲明文件。找到之后，就可以通過 npm 來安裝包含所需類型聲明文件的模塊。

接下來我們來介紹 declare 的其它用途。當你打開 Vite 項目中的 client.d.ts 聲明文件，你會看到很多聲明模塊的代碼。

// packages/vite/client.d.ts
declare module '*.css' {
  const css: string
  export default css
}
declare module '*.jpg' {
  const src: string
  export default src
}
declare module '*.ttf' {
  const src: string
  export default src
}

在以上代碼中，我們聲明了 css、jpg 和 ttf 模塊。為什么需要聲明這些模塊呢?因為如果你不聲明的話，TypeScript
編譯器將無法識別上述的這些模塊，就會提示相應的錯誤信息。

import css from "./file.css"; // Error：找不到模塊“./file.css”或其相應的類型聲明。ts(2307)
import logo from "./abao.jpg"; // Error：找不到模塊“./abao.jpg”或其相應的類型聲明。ts(2307)

在聲明模塊的時候，為了避免每個資源都要聲明其對應的模塊，TypeScript 2.0 才開始支持通配符(*)的形式來聲明模塊的名稱。

此外，TypeScript 還允許你通過 declare module 的語法來擴展已有模塊中定義的類型。比如，你想為每個 Vue 組件實例增加 $axios 屬性，就可以這樣做：

import { AxiosInstance } from "axios";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $axios: AxiosInstance;
  }
}

之后，再利用 config 對象的 globalProperties 屬性，就可以高效地為每個組件實例增加 $axios 屬性：

import { createApp } from "vue";
import axios from "axios";
import App from "./App.vue";

const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.mount("#app");

最后在組件中就可以通過組件內部實例的 proxy.$axios 屬性來訪問 axios 對象：

import { getCurrentInstance , ComponentInternalInstance} from "vue"

const { proxy } = getCurrentInstance() as ComponentInternalInstance
proxy!.$axios
  .get("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.data)
  .then((json) => console.log(json));