javascript - TypeScript - 将模块/命名空间附加到窗口

Question

我已经使用 ES2015 构建了很多 API 和应用程序，但我还不习惯 TypeScript 中的最佳实践，所以也许你可以帮助我。假设我正在为商店构建 API/SDK。目标是用户包含我的 js 文件并通过 window 对象访问商店及其 namespace ，就像使用 angular 和其他库一样。

window.shop.init();
window.shop.cart.get();
window.shop.cart.set();
window.shop.cart.clear();

在 ECMAScript 2015 中，我会编写 get 和 set 等方法，将它们导入到我的主文件中，然后扩展商店对象，最后扩展全局对象。

// in my cart.js namespace file
export {get} from './get';

// in my shop.js
import * as cart from './cart';

global.shop = {
    cart
}

作为 ES2015 命名空间的一种好方法，在 TypeScript 中使用所有这些模块和命名空间关键字感觉有点不对。

我基本上想在 TS 中实现相同的目标。我尝试了类似以下的操作，但没有成功。

module shop {
    export const cart = {...}
}

(<any>window).shop = shop;

或

namespace shop {
    // ...
}

(<any>window).shop = shop;

有些教程声称模块会自动附加到全局/窗口对象，但这对我来说并没有发生。

我正在使用 TypeScript 1.8.10。非常感谢任何帮助!

Answer 1

There where some tutorials claiming that a module is automatically attached to the global/window object, but that did not happen for me.

可能是因为你的 namespace 的代码是在 (ES6) 模块 中而不是在 脚本 中？ differences between scripts and modules are detailed here .

下面的代码创建了一个全局变量 shop在浏览器中，如果它作为脚本加载，即带有标签<script src="shop.js"> (或者您可以将此文件与其他 JavaScript 文件连接起来，例如 uglifyjs )。

// File shop.ts
namespace shop {
    export const cart = { /* ... */ }
}

如果您的代码是作为 ES6 模块加载的(即借助 Webpack、SystemJS、RequireJS 或其他)，您的解决方案是有效的:

(<any>window).shop = shop;