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

客官°小女子只卖身不卖艺 2023-10-14 17:10 68阅读 0赞

如果您编写 TypeScript 代码的时间足够长，您就已经看到过declare关键字。但它有什么作用，为什么要使用它？

**declare关键字告诉 TypeScript 编译器存在一个对象并且可以在代码中使用。**

本文解释了声明关键字并通过代码示例展示了不同的用例。

**定义**

在 TypeScript 中，declare关键字告诉编译器存在一个对象（并且可以在代码中引用）。它向 TypeScript 编译器声明该对象。简而言之，它允许开发人员使用在其他地方声明的对象。

编译器不会将此语句编译为 JavaScript。

开发人员可能需要使用声明关键字：

*  使用在另一个文件中声明的全局变量。
 *  使用另一个文件生成的函数、变量或类。
 *  ETC。

很多时候，declare关键字用于 TypeScript 声明文件 ( .d.ts )。

使用声明关键字，您可以声明：

*  变量（const、let、var）。
 *  类型或接口
 *  A类
 *  一个枚举
 *  一个功能
 *  一个模块
 *  命名空间

声明函数或类时，您只声明它们的结构，而不是它们的实现。

**具体例子**

您想要在 TypeScript 代码中使用 Google Analytics 脚本。为此，您必须将其包含在 HTML 页面中。

你可以这样包含它：

xml复制代码XML<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数组在 HTML 中声明。 TypeScript 编译器不知道它，所以如果你想使用它，你需要声明它。

以下是声明方式：

typescript复制代码declare const dataLayer: any[];

您现在可以在 TypeScript 代码中使用dataLayer变量。

**使用**

通常，TypeScript 代码需要导入资源，例如图像或可缩放矢量图形 (SVG)。

在这些情况下，您必须为每个模块创建一个声明。

例如，如果我们想在代码中使用 PNG，我们可以创建如下声明：

typescript复制代码declare module '*.png' {    const src: string;    export default src;}

在本例中，我们使用通配符模块声明，因此我们不必单独声明每个图像路径。

**如何声明全局变量？**

在声明文件中输入变量名称并键入以 声明全局变量。

这是一个例子：

typescript复制代码declare var CPT: number;

我们现在可以在代码中使用CPT变量。

**如何声明全局函数？**

将函数定义写入声明文件中以声明全局函数。

这是一个例子：

php复制代码declare function sayHello(hello: string): void;

现在我们可以在代码中使用sayHello函数。

**如何声明一个类？**

声明类时，只需编写类结构，而不编写每个函数的实现。

这是一个例子：

typescript复制代码declare class Animal {    constructor(name: string);
        eat(): void;
        sleep(): void;}

我们现在可以在代码中实例化Animal类。

**如何组织类型和对象？**

要组织多种类型和对象，您可以声明以下概念之一：

*  命名空间
 *  一个模块

在它们内部，声明所有类型、对象、类等。

以下是命名空间声明的示例：

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

以下是模块声明的示例：

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

**使用**

开发人员还可以使用声明关键字来扩充模块。

例如，我们可以向模块内包含的现有接口添加新属性。

下面是一个例子：

typescript复制代码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 界面并添加自定义对象。

**使用**

开发人员还可以使用声明关键字将声明添加到全局范围。

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

typescript复制代码declare global {    interface String {
            toSmallString(): string;
        }}
      String.prototype.toSmallString = (): string => {    // implementation.
        return '';};

在此示例中，我们向String原型添加一个名为toSmallString的新函数。

**最后的想法**

正如您所看到的，当使用在其他地方创建的变量时，declare关键字非常有用。

尽管这个概念并不为人所知，但要成为一名全面的 TypeScript 程序员并能够帮助您的同行，必须充分理解它。