原來 TS 中 Declare 的作用是這樣的！
當(dāng)你打開 TypeScript 項目中 *.d.ts 聲明文件時，你可能會看到 declare 的身影。你知道 declare 的作用是什么?如果不知道的話，看完本文之后，也許你就懂了。
在開發(fā) TypeScript 項目的過程中，你可能會通過 script 標(biāo)簽的形式來引入第三方 JS-SDK，比如引入微信公眾平臺的 JS-SDK。初始化之后，你就會在某個 TypeScript 文件中調(diào)用該 JS-SDK 提供的接口。
比如，調(diào)用拍照或從手機(jī)相冊中選圖接口來實現(xiàn)選圖的功能：
wx.chooseImage({ // Error：找不到名稱“wx”。ts(2304)
count: 1, // 默認(rèn)9
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: function (res) {
var localIds = res.localIds;
},
});
雖然你是按照微信開發(fā)文檔來使用 JS-SDK 提供的接口，但對于以上的代碼，TypeScript 編譯器仍會提示相應(yīng)的錯誤信息。為什么會這樣呢?這是因為 TypeScript 編譯器不認(rèn)識 wx 這個全局變量。
那么如何解決這個問題呢?答案就是使用 declare 關(guān)鍵字來聲明 wx 全局變量，從而讓 TypeScript 編譯器能夠識別該全局變量。
declare var wx: any;
在以上代碼中，declare 的意思是聲明，var 的全稱是 variable 表示變量。wx 是全局變量的名稱，而 any 表示該變量的類型。
看到這里，你會不會有困惑?為什么在 TypeScript 項目中，你可以正常地使用 JSON、Math 或 Object 等這些全局變量呢?這是因為 TypeScript 內(nèi)部幫我們完成了聲明的操作，前面提到的那些全局變量被聲明在 lib.es5.d.ts 聲明文件中：
// typescript/lib/lib.es5.d.ts
declare var JSON: JSON;
declare var Math: Math;
declare var Object: ObjectConstructor;
其實，declare 關(guān)鍵字除了可以聲明全局變量之外，它還可以用來聲明全局函數(shù)、全局類或全局枚舉類型等。工作中你可能已經(jīng)用過的 eval、isNaN、encodeURI 和 parseInt 等函數(shù)也是在 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;
需要注意的是，在聲明全局函數(shù)時，我們并不會包含該函數(shù)的具體實現(xiàn)。有了聲明文件之后，TypeScript 編譯器就能識別上面的這些全局的 JavaScript 函數(shù)了。之前找不到名稱 “wx” 問題的解決方案，相對比較暴力。更好的方案是創(chuàng)建一個 wx.d.ts 文件并詳細(xì)聲明 JS-SDK 中所提供的方法。
值得慶幸的是，在使用常見 JavaScript 開發(fā)的第三方庫的時候，你可以不用自己定義類型聲明文件。利用 TypeScript 官網(wǎng)提供的類型聲明文件搜索功能，也許就能找到質(zhì)量較高的第三方庫對應(yīng)的 TypeScript 類型聲明文件。找到之后，就可以通過 npm 來安裝包含所需類型聲明文件的模塊。
接下來我們來介紹 declare 的其它用途。當(dāng)你打開 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
編譯器將無法識別上述的這些模塊，就會提示相應(yīng)的錯誤信息。
import css from "./file.css"; // Error：找不到模塊“./file.css”或其相應(yīng)的類型聲明。ts(2307)
import logo from "./abao.jpg"; // Error：找不到模塊“./abao.jpg”或其相應(yīng)的類型聲明。ts(2307)
在聲明模塊的時候，為了避免每個資源都要聲明其對應(yīng)的模塊，TypeScript 2.0 才開始支持通配符(*)的形式來聲明模塊的名稱。
此外，TypeScript 還允許你通過 declare module 的語法來擴(kuò)展已有模塊中定義的類型。比如，你想為每個 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");
最后在組件中就可以通過組件內(nèi)部實例的 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));
