快捷導(dǎo)航

詳解TypeScript如何正確使用Declare關(guān)鍵字

更新時(shí)間：2023年08月10日 10:59:20 作者：云端科技

如果您編寫(xiě) TypeScript 代碼的時(shí)間足夠長(zhǎng)，您就已經(jīng)看到過(guò)declare關(guān)鍵字，但它有什么作用，為什么要使用它呢，下面小編就來(lái)和大家簡(jiǎn)單講講

定義

在 TypeScript 中，declare關(guān)鍵字告訴編譯器存在一個(gè)對(duì)象（并且可以在代碼中引用）。它向 TypeScript 編譯器聲明該對(duì)象。簡(jiǎn)而言之，它允許開(kāi)發(fā)人員使用在其他地方聲明的對(duì)象。

編譯器不會(huì)將此語(yǔ)句編譯為 JavaScript。

開(kāi)發(fā)人員可能需要使用聲明關(guān)鍵字：

使用在另一個(gè)文件中聲明的全局變量。
使用另一個(gè)文件生成的函數(shù)、變量或類。
ETC。

很多時(shí)候，declare關(guān)鍵字用于 TypeScript 聲明文件 ( .d.ts )。

使用聲明關(guān)鍵字，您可以聲明：

變量（const、let、var）。
類型或接口
A類
一個(gè)枚舉
一個(gè)功能
一個(gè)模塊
命名空間

聲明函數(shù)或類時(shí)，您只聲明它們的結(jié)構(gòu)，而不是它們的實(shí)現(xiàn)。

具體例子

您想要在 TypeScript 代碼中使用 Google Analytics 腳本。為此，您必須將其包含在 HTML 頁(yè)面中。

你可以這樣包含它：

<script?async?src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script><script>
??window.dataLayer?=?window.dataLayer?||?[];??function?gtag(){dataLayer.push(arguments)};
??gtag('js',?new?Date());
??gtag('config',?'TAG_ID');</script>

dataLayer數(shù)組在 HTML 中聲明。 TypeScript 編譯器不知道它，所以如果你想使用它，你需要聲明它。

以下是聲明方式：

declare?const?dataLayer:?any[];

您現(xiàn)在可以在 TypeScript 代碼中使用dataLayer變量。

使用

通常，TypeScript 代碼需要導(dǎo)入資源，例如圖像或可縮放矢量圖形 (SVG)。

在這些情況下，您必須為每個(gè)模塊創(chuàng)建一個(gè)聲明。

例如，如果我們想在代碼中使用 PNG，我們可以創(chuàng)建如下聲明：

declare?module?'*.png'?{????const?src:?string;????export?default?src;}

在本例中，我們使用通配符模塊聲明，因此我們不必單獨(dú)聲明每個(gè)圖像路徑。

如何聲明全局變量

在聲明文件中輸入變量名稱并鍵入以聲明全局變量。

這是一個(gè)例子：

declare?var?CPT:?number;

我們現(xiàn)在可以在代碼中使用CPT變量。

如何聲明全局函數(shù)

將函數(shù)定義寫(xiě)入聲明文件中以聲明全局函數(shù)。

這是一個(gè)例子：

declare?function?sayHello(hello:?string):?void;

現(xiàn)在我們可以在代碼中使用sayHello函數(shù)。

如何聲明一個(gè)類

聲明類時(shí)，只需編寫(xiě)類結(jié)構(gòu)，而不編寫(xiě)每個(gè)函數(shù)的實(shí)現(xiàn)。

這是一個(gè)例子：

declare?class?Animal?{????constructor(name:?string);
????eat():?void;
????sleep():?void;}

我們現(xiàn)在可以在代碼中實(shí)例化Animal類。

如何組織類型和對(duì)象

要組織多種類型和對(duì)象，您可以聲明以下概念之一：

命名空間
一個(gè)模塊

在它們內(nèi)部，聲明所有類型、對(duì)象、類等。

以下是命名空間聲明的示例：

declare?namespace?AnimalLib?{????class?Animal?{????????constructor(name:?string);
????????eat():?void;
????????sleep():?void;
????}
????type?Animals?=?'Fish'?|?'Dog';}

以下是模塊聲明的示例：

declare?module?AnimalLib?{????class?Animal?{????????constructor(name:?string);
????????eat():?void;
????????sleep():?void;
????}
????type?Animals?=?'Fish'?|?'Dog';}

使用聲明關(guān)鍵字來(lái)擴(kuò)充模塊

開(kāi)發(fā)人員還可以使用聲明關(guān)鍵字來(lái)擴(kuò)充模塊。

例如，我們可以向模塊內(nèi)包含的現(xiàn)有接口添加新屬性。

下面是一個(gè)例子：

import?{?
????Palette?as?MuiPallete?}?from?'@mui/material/styles/createPalette';
??declare?module?'@mui/material/styles/createPalette'?{????interface?Palette?extends?MuiPallete?{
????????custom:?{
????????????prop1:?string;
????????}
????}}

在這里，我們從 Material UI 樣式模塊擴(kuò)充Palette 界面并添加自定義對(duì)象。

使用聲明關(guān)鍵字將聲明添加到全局范圍

開(kāi)發(fā)人員還可以使用聲明關(guān)鍵字將聲明添加到全局范圍。

例如，以下是向String JavaScript 對(duì)象添加新方法的方法：

declare?global?{????interface?String?{
????????toSmallString():?string;
????}}
??String.prototype.toSmallString?=?():?string?=>?{????//?implementation.
????return?'';};

在此示例中，我們向String原型添加一個(gè)名為toSmallString的新函數(shù)。