如何将模块中的类暴露给 TypeScript 的全局命名空间？

Question

问题

给定

• 我有一个包含模块和全局脚本（常规非模块脚本）的现有应用程序。
  • 模块
    • App.ts
  • 全局脚本
    • alpha.ts 包含一个名为 alpha 的类
    • beta.ts 包含一个名为 beta 的类
    • gamma.ts 包含一个名为 gamma 的类
• 我想将全局脚本 (gamma.ts) 中的一个类转换为模块
  • 通过在 gamma.ts 中的 class gamma {} 之前添加 export default
• 我想将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 转换为 模块并在全球范围内公开它。

PS

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

特别感谢任何使用 github 中示例的答案！

Answer 1

我在“TypeScript: exposing module types in the global context and why to avoid it”中找到了答案；

我已经更新了 github repo。

我发现最显着的变化是：

---

在 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 文件。

---

link above 分解了在全球范围内为每个符号提供三个引用的原因。该页面上已经很好地解释了，所以我只在这里总结一下：

1. 向 TypeScript 编译器公开类 type（不生成代码）
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 em>'。

Screenshot

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

---

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

伽玛.ts

export default class gamma {

app.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 {

}