腳本之家服務器常用軟件

快捷導航

詳解TypeScript如何正確使用Declare關鍵字

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

如果您編寫 TypeScript 代碼的時間足夠長，您就已經(jīng)看到過declare關鍵字，但它有什么作用，為什么要使用它呢，下面小編就來和大家簡單講講

定義

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

編譯器不會將此語句編譯為 JavaScript。

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

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

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

使用聲明關鍵字，您可以聲明：

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

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

具體例子

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

你可以這樣包含它：

<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 代碼需要導入資源，例如圖像或可縮放矢量圖形 (SVG)。

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

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

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

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

如何聲明全局變量

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

這是一個例子：

declare?var?CPT:?number;

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

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

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

這是一個例子：

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

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

如何聲明一個類

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

這是一個例子：

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

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

如何組織類型和對象

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

命名空間
一個模塊

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

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

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';}

使用聲明關鍵字來擴充模塊

開發(fā)人員還可以使用聲明關鍵字來擴充模塊。

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

下面是一個例子：

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

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

使用聲明關鍵字將聲明添加到全局范圍

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

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

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

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