问TypeScript中declare关键字的用途

EN

这是一个真实的例子。

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

当我运行我的代码时，来自Webpack热中间件的对象module存在，我可以console.log它，尽管它是隐藏在我漂亮的新TypeScript React应用程序中的很好的老式JavaScript。

module对象也有键，比如module.hot，并且键可以有值。但是TypeScript设计时编译器(至少在VSCode中)在它下面画了一个红色的曲线，上面写着property 'hot' does not exist。但它确实存在！

要使TypeScript编译器同意，请像这样声明它：

declare let module: any

现有的module对象现在有一种类型的any，这让TypeScript编译器很高兴，红色曲线消失了，现在我可以继续编译和编写我的其他代码了。

如果您删除关键字declare，而只是编写let module: any，它将不会编译，而是显示为'module' already exists。这就是公认答案中“环境”的意思。

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

declare function foo(name: string): string

考虑这个场景:你有一个Typescript项目。然后，不管出于什么原因，您决定用JavaScript编写一个模块，并在您的Typescript代码中使用它。

// getMyName.js
module.exports = function getMyName(name) {
    return name;
}

然后将其导入到您的typescript代码中

// myCode.ts
import getMyName from 'getMyName'; //getMyName is a JS module not typescript

当导入JS模块时(allowJs编译器选项应该设置为false，否则JS文件将在没有任何类型定义的情况下被解析)，Typescript的编译器会抱怨该模块根本不是一个模块！

Could not find a declaration file for module '/absolute/path/to/getMyName.ts'

这是因为Typescript本身并不能解析成JS代码。为了避免这个问题，我们应该为我们的JS模块提供类型定义(filename.d.ts)。为此，您可以使用declare和export。

// getMyName.d.ts
declare function getMyName(name: string): string;

export default getMyName;

之后，当我们导入JS模块时，typescript不会抱怨任何事情，因为它现在可以访问类型。