TypeScript中declare关键字的用途

declare

关键字的用途是什么

type Callback = (err: Error | String, data: Array<CalledBackData>) => void;

type Callback=（err:Error | String，data:Array）=>void；

vs

declare-type-Callback=（err:Error | String，data:Array）=>void；

---

在TS中找不到解释

declare

关键字用途的文档。

这里是一个真实的示例

我有一个使用Webpack热中间件的TypeScript React应用程序。Webpack热中间件不是用TypeScript编写的，而是用老式的JavaScript编写的。因此，它没有类型声明，TypeScript编译器可以对其进行检查

当我运行代码时，Webpack Hot Middleware中的对象

模块

就存在了，尽管它是隐藏在我新奇的TypeScript React应用程序中的老式JavaScript，但我可以对其进行console.log

module

对象也有键，例如

module.hot

，键可以有值。但是TypeScript设计时编译器（至少在VSCode中）在它下面画了一条红色的曲线，表示

属性'hot'不存在

。但它确实存在

要使TypeScript编译器同意，请如下声明：

declare let module: any

现有的

模块

对象现在有一个类型为

any

，这使TypeScript编译器现在很高兴，red squiggly消失了，现在我可以继续编译和编写我的其他代码

---

如果删除关键字

declare

，只写

let module:any

，它将不会编译，而是说

'module'已经存在

。这就是公认答案中“环境”的含义。

导入某些库时，如果没有声明类型文件，例如*.d.ts，则使用delcare关键字

之后vs eslint不会检查语法和上下文，如果您默认使用tsc编译器，将允许您传递声明删除语法错误的好理由

TL；DR

declare

用于告诉编译器“这个东西（通常是一个变量）已经存在，因此可以被其他代码引用，也不需要将此语句编译成任何JavaScript”

常见用例：

将对网页的引用添加到编译器不知道的JavaScript文件中。也许这是一个来自其他领域的脚本，比如“foo.com”。评估后，脚本将使用一些有用的API方法创建一个对象，并将其分配给全局范围上的标识符“fooSdk”

您希望您的TypeScript代码能够调用

fooSdk.doSomething（）

，但由于编译器不知道此变量存在，您将得到一个编译错误

然后使用

declare

关键字告诉编译器“相信我，此变量存在并且具有此类型”。编译器将使用此语句静态检查其他代码，但不会将其编译为输出中的任何JavaScript

declare const fooSdk = { doSomething: () => boolean }

同样，您可以将declare关键字添加到类属性中，以告知编译器不要发出任何将创建此属性的代码，前提是您有自己的代码来创建编译器不知道或不理解的属性

您的特定示例是不同的，因为您声明的是一个类型，而不是一个变量，类型已经不编译成任何JavaScript。我不知道是否有任何理由声明类型。

来自Typescript文档：

为了描述不是用TypeScript编写的库的形状，我们需要声明库公开的API。因为大多数JavaScript库只公开少数顶级对象，所以名称空间是表示它们的好方法

我们将不定义实现的声明称为“环境声明”。通常在.d.ts文件中定义。如果您熟悉C/C++，可以将这些文件视为.h文件。让我们看几个例子

环境名称空间 流行的库D3在名为D3的全局对象中定义其功能。因为这个库是通过标记（而不是模块加载器）加载的，所以它的声明使用名称空间来定义它的形状。为了让TypeScript编译器看到这个形状，我们使用环境名称空间声明。例如，我们可以按如下方式开始编写：

D3.d.ts（简化摘录）

---

在编写任何实现代码之前，您可以使用declare告诉编译器有关类型的信息，TypeScript会很高兴

declare function foo(name: string): string

---

declare

为一个已经存在的变量指定一个类型，而不是声明一个新变量。@Danon-答案就在这里……字面上是一句话，它点击了这是不正确的；declare关键字不是为了这个目的，但它在那个场景中使用。不包含任何有意义的含义。

declare namespace D3 {
    export interface Selectors {
        select: {
            (selector: string): Selection;
            (element: EventTarget): Selection;
        };
    }
    // (...)
}

declare function foo(name: string): string