javascript - 如何从非模块文件中使用js模块

Question

我是 js 模块的初学者。

我正在开发一个相当简单的 Web 应用程序。它使用严重依赖模块的 typescript 和 angular 2。

我的大多数应用程序 ts 文件“导入”一个或多个 js 模块(通常主要是 angular 2 模块)。

据我了解，因为我的应用程序 ts 文件具有顶级“导入”，它们会自动被 typescript 视为 js 模块。

但是，我希望我的任何其他应用程序 ts 文件都可以访问我的任何应用程序 ts 文件，而不必相互“导入”。但是因为它们现在本身就是模块，所以 ts 要求我这样做......

这可能吗？

对于我的每个应用程序 ts 文件，我都必须声明其中使用的所有其他应用程序 ts 文件，这对我来说似乎很疯狂(我喜欢只有一个类/接口(interface)的小文件)。此外，这依赖于相对路径，一旦我重构我的文件夹结构，这些路径就会中断。

我是不是想错了？

Answer 1

你必须有一个 js 文件，它是你应用程序的入口点，对吧？所以在那个文件中，只需导入你想要访问的所有模块而不导入并将它们附加到窗口目的。由于 window 对象是全局可用的，您可以从任何地方访问您的模块，而无需导入相应的模块。例如，

考虑这个场景:您在名为 module1.ts 的文件中有一个模块您的应用程序的入口点是一个名为 index.ts 的文件你有一个模块 2，你需要模块 1 的东西

// module1.ts
function add(first: number, second: number): number {
    return first + second
}
export {add}

在你的 index.ts

// index.ts
import {add} from '<path to module1>/module1';

window.add = add

现在在你的 module2

// module2.ts
window.add(1, 2)

由于 window 对象是全局可用的，您可以根据需要为其附加任意多的属性。就类型解析而言，您可以在 .d.ts 文件中使用所需的添加函数声明一个窗口模块，如下所示:

declare module window {
add: (first: number, second: number) => number 
}