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

Question

我是使用 js 模块的初学者。

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

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

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

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

是否可以？

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

我是否以错误的方式思考这个问题？

Answer 1

为每个文件声明依赖关系（例如模块）是一把双刃剑。

优点是没有“魔法”——你确切地知道每个函数、变量、类等来自哪里。这使得您可以更轻松地了解正在使用哪些库/框架以及在哪里解决问题。将其与 Ruby on Rails 与 Ruby Gems 使用的相反方法进行比较，其中不声明任何内容，所有内容都会自动加载。从个人经验来看，我知道尝试锻炼来自哪里some_random_method以及我可以使用哪些方法/课程绝对是一件痛苦的事情。

你说得对，缺点是多次导入和移动相关文件可能会变得非常冗长。WebStorm 和 Visual Studio Code 等现代编辑器和 IDE 具有工具，可以在您移动文件时自动更新相对路径，并在您引用另一个模块中的代码时自动添加导入。

针对多个 s 的一种实用解决方案import是制作您自己的“组”导入文件。假设您有一大堆在所有文件中使用的实用函数 - 您可以将它们全部导入到一个文件中，然后在其他地方引用该文件：

//File: helpers/string-helpers.ts

import {toUppercase} from "./uppercase-helper";
import {truncate} from "./truncate-helper";

export const toUppercase = toUppercase;
export const truncate =  truncate;

然后在任何其他文件中：

import * as StringHelpers from "../path-to/helpers/string-helpers";
...
let shoutingMessage = StringHelpers.toUppercase(message);

这样做的缺点是它可能会破坏tree shake，其中 webpack 等工具会删除未使用的代码。

Answer 2

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

考虑这种情况：您在一个名为module1.ts 的文件中有一个模块您的应用程序的入口点是一个名为的文件index.ts 您有一个 module2，您需要从 module1 获取一些东西

// 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文件中声明一个带有 add 函数的窗口模块，如下所示：

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