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這樣的方法，將它們導入到我的主文件中，然后擴展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。 任何幫助是極大的贊賞！

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的屬性）中。