详解TypeScript如何正确使用Declare关键字

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

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

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

定义

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

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

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

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

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

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

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

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

具体例子

您想要在 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数组在 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 程序员并能够帮助您的同行，必须充分理解它。

到此这篇关于详解TypeScript如何正确使用Declare关键字的文章就介绍到这了,更多相关TypeScript Declare内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论