建站
咨詢
售后
建站咨詢
新聞中心
在開發(fā) TypeScript 項(xiàng)目的過(guò)程中，你可能會(huì)通過(guò) script 標(biāo)簽的形式來(lái)引入第三方 JS-SDK，比如引入微信公眾平臺(tái)的 JS-SDK。初始化之后，你就會(huì)在某個(gè) TypeScript 文件中調(diào)用該 JS-SDK 提供的接口。
比如，調(diào)用拍照或從手機(jī)相冊(cè)中選圖接口來(lái)實(shí)現(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ā)文檔來(lái)使用 JS-SDK 提供的接口，但對(duì)于以上的代碼，TypeScript 編譯器仍會(huì)提示相應(yīng)的錯(cuò)誤信息。為什么會(huì)這樣呢?這是因?yàn)?TypeScript 編譯器不認(rèn)識(shí) wx 這個(gè)全局變量。
那么如何解決這個(gè)問(wèn)題呢?答案就是使用 declare 關(guān)鍵字來(lái)聲明 wx 全局變量，從而讓 TypeScript 編譯器能夠識(shí)別該全局變量。
declare var wx: any;
在以上代碼中，declare 的意思是聲明，var 的全稱是 variable 表示變量。wx 是全局變量的名稱，而 any 表示該變量的類型。
看到這里，你會(huì)不會(huì)有困惑?為什么在 TypeScript 項(xiàng)目中，你可以正常地使用 JSON、Math 或 Object 等這些全局變量呢?這是因?yàn)?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;
其實(shí)，declare 關(guān)鍵字除了可以聲明全局變量之外，它還可以用來(lái)聲明全局函數(shù)、全局類或全局枚舉類型等。工作中你可能已經(jīng)用過(guò)的 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í)，我們并不會(huì)包含該函數(shù)的具體實(shí)現(xiàn)。有了聲明文件之后，TypeScript 編譯器就能識(shí)別上面的這些全局的 JavaScript 函數(shù)了。之前找不到名稱 “wx” 問(wèn)題的解決方案，相對(duì)比較暴力。更好的方案是創(chuàng)建一個(gè) wx.d.ts 文件并詳細(xì)聲明 JS-SDK 中所提供的方法。
值得慶幸的是，在使用常見 JavaScript 開發(fā)的第三方庫(kù)的時(shí)候，你可以不用自己定義類型聲明文件。利用 TypeScript 官網(wǎng)提供的類型聲明文件搜索功能，也許就能找到質(zhì)量較高的第三方庫(kù)對(duì)應(yīng)的 TypeScript 類型聲明文件。找到之后，就可以通過(guò) npm 來(lái)安裝包含所需類型聲明文件的模塊。
接下來(lái)我們來(lái)介紹 declare 的其它用途。當(dāng)你打開 Vite 項(xiàng)目中的 client.d.ts 聲明文件，你會(huì)看到很多聲明模塊的代碼。
// 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 模塊。為什么需要聲明這些模塊呢?因?yàn)槿绻悴宦暶鞯脑?，TypeScript
編譯器將無(wú)法識(shí)別上述的這些模塊，就會(huì)提示相應(yīng)的錯(cuò)誤信息。
import css from "./file.css"; // Error：找不到模塊“./file.css”或其相應(yīng)的類型聲明。ts(2307)
import logo from "./abao.jpg"; // Error：找不到模塊“./abao.jpg”或其相應(yīng)的類型聲明。ts(2307)
在聲明模塊的時(shí)候，為了避免每個(gè)資源都要聲明其對(duì)應(yīng)的模塊，TypeScript 2.0 才開始支持通配符(*)的形式來(lái)聲明模塊的名稱。
此外，TypeScript 還允許你通過(guò) declare module 的語(yǔ)法來(lái)擴(kuò)展已有模塊中定義的類型。比如，你想為每個(gè) Vue 組件實(shí)例增加 $axios 屬性，就可以這樣做：
import { AxiosInstance } from "axios";
declare module "@vue/runtime-core" {
interface ComponentCustomProperties {
$axios: AxiosInstance;
}
}之后，再利用 config 對(duì)象的 globalProperties 屬性，就可以高效地為每個(gè)組件實(shí)例增加 $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");最后在組件中就可以通過(guò)組件內(nèi)部實(shí)例的 proxy.$axios 屬性來(lái)訪問(wèn) axios 對(duì)象：
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)); 新聞名稱：原來(lái)TS中Declare的作用是這樣的！
文章起源：http://www.5511xx.com/article/ccocejc.html
