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

Question

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

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

有些教程声称模块会自动附加到全局/窗口对象,但这并没有发生在我身上.

也许是因为你的代码namespace是在(ES6)模块中而不是在脚本中？脚本和模块之间的差异在此处详述.

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

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

如果您的代码作为ES6模块加载(即在Webpack,SystemJS,RequireJS或其他方面的帮助下),您的解决方案是有效的:

(<any>window).shop = shop;

Answer 2

@paleo 的答案并不完美。它只是抑制了商店的类型推断。

今天早上我也遇到了类似的问题。我在 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 的属性）中。