背景

declare關(guān)鍵字是為了服務(wù)TypeScript的。TypeScript是什么在這里就不多介紹了，但是我們要知道ts文件是需要TypeScript編譯器轉(zhuǎn)換為js文件才可以執(zhí)行，并且在編譯階段就會(huì)進(jìn)行類(lèi)型檢查。但是在TypeScript中并不支持js可識(shí)別的所有類(lèi)型，例如我們使用第三方庫(kù)JQuery，我們通過(guò)一下方法獲取一個(gè)id為‘foo’的標(biāo)簽元素。

$('#foo');
// or
jQuery('#foo');

然而在ts文件中，使用語(yǔ)法，語(yǔ)法，語(yǔ)法，底下就會(huì)爆出一條紅線提示到：Cannot find name '$'

?

因此，需要declare來(lái)聲明，告訴TypeScript編譯器該標(biāo)識(shí)符已存在，通過(guò)編譯時(shí)的檢查并在開(kāi)發(fā)時(shí)提供類(lèi)型提示。

定義

在 TypeScript 中，declare關(guān)鍵字告訴編譯器存在一個(gè)對(duì)象（并且可以在代碼中引用）。它向 TypeScript 編譯器聲明該對(duì)象。簡(jiǎn)而言之，它允許開(kāi)發(fā)人員使用在其他地方聲明的對(duì)象。
注：編譯器不會(huì)將declare語(yǔ)句編譯為 JavaScript。對(duì)比下面兩段代碼：

// declare聲明了一個(gè)名為 myGlobal 的全局變量，并指定其類(lèi)型為 any。
// 該聲明并不會(huì)生成真正的 JavaScript 代碼，而只是告訴 TypeScript 編譯器該變量存在。
declare var myGlobal: any;

// 給 myGlobal 賦值為 42。
myGlobal = 42; 
console.log(myGlobal); // 42

// 直接聲明了一個(gè)名為 myGlobal 的全局變量，并指定其類(lèi)型為 any。這會(huì)生成真正的 JavaScript 代碼。
var myGlobal: any;

// 給 myGlobal 賦值為 42。
myGlobal = 42;
console.log(myGlobal); // 42

使用

• declare var 聲明全局變量
• declare function 聲明全局方法
• declare class 聲明全局類(lèi)
• declare enum 聲明全局枚舉類(lèi)型
• declare namespace 聲明（含有子屬性的）全局對(duì)象
• declare global 擴(kuò)展全局變量
• declare module 擴(kuò)展模塊

聲明文件

通常，在使用第三方庫(kù)或模塊時(shí)，有兩種方式引入聲明文件：

• 全局聲明：如果第三方庫(kù)或模塊是全局可訪問(wèn)的，你可以在整個(gè)項(xiàng)目的任何地方直接使用它們，而無(wú)需顯式導(dǎo)入。此時(shí)，你只需要確保在 TypeScript 項(xiàng)目中正確引入了相應(yīng)的聲明文件。一般情況下，TypeScript 會(huì)自動(dòng)查找并加載全局聲明文件。如果沒(méi)有自動(dòng)加載，你可以使用 /// 的方式在具體的源文件中將聲明文件引入。
• 模塊導(dǎo)入：如果第三方庫(kù)或模塊是通過(guò)模塊化方式提供的，你需要使用 import 語(yǔ)句將其導(dǎo)入到你的代碼中，同時(shí)也需要確保相應(yīng)的聲明文件被正確引入。在這種情況下，你可以使用 import 或 require 來(lái)引入庫(kù)，并且不需要顯式地引入聲明文件，因?yàn)?TypeScript 編譯器會(huì)根據(jù)模塊的導(dǎo)入語(yǔ)句自動(dòng)查找和加載相應(yīng)的聲明文件。

有很多第三方庫(kù)提供了聲明文件，可以在packages.json文件中查看。types表示類(lèi)型聲明文件是哪一個(gè)。

可以使用 @types 統(tǒng)一管理第三方庫(kù)的聲明文件。@types 的使用方式很簡(jiǎn)單，直接用 npm 安裝對(duì)應(yīng)的聲明模塊即可，以 jQuery 舉例：

npm install @types/jquery --save-dev