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

【问题标题】：TypeScript - Attach module/namespaces to windowTypeScript - 将模块/命名空间附加到窗口
【发布时间】：2016-09-22 15:21:28
【问题描述】：

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

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

在 ECMAScript 2015 中，我会编写像 get 和 set 这样的方法，将它们导入我的主文件并扩展 shop 对象，最后是全局对象。

// 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。非常感谢任何帮助！

【问题讨论】：

标签： javascript module typescript typescript1.8

【解决方案1】：

@paleo 的回答并不完美。它只是抑制了 shop 的类型推断。

今天早上我也遇到了类似的问题。我在 SO 上尝试了很多“解决方案”，但没有一个绝对不会产生类型错误并启用在 IDE（webstorm 或 vscode）中触发类型跳转。

终于，从这里开始

https://github.com/Microsoft/TypeScript/issues/3180#issuecomment-102523512

，我找到了一个合理的解决方案来为作为接口/类和命名空间的全局变量附加类型。

示例如下：

// typings.d.ts
declare interface Window {
    shop?: MyNamespace & typeof MyNamespace
}

declare interface MyNamespace {
    somemethod?()
}

declare namespace MyNamespace {
    // ...
}

现在，上面的代码将命名空间MyNamespace和接口MyNamespace的类型合并到全局变量shop（window的属性）中。

【讨论】：

这正是我所寻找的——如果您必须访问由 JS 库在 window 对象上显式定义的对象，例如。

【解决方案2】：

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

可能是因为您的namespace 的代码在 (ES6) module 中，而不是在 script 中？ 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;

【讨论】：