如何将模块中的类公开到 TypeScript 中的全局命名空间？

Question

问题

给定

• 我有一个包含模块和全局脚本（常规非模块脚本）的现有应用程序。
  • 模块
    • 应用程序.ts
  • 全局脚本
    • alpha.ts 包含一个名为 alpha
    的类
    • beta.ts 包含一个名为 beta 的类
    • gamma.ts包含一个名为gamma
    的类
• 我想将全局脚本（gamma.ts）中的一个类转换为模块
  • 通过在

    gamma.ts

     中的 

    export default 之前添加 class gamma {}
• 我想将类

  gamma

  导入到全局命名空间（即窗口对象）中，以便现有的全局和模块脚本可以访问它。

我尝试过的事情

我在 global.d.ts

周围尝试了很多东西

例如

import gammaAlias from "../scripts/gamma";
export as namespace NS_Global;

declare global {
    var qqq: {n:string};
    namespace ZZZ {
       export var gamma: gammaAlias;
    }
    var gamma: gammaAlias;
}

但是都没有效果

即TypeScript 告诉我以下内容之一

• 伽玛不存在

• Cannot use 'new' with an expression whose type lacks a call or construct signature.

github

我设置了一个 github 存储库来调查这些问题。 https://github.com/penguin020/expose-typescript-modules-globally

ConvertToModulesPOC_original 是“之前”工作的情况。

ConvertToModulesPOC 是将 gamma .ts 转换为 a 的失败尝试 模块并将其公开到全局。

PS

问题仍然是，如何将模块暴露给全局命名空间？

任何使用 github 中示例的答案将不胜感激！

Answer 1

我在“TypeScript：在全局上下文中公开模块类型以及为什么要避免它”中找到了答案；

我已经更新了 github 存储库。

我发现的最显着的变化是：

---

在tsconfig中：

"module": "system",

---

在 yMod.ts

import gammaAlias from "../scripts/gamma.js";

declare global {
    export type gamma = gammaAlias;
    export const gamma: typeof gammaAlias;
}

(window as any).gamma = gammaAlias;

注意：您可以在另一个文件中拥有全局环境声明，甚至是 *.d.ts 文件。

---

上面的链接详细分析了全球公开每个符号的三个引用的原因。该页面上解释得很好，所以我只在这里总结一下：

1. 将类 type 暴露给 TypeScript 编译器（不生成代码）
2. 将类 object 暴露给 TypeScript 编译器（因此有一个对象可以调用 new；不生成任何代码）
3. 扩展窗口对象以公开全局命名空间中的类（生成代码）。

Answer 2

我希望我正确理解了你的问题。您想将“gamma”公开到全局命名空间，以便可以直接从“window”或控制台调用“gamma.log()”吗？

将以下两行添加到类底部的 gamma.ts 中。

let g = new gamma();
(window as any).gamma = g

1) 第一行将新的 Gamma 类初始化为变量 g。

2) 第二行将 g 导出到全局命名空间中，以便可以从“window.g”或只是“g”调用它。

拉取请求#1：https://github.com/penguin020/expose-typescript-modules-globally/pull/1/files

---

我还建议将这两行代码移动到您的主初始化文件“app.js”中。

伽玛.ts

export default class gamma {

应用程序.ts

import gamma from "./gamma";
let g = new gamma();
(window as any).gamma = g

拉取请求#2：https://github.com/penguin020/expose-typescript-modules-globally/pull/2

Answer 3

这对我有用。我只希望不必重命名界面。

declare global {
  interface IMyClass extends MyClass { }
}

class MyClass {

}

或

declare global {
  type IMyClass = MyClass;
}

class MyClass {

}