如何在TypeScript中创建可在普通JavaScript中使用的全局名称空间/类？

Question

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

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

当前，在外部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的事物必须在其他地方定义。

declare var Blog: BlogClass;

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

Blog = new BlogClass();

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

删除declare ，此行将出现在生成的代码中：

var Blog;

但是，它不一定在全局范围内创建var Blog当您将打字稿代码编译为模块时，它将在模块内部创建，并且将无法由外部javascript代码访问，除非您经历了从打字稿模块中将其导出并在您的javacsript代码中导入该模块。

确保在全局范围内创建对象的最简单（但有点脏）的方法是明确地做到这一点：

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