javascript - 如何在 TypeScript 中创建可在纯 JavaScript 中使用的全局命名空间/类？

Question

我的 TypeScript 和纯 JavaScript 代码需要共享命名空间和一些数据。 TypeScript 应该“准备”一个命名空间，外部 JS 提供数据，TypeScript 处理它。

上下文是 Angular 2 应用程序。加载顺序为:

1. Angular 2 应用及其 JavaScript 启动
2. 从外部源动态加载自定义外部 JavaScript 文件(JSONP 样式)
3. Angular 2 应用对加载的 JS 文件生成的数据进行进一步处理

当前在外部 JavaScript 文件中我正在执行以下操作:

if (typeof Blog === 'undefined')
{
    Blog = {
        Posts: []
    }
}
// ...
Blog.Posts.push(post);

在我的 Angular 2 应用程序中，这个 JavaScript 文件会被动态加载，然后像这样访问该值:

declare var Blog: any;
...
let firstPost = Blog.Posts[0];

这有效，我可以访问外部 JS 放置的数据。

现在我想尽可能减少 JavaScript 部分。因此，我想将 Blog 和 Posts 的声明移至 TypeScript，最好这样它就可以以强类型的方式在那里使用。

所以我希望我的 JavaScript 看起来像这样:

// ...
Blog.Posts.push(post);

请注意缺少 Blog 声明。我在 TypeScript 中尝试过类似的方法:

declare var Blog: BlogClass; // <- this is probably wrong, can be changed to anything necessary to make it work...
// ...
Blog = new BlogClass();

但显然这并不那么容易。我的 Angular 2 应用程序死机了，并显示一条通用错误消息。该错误是由 Blog = new BlogClass() 引起的。

关于如何解决这个问题有任何提示吗？

Answer 1

declare 表示所声明的事物必须在其他地方定义。

declare var Blog: BlogClass;

在生成的 javascript 中不会生成任何代码，因此此分配

Blog = new BlogClass(); 

运行时失败，因为博客不存在。

当您删除declare时，此行将出现在生成的代码中:

var Blog;

但是，它不一定在全局范围内创建 var Blog - 当您将 typescript 代码编译为模块时，它将在模块内部创建，并且外部 javascript 代码将无法访问，除非您通过从 typescript 模块导出它并在 javacsript 代码中导入该模块的路径。

确保在全局范围内创建对象的最简单(但有点肮脏)的方法是显式执行此操作:

(window as any).Blog = new BlogClass();