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

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

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

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

定义

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

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

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

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

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

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

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

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

具体例子

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

你可以这样包含它：

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 编译器不知道它，所以如果你想使用它，你需要声明它。

以下是声明方式：

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

在这里，我们从 Material UI 样式模块扩充Palette 界面并添加自定义对象。

使用

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

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

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

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

最后的想法

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

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