在 TypeScript 模块中定义全局命名空间/变量答案

【问题标题】：Define global namespace/variable within a TypeScript module在 TypeScript 模块中定义全局命名空间/变量
【发布时间】：2016-02-25 06:08:38
【问题描述】：

在 TypeScript 中，我可以定义一个全局/顶级命名空间并在另一个文件中使用它，如下所示：

namespace foo.blah {
    export function baz() {
        console.log('hello');
    }
}

在另一个文件中，这是可行的：

foo.blah.baz();

但是，如果我从另一个模块导入一些东西：

import Thing from 'boo';

namespace foo.blah {
    export function baz() {
        console.log('hello');
    }
}

突然我的整个文件是一个模块，foo.blah 命名空间是本地的，而不是全局的，并且另一个文件中的 foo.blah.baz() 调用失败。 export namespace ... 只是使命名空间成为模块导出的一部分，而不是全局。

有没有办法编写一个从其他模块导入但也定义全局/顶级符号的 TypeScript 文件？

目前我正在这样做：

import Thing from 'boo';
import * as $ from 'jquery';

namespace foo.blah {
    export function baz() {
        console.log('hello');
    }
}

$.extend(true, window, {foo});

这可行，但 TypeScript 编译器仍然看不到 foo.blah... 作为全局存在于其他文件中。

（该文件是 Webpack 的入口点，我正在尝试从 Webpack 包中的其他模块导入内容并将它们分配给全局变量，以便它们可以在页面上的 <script> 标签中使用。）

【问题讨论】：

标签： module namespaces typescript global webpack

【解决方案1】：

当您添加 import 时，您会从内部模块切换到外部模块，正如规范所述：

在外部模块中，文件之间的关系在文件级别的导入和导出条款。在 TypeScript 中，任何包含顶级导入或导出的文件被视为外部模块。

http://www.typescriptlang.org/Handbook#modules-going-external

外部模块背后的理念是避免全局对象，你为什么不使用foo.blah（以及你需要的所有东西）创建一个新模块并按照 TypeScript 的预期导入它？

【讨论】：

正如我所说，我正在尝试使用其他模块导出的内容来定义用于页面内<script> 标记的全局变量。（该应用程序已有十多年的历史，我正在尝试逐步将其迁移到纯 TypeScript。）
如果你想慢慢迁移，那为什么不使用.d.ts文件（例如github.com/DefinitelyTyped/DefinitelyTyped/blob/master/ace/…）然后只使用///<reference path="relative/path/to/file.d.ts" />这样的引用？

【解决方案2】：

解决办法是在全局中声明命名空间。

declare global {
  namespace foo.blah {
     function baz() {
       console.log('hello');
     }
  }
}

【讨论】：