blocks|key|1795393|text|我在“TypeScript:在全局上下文中公开模块类型及其避免的原因”中找到了答案；|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1795394|我已经更新了github回购系统。|1795395|我发现最显著的变化是：|1795396|在tsconfig__中：|style|BOLD|1795397|"module":+"system",|code-block|syntax|javascript|1795398|在yMod.ts|1795399|import+gammaAlias+from+"../scripts/gamma.js";

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

(window+as+any).gamma+=+gammaAlias;|1795400|注意:您可以将全局环境声明放在另一个文件中，甚至是一个*.d.ts文件中。|1795401|链接在上面详细分析了对每个符号进行全局公开的三个引用的原因。在这一页上已经很好地解释了这一点，所以我只在这里总结一下：|1795402|将类类型公开给TypeScript编译器(没有生成代码)|ordered-list-item|1795403|将类对象公开给TypeScript编译器(因此有一个对象可以调用新；没有生成代码)|1795404|扩展窗口对象以公开全局命名空间中的类(生成代码)。|1795405|entityMap|0|LINK|mutability|MUTABLE|url|https://designprincipia.com/typescript-exposing-module-types-in-the-global-context-and-why-to-avoid-it/|1^0|3|V|0|0|0|0|1|8|0|0|1|7|0|0|0|A|1D|0|5|1|0|0|S|0|0|15|0|0|P|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1J|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1K|8|@$A|1L|B|1M|J|K]]|9|@]|C|$]]|$1|L|3|M|5|N|7|1N|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|6|7|1O|8|@$A|1P|B|1Q|J|K]]|9|@]|C|$]]|$1|S|3|T|5|N|7|1R|8|@]|9|@]|C|$O|P]]|$1|U|3|V|5|6|7|1S|8|@]|9|@]|C|$]]|$1|W|3|X|5|6|7|1T|8|@$A|1U|B|1V|J|K]]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|Y|3|Z|5|10|7|1Z|8|@$A|20|B|21|J|K]]|9|@]|C|$]]|$1|11|3|12|5|10|7|22|8|@$A|23|B|24|J|K]]|9|@]|C|$]]|$1|13|3|14|5|10|7|25|8|@$A|26|B|27|J|K]]|9|@]|C|$]]|$1|15|3|-4|5|6|7|28|8|@]|9|@]|C|$]]]|16|$17|$5|18|19|1A|C|$1B|1C]]|1D|$5|18|19|1A|C|$1B|1C]]]]

I found an answer here in &quot;<a href="https://designprincipia.com/typescript-exposing-module-types-in-the-global-context-and-why-to-avoid-it/" rel="nofollow noreferrer">TypeScript: exposing module types in the global context and why to avoid it</a>&quot;;
I have updated the github repo.
The most salient changes I found were:
<hr />
in tsconfig:
<pre><code>&quot;module&quot;: &quot;system&quot;,
</code></pre>
<hr />
in yMod.ts
<pre><code>import gammaAlias from &quot;../scripts/gamma.js&quot;;

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

(window as any).gamma = gammaAlias;
</code></pre>
note: You could have the global ambient declaration in another file, even a *.d.ts file.
<hr />
The <a href="https://designprincipia.com/typescript-exposing-module-types-in-the-global-context-and-why-to-avoid-it/" rel="nofollow noreferrer">link above</a> breaks down the reasons for having three references for each symbol to be exposed globally. It is pretty well explained on that page, so I will only summarize here:
<ol>
<li>Expose the class type to the TypeScript compiler (no code generated)</li>
<li>Expose the class object to the TypeScript compiler (so there is an object to call new on; no code generated)</li>
<li>Extend the window object to expose the class in the global namespace (generates code).</li>
</ol>

blocks|key|1795444|text|我希望我正确理解了你的问题。您希望将“gamma”公开到全局命名空间，以便直接从“窗口”或控制台调用“gamma.log()”？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1795445|将以下2行添加到类底部的gamma.ts中。|1795446|let+g+=+new+gamma();
(window+as+any).gamma+=+g|code-block|syntax|javascript|1795447|1)第一行将一个新的Gamma类初始化为变量g。|offset|length|style|BOLD|1795448|2)第二行将g导出到全局命名空间，以便可以从'window.g‘或简单地'g’调用它。|1795449|屏幕截图|1795450|拉出请求1：https://github.com/penguin020/expose-typescript-modules-globally/pull/1/files|1795451|我还建议将这两行代码移到主初始化文件'app.js‘中。|1795452|gamma.ts|1795453|export+default+class+gamma+{|1795454|app.ts|1795455|import+gamma+from+"./gamma";
let+g+=+new+gamma();
(window+as+any).gamma+=+g|1795456|拉出请求2：https://github.com/penguin020/expose-typescript-modules-globally/pull/2|1795457|entityMap|0|LINK|mutability|MUTABLE|url|https://i.imgur.com/GdYYj5s.png|1|https://github.com/penguin020/expose-typescript-modules-globally/pull/1/files|2|https://github.com/penguin020/expose-typescript-modules-globally/pull/2^0|0|0|0|M|1|0|6|1|0|0|4|0|0|6|25|1|0|0|0|0|0|0|6|1Z|2|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1J|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1L|8|@$K|1M|L|1N|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1O|8|@$K|1P|L|1Q|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1R|8|@]|9|@$K|1S|L|1T|1|1U]]|A|$]]|$1|S|3|T|5|6|7|1V|8|@]|9|@$K|1W|L|1X|1|1Y]]|A|$]]|$1|U|3|V|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|20|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|21|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|22|8|@]|9|@]|A|$]]|$1|12|3|13|5|F|7|23|8|@]|9|@]|A|$G|H]]|$1|14|3|15|5|6|7|24|8|@]|9|@$K|25|L|26|1|27]]|A|$]]|$1|16|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]|1E|$5|19|1A|1B|A|$1C|1F]]|1G|$5|19|1A|1B|A|$1C|1H]]]]

I hope I understood your question correctly. You want to expose 'gamma' to the global namespace so that you can call 'gamma.log()' straight from 'window' or from the console?

Add the following 2 lines into gamma.ts at the bottom of the class.

<pre><code>let g = new gamma();
(window as any).gamma = g
</code></pre>

1) The first line initializes a new Gamma class into variable g.

2) The second line exports g into the global namespace so that it can be called from 'window.g' or simply just 'g'.

<a href="https://i.imgur.com/GdYYj5s.png" rel="nofollow noreferrer">Screenshot</a>

Pull request #1: <a href="https://github.com/penguin020/expose-typescript-modules-globally/pull/1/files" rel="nofollow noreferrer">https://github.com/penguin020/expose-typescript-modules-globally/pull/1/files</a>

<hr>

I also suggest moving these two lines of code into your main initialization file 'app.js'.

gamma.ts

<pre><code>export default class gamma {
</code></pre>

app.ts

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

Pull request #2: <a href="https://github.com/penguin020/expose-typescript-modules-globally/pull/2" rel="nofollow noreferrer">https://github.com/penguin020/expose-typescript-modules-globally/pull/2</a>

blocks|key|2006063|text|这对我有用。我只希望不用重命名界面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2006064|declare+global+{
++interface+IMyClass+extends+MyClass+{+}
}

class+MyClass+{

}|code-block|syntax|javascript|2006065|或|2006066|declare+global+{
++type+IMyClass+=+MyClass;
}

class+MyClass+{

}|2006067|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This works for me. I only wish I didn't have to rename the interface.

<pre><code>declare global {
 interface IMyClass extends MyClass { }
}

class MyClass {

}
</code></pre>

or 

<pre><code>declare global {
 type IMyClass = MyClass;
}

class MyClass {

}
</code></pre>

<h2>The Problem</h2>

Given

<ul>
<li>I have an existing application containing both modules and global scripts (regular non-module scripts).

<ul>
<li>modules

<ul>
<li>App.ts</li>
</ul></li>
<li>global scripts

<ul>
<li>alpha.ts contains a class named alpha</li>
<li>beta.ts contains a class named beta</li>
<li>gamma.ts contains a class named gamma</li>
</ul></li>
</ul></li>
<li>I want to convert one class in a global script (gamma.ts) into a module

<ul>
<li>via adding <code>export default</code> before <code>class gamma {}</code> in gamma.ts</li>
</ul></li>
<li>I want to import class <code>gamma</code> into the global namespace (i.e the window object) so it can be accessed by the existing global and module scripts. </li>
</ul>

<h1>What I have tried</h1>

I have tried a bunch of things around global.d.ts

e.g.

<pre><code>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;
}
</code></pre>

But none has worked 

i.e. TypeScript tells me one of the following

<ul>
<li>gamma does not exist</li>
<li><code>Cannot use 'new' with an expression whose type lacks a call or construct signature.</code></li>
</ul>

<h2>github</h2>

<blockquote>
 I have a github repo set up to investigate these questions.
 <a href="https://github.com/penguin020/expose-typescript-modules-globally" rel="nofollow noreferrer">https://github.com/penguin020/expose-typescript-modules-globally</a>
 
 ConvertToModulesPOC_original is the working "before" case.
 
 ConvertToModulesPOC is a broken attempt to convert gamma .ts to a
 module and expose it globally.
</blockquote>

<h2>PS</h2>

The question remains, how do you expose a module to the global namespace?

Any answers using the examples in the github would be particularly appreciated!

How do you expose class in a module to the global namespace in TypeScript?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

问题给定的我有一个包含模块和全局脚本(常规非模块脚本)的现有应用程序。模块App.ts​- global scripts      - **alpha.ts** contains a class named alpha    - **beta.ts** contains a class named beta    - ...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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