Declare 关键字在 TypeScript 中如何正确使用

如果您编写TypeScript代码的时间足够长，您就已经看到过declare关键字。但它有什么作用，为什么要使用它？declare关键字告诉TypeScript编译器存在一个对象并且可以在代码中使用。本文解释了声明关键字并通过代码示例展示了不同的用例。定义在TypeScript中，declare关键字告诉编译器存在一个对象（并且可以在代码中引用）。它向TypeScript编译器声明该对象。简而言之，它允许开发人员使用在其他地方声明的对象。编译器不会将此语句编译为JavaScript。开发人员可能需要使用声明关键字：使用在另一个文件中声明的全局变量。使用另一个文件生成的函数、变量或类。ETC。很多时候，declare关键字用于TypeScript声明文件(

.d.ts

)。使用声明关键字，您可以声明：变量（const、let、var）。类型或接口A类一个枚举一个功能一个模块命名空间声明函数或类时，您只声明它们的结构，而不是它们的实现。具体例子您想要在TypeScript代码中使用GoogleAnalytics脚本。为此，您必须将其包含在HTML页面中。你可以这样包含它：XML<script

async

src="/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数组在HTML中声明。

TypeScript编译器不知道它，所以如果你想使用它，你需要声明它。以下是声明方式：declare

const

dataLayer:

any[];您现在可以在TypeScript代码中使用dataLayer变量。使用通常，TypeScript代码需要导入资源，例如图像或可缩放矢量图形(SVG)。在这些情况下，您必须为每个模块创建一个声明。例如，如果我们想在代码中使用PNG，我们可以创建如下声明：declare

module

'*.png'

{

const

src:

string;

export

default

src;}在本例中，我们使用通配符模块声明，因此我们不必单独声明每个图像路径。如何声明全局变量？在声明文件中输入变量名称并键入以

声明全局变量。这是一个例子：declare

var

CPT:

number;我们现在可以在代码中使用CPT变量。如何声明全局函数？将函数定义写入声明文件中以声明全局函数。这是一个例子：declare

function

sayHello(hello:

string):

void;现在我们可以在代码中使用sayHello函数。如何声明一个类？声明类时，只需编写类结构，而不编写每个函数的实现。这是一个例子：declare

class

Animal

{

constructor(name:

string);

eat():

void;

sleep():

void;}我们现在可以在代码中实例化Animal类。如何组织类型和对象？要组织多种类型和对象，您可以声明以下概念之一：命名空间一个模块在它们内部，声明所有类型、对象、类等。以下是命名空间声明的示例：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';}使用开发人员还可以使用声明关键字来扩充模块。例如，我们可以向模块内包含的现有接口添加新属性。下面是一个例子：import

{

Palette

as

MuiPallete

}

from

'@mui/material/styles/createPalette';

declare

module

'@mui/material/styles/createPalette'

{

interface

Palette

extends

MuiPallete

{

custom:

{

prop1:

string;

}

}}在这里，我们从MaterialUI样式模块扩充Palette

界面并添加自定义对象。使用开发人员还可以使用声明关键字将声明添加到全局范围。例如，以下是向String

JavaScript对象添加新方法的方法：declare

global

{

interface

String

{

toSmallString():

string;

}}

Stotype.toSmallString

=

():

string

=>

{

//

implementation.

return

'';};在此示例中，我们向String