blocks|key|2869136|text|我发现了一种结合使用JavaScript和TypeScript的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2869137|logging.d.ts：|2869138|declare+var+log:+log4javascript.Logger;|code-block|syntax|javascript|2869139|log-declaration.js|offset|length|style|BOLD|2869140|log+=+null;|2869141|initalize-app.ts|2869142|import+'./log-declaration.js';

//+Call+stuff+to+actually+setup+log.++
//+Similar+to+this:
log+=+functionToSetupLog();|2869143|这将其置于全局作用域中，并且TypeScript知道这一点。这样我就可以在我的所有文件中使用它。|2869144|注意:我认为这只会起作用，因为我将allowJs+TypeScript选项设置为true。|CODE|2869145|如果有人发布了一个纯TypeScript解决方案，我会接受。|2869146|entityMap^0|0|0|0|G|2|0|0|0|0|0|H|7|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|16|8|@$K|17|L|18|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1C|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1D|8|@$K|1E|L|1F|M|Y]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1G|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|12|$]]

I found a way that works if I use JavaScript combined with TypeScript.

logging.d.ts:

<pre><code>declare var log: log4javascript.Logger;
</code></pre>

log-declaration.js:

<pre><code>log = null;
</code></pre>

initalize-app.ts

<pre><code>import './log-declaration.js';

// Call stuff to actually setup log. 
// Similar to this:
log = functionToSetupLog();
</code></pre>

This puts it in the global scope and TypeScript knows about it. So I can use it in all my files. 

NOTE: I think this only works because I have the <code>allowJs</code> TypeScript option set to true.

If someone posts an pure TypeScript solution, I will accept that.

blocks|key|111264|text|在.d.ts定义文件中|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|111265|type+MyGlobalFunctionType+=+(name:+string)+=>+void|code-block|syntax|javascript|111266|如果在浏览器中工作，则将成员添加到浏览器的窗口上下文中：|111267|interface+Window+{
++myGlobalFunction:+MyGlobalFunctionType
}|111268|NodeJS也有同样的想法：|111269|declare+module+NodeJS+{
++interface+Global+{
++++myGlobalFunction:+MyGlobalFunctionType
++}
}|111270|现在你声明了root变量(它将实际存在于窗口或全局)|111271|declare+const+myGlobalFunction:+MyGlobalFunctionType;|111272|然后在一个常规的.ts文件中，但作为副作用导入，您实际上实现了它：|111273|global/*+or+window+*/.myGlobalFunction+=+function+(name:+string)+{
++console.log("Hey+!",+name);
};|111274|最后在代码库的其他地方使用它，使用以下两种方法之一：|111275|global/*+or+window+*/.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");|111276|entityMap^0|1|5|0|0|0|0|0|0|0|0|8|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|1F|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|H|7|1J|8|@]|D|@]|E|$I|J]]|$1|10|3|11|5|6|7|1K|8|@]|D|@]|E|$]]|$1|12|3|13|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|14|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|15|$]]

Inside a <code>.d.ts</code> definition file

<pre><code>type MyGlobalFunctionType = (name: string) =&gt; void
</code></pre>

If you work in the browser, 
you add members to the browser's window context:

<pre><code>interface Window {
 myGlobalFunction: MyGlobalFunctionType
}
</code></pre>

Same idea for NodeJS:

<pre><code>declare module NodeJS {
 interface Global {
 myGlobalFunction: MyGlobalFunctionType
 }
}
</code></pre>

Now you declare the root variable (that will actually live on window or global)

<pre><code>declare const myGlobalFunction: MyGlobalFunctionType;
</code></pre>

Then in a regular <code>.ts</code> file, but imported as side-effect, you actually implement it:

<pre><code>global/* or window */.myGlobalFunction = function (name: string) {
 console.log("Hey !", name);
};
</code></pre>

And finally use it elsewhere in the codebase, with either:

<pre><code>global/* or window */.myGlobalFunction("Kevin");

myGlobalFunction("Kevin");
</code></pre>

blocks|key|111278|text|我只用了这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111279|import+{globalVar}+from+"./globals";
declare+let+window:any;
window.globalVar+=+globalVar;|code-block|syntax|javascript|111280|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

im using only this

<pre><code>import {globalVar} from "./globals";
declare let window:any;
window.globalVar = globalVar;
</code></pre>

blocks|key|111282|text|作为对Dima+V的回答的补充，这是我为自己做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111283|//+First+declare+the+window+global+outside+the+class|offset|length|style|CODE|111284|declare+let+window:+any;|111285|//+Inside+the+required+class+method|111286|let+globVarName+=+window.globVarName;|111287|entityMap^0|0|0|1G|0|0|O|0|0|Z|0|0|11|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|O|$]]

As an addon to Dima V's answer this is what I did to make this work for me. 

<code>// First declare the window global outside the class</code>

<code>declare let window: any;</code>

<code>// Inside the required class method</code>

<code>let globVarName = window.globVarName;</code>

blocks|key|113618|text|这就是我修复它的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113619|步骤：|offset|length|style|BOLD|113620|113621|为custom.d.ts声明了一个全局名称空间，如下所示:|ordered-list-item|113622|113623|declare+global+{
++++namespace+NodeJS+{
++++++++interface+Global+{
++++++++++++Config:+{}
++++++++}
++++}
}
export+default+global;|code-block|syntax|javascript|113624|113625|将上面创建的文件映射到"tsconfig.json“中，如下所示：|113626|113627|"typeRoots":+["src/types/custom.d.ts"+]|113628|113629|在任意文件中获取上面创建的全局变量，如下所示：|113630|113631|console.log(global.config)|113632|备注：|113633|113634|typescript版本：“3.0.1”。|113635|在我的例子中，要求在启动应用程序之前设置全局变量，并且变量应该在整个依赖对象中访问，以便我们可以获得所需的配置属性。|113636|113637|希望这能有所帮助！|113638|谢谢|113639|entityMap^0|0|0|3|0|0|0|0|0|0|0|0|0|0|0|0|0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1M|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1O|8|@]|9|@]|A|$P|Q]]|$1|R|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|S|3|T|5|K|7|1Q|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|V|3|W|5|O|7|1S|8|@]|9|@]|A|$P|Q]]|$1|X|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|K|7|1U|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|11|3|12|5|O|7|1W|8|@]|9|@]|A|$P|Q]]|$1|13|3|14|5|6|7|1X|8|@$D|1Y|E|1Z|F|G]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|16|3|17|5|K|7|21|8|@]|9|@]|A|$]]|$1|18|3|19|5|K|7|22|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|23|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|24|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|25|8|@]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|26|8|@]|9|@]|A|$]]]|1G|$]]

This is how I have fixed it:

Steps:

<ol>
<li>Declared a global namespace, for e.g. custom.d.ts as below :</li>
</ol>

<pre class="lang-js prettyprint-override"><code>declare global {
 namespace NodeJS {
 interface Global {
 Config: {}
 }
 }
}
export default global;
</code></pre>

<ol start="2">
<li>Map the above created a file into "tsconfig.json" as below:</li>
</ol>

<pre><code>"typeRoots": ["src/types/custom.d.ts" ]
</code></pre>

<ol start="3">
<li>Get the above created global variable in any of the files as below:</li>
</ol>

<pre class="lang-js prettyprint-override"><code>console.log(global.config)
</code></pre>

Note: 

<ol>
<li>typescript version: "3.0.1".</li>
<li>In my case, the requirement was to set the global variable before boots up the application and the variable should access throughout the dependent objects so that we can get the required config properties.</li>
</ol>

Hope this helps!

Thank you

blocks|key|111495|text|globalThis就是未来。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|111496|首先，TypeScript文件有两种scopes|style|CODE|111497|全局作用域|111498|如果您的文件没有任何全局作用域import或export+行，则此文件将在全局作用域中执行，以确保其中的所有声明在此文件外部可见。|BOLD|111499|所以我们会像这样创建全局变量：|111500|//+xx.d.ts
declare+var+age:+number

//+or+
//+xx.ts
//+with+or+without+declare+keyword
var+age:+number

//+other.ts
globalThis.age+=+18+//+no+error|code-block|syntax|javascript|111501|111502|所有的魔法都来自于var。用let或const替换var将不起作用。|blockquote|111503|111504|111505|模块作用域|111506|如果您的文件具有任何全局import行或export+，则此文件将在其自身的范围内执行，我们需要通过declaration-merging扩展。|111507|//+xx[.d].ts
declare+global+{
++var+age:+number;
}

//+other.ts
globalThis.age+=+18+//+no+error|111508|111509|您可以在official+docs|111510|
中查看有关模块的更多信息|111511|entityMap|0|LINK|mutability|MUTABLE|url|https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/#type-checking-for-globalthis|1|https://www.typescriptlang.org/docs/handbook/declaration-merging.html|2|https://www.typescriptlang.org/docs/handbook/modules.html#introduction^0|0|A|0|0|I|6|0|0|F|6|M|6|T|10|F|6|M|6|0|0|F|0|0|0|0|Y|9|3|E|3|I|5|P|3|0|0|0|0|5|0|0|Q|R|19|C|6|K|6|1E|J|1|0|0|0|0|H|4|D|2|0|1|C|0^^$0|@$1|2|3|4|5|6|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]]|C|$]]|$1|D|3|E|5|6|7|1Q|8|@$A|1R|B|1S|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1T|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1U|8|@$A|1V|B|1W|F|L]|$A|1X|B|1Y|F|L]|$A|1Z|B|20|F|L]|$A|21|B|22|F|G]|$A|23|B|24|F|G]]|9|@]|C|$]]|$1|M|3|N|5|6|7|25|8|@$A|26|B|27|F|L]]|9|@]|C|$]]|$1|O|3|P|5|Q|7|28|8|@]|9|@]|C|$R|S]]|$1|T|3|-4|5|6|7|29|8|@]|9|@]|C|$]]|$1|U|3|V|5|W|7|2A|8|@$A|2B|B|2C|F|L]|$A|2D|B|2E|F|G]|$A|2F|B|2G|F|G]|$A|2H|B|2I|F|G]|$A|2J|B|2K|F|G]]|9|@]|C|$]]|$1|X|3|-4|5|6|7|2L|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|2M|8|@]|9|@]|C|$]]|$1|Z|3|10|5|6|7|2N|8|@$A|2O|B|2P|F|L]]|9|@]|C|$]]|$1|11|3|12|5|6|7|2Q|8|@$A|2R|B|2S|F|L]|$A|2T|B|2U|F|L]|$A|2V|B|2W|F|G]|$A|2X|B|2Y|F|G]]|9|@$A|2Z|B|30|1|31]]|C|$]]|$1|13|3|14|5|Q|7|32|8|@]|9|@]|C|$R|S]]|$1|15|3|-4|5|6|7|33|8|@]|9|@]|C|$]]|$1|16|3|17|5|W|7|34|8|@$A|35|B|36|F|L]]|9|@$A|37|B|38|1|39]]|C|$]]|$1|18|3|19|5|6|7|3A|8|@$A|3B|B|3C|F|L]]|9|@]|C|$]]|$1|1A|3|-4|5|6|7|3D|8|@]|9|@]|C|$]]]|1B|$1C|$5|1D|1E|1F|C|$1G|1H]]|1I|$5|1D|1E|1F|C|$1G|1J]]|1K|$5|1D|1E|1F|C|$1G|1L]]]]

<a href="https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/#type-checking-for-globalthis" rel="noreferrer">globalThis</a> is the future.

First, TypeScript files have two kinds of <code>scopes</code>

<h2>global scope</h2>

If your file hasn't any <code>import</code> or <code>export</code> line, this file would be executed in global scope that all declaration in it are visible outside this file.

So we would create global variables like this:

<pre class="lang-js prettyprint-override"><code>// xx.d.ts
declare var age: number

// or 
// xx.ts
// with or without declare keyword
var age: number

// other.ts
globalThis.age = 18 // no error
</code></pre>

<blockquote>
 All magic come from <code>var</code>. Replace <code>var</code> with <code>let</code> or <code>const</code> won't work.
</blockquote>

<h2>module scope</h2>

If your file has any <code>import</code> or <code>export</code> line, this file would be executed within its own scope that we need to extend global by <a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html" rel="noreferrer">declaration-merging</a>.

<pre class="lang-js prettyprint-override"><code>// xx[.d].ts
declare global {
 var age: number;
}

// other.ts
globalThis.age = 18 // no error
</code></pre>

<blockquote>
 You can see more about module in <a href="https://www.typescriptlang.org/docs/handbook/modules.html#introduction" rel="noreferrer">official docs</a>
</blockquote>

blocks|key|2658049|text|我花了几个小时来找出合适的方法。在我的例子中，我尝试定义全局"log“变量，因此步骤如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2658050|1)配置您的tsconfig.json以包含您定义的类型(src/types文件夹，node_modules+-由您决定)：|offset|length|style|CODE|2658051|...other+stuff...
"paths":+{
++"*":+["node_modules/*",+"src/types/*"]
}|code-block|syntax|javascript|2658052|2)创建包含以下内容的文件src/types/global.d.ts+(no+import！-这一点很重要)，可以根据需要随意更改any+%2B如果使用浏览器，请使用window界面而不是NodeJS：|BOLD|2658053|/**
+*+IMPORTANT+-+do+not+use+imports+in+this+file!
+*+It+will+break+global+definition.
+*/
declare+namespace+NodeJS+{
++++export+interface+Global+{
++++++++log:+any;
++++}
}

declare+var+log:+any;|2658054|3)现在您终于可以在需要的地方使用/实现log了：|2658055|//+in+one+file
global.log+=+someCoolLogger();
//+in+another+file
log.info('hello+world');
//+or+if+its+a+variable
global.log+=+'INFO'|2658056|entityMap^0|0|6|D|T|9|0|0|D|L|1T|3|29|6|2K|6|10|A|0|0|K|3|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@$D|Z|E|10|F|G]|$D|11|E|12|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@$D|15|E|16|F|G]|$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]|$D|1D|E|1E|F|O]]|9|@]|A|$]]|$1|P|3|Q|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|R|3|S|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|T|3|U|5|J|7|1J|8|@]|9|@]|A|$K|L]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|W|$]]

I spent couple hours to figure out proper way to do it. In my case I'm trying to define global "log" variable so the steps were:

1) configure your <code>tsconfig.json</code> to include your defined types (<code>src/types</code> folder, node_modules - is up to you):

<pre><code>...other stuff...
"paths": {
 "*": ["node_modules/*", "src/types/*"]
}
</code></pre>

2) create file <code>src/types/global.d.ts</code> with following content (no imports! - this is important), feel free to change <code>any</code> to match your needs + use <code>window</code> interface instead of <code>NodeJS</code> if you are working with browser:

<pre><code>/**
 * IMPORTANT - do not use imports in this file!
 * It will break global definition.
 */
declare namespace NodeJS {
 export interface Global {
 log: any;
 }
}

declare var log: any;
</code></pre>

3) now you can finally use/implement <code>log</code> where its needed:

<pre><code>// in one file
global.log = someCoolLogger();
// in another file
log.info('hello world');
// or if its a variable
global.log = 'INFO'
</code></pre>

blocks|key|2658064|text|我需要使lodash成为全局文件，才能使用现有的.js文件，该文件不能更改，只能更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2658065|我发现这是可行的：|2658066|import+*+as+lodash+from+'lodash';

(global+as+any)._+=+lodash;|code-block|syntax|javascript|2658067|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I needed to make lodash global to use an existing .js file that I could not change, only require.

I found that this worked:

<pre><code>import * as lodash from 'lodash';

(global as any)._ = lodash;
</code></pre>

blocks|key|2658093|text|这对我来说很有效，如this+thread中所述|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2658094|declare+let+something:+string;
something+=+'foo';|code-block|syntax|javascript|2658095|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Microsoft/TypeScript/issues/18237^0|A|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

This is working for me, as described in <a href="https://github.com/Microsoft/TypeScript/issues/18237" rel="nofollow noreferrer">this thread</a>:

<pre><code>declare let something: string;
something = 'foo';
</code></pre>

blocks|key|113696|text|我使用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113697|interface+Window+{
++++globalthing:+any;
}

declare+var+globalthing:+any;|code-block|syntax|javascript|113698|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I'm using this:
<pre><code>interface Window {
 globalthing: any;
}

declare var globalthing: any;
</code></pre>

blocks|key|111579|text|用更具体的例子扩展关于globalThis的另一个答案(请参阅MDN和TypeScript+3.4+note)+(仅限TypeScript，不与JavaScript混合)，因为其行为相当令人困惑。所有示例均在Nodejs+v12.14.1和TypeScript+Version+4.2.3下运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|111580|具有全局范围的最简单情况|111581|declare+var+ENVIRONMENT:+string;
globalThis.ENVIRONMENT+=+'PROD';
console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);
//+output
//+PROD
//+PROD|code-block|syntax|javascript|111582|这个文件不是import或export，所以它是一个全局作用域文件。您可以编译上面的TypeScript代码而不会出现任何错误。请注意，您必须使用+var。使用let将抛出error+TS2339:+Property+'ENVIRONMENT'+does+not+exist+on+type+'typeof+globalThis'.|111583|你可能会注意到，我们对变量进行了declared，而不是下面的，这也是可行的。|111584|var+ENVIRONMENT:+string;
ENVIRONMENT+=+'DEV';
globalThis.ENVIRONMENT+=+'PROD';
console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);
//+output
//+DEV
//+PROD|111585|输出来自Nodejs+v12.14.1。我还在Chrome+(编译成JS之后)和两个输出PROD中测试了它。所以我建议你一直使用globalThis。|111586|具有模块作用域的简单案例|111587|declare+var+ENVIRONMENT:+string;
globalThis.ENVIRONMENT+=+'PROD';
export+{};|111588|一旦我们添加了export语句，它就变成了一个模块作用域文件，它抛出了error+TS7017:+Element+implicitly+has+an+'any'+type+because+type+'typeof+globalThis'+has+no+index+signature.，解决方案是augment+global+scope。|111589|declare+global+{
++var+ENVIRONMENT:+string;
}
globalThis.ENVIRONMENT+=+'PROD';
console.log(globalThis.ENVIRONMENT);
export+{};|111590|你仍然必须使用var，否则你会得到error+TS2339:+Property+'ENVIRONMENT'+does+not+exist+on+type+'typeof+globalThis'.。|111591|用于副作用的导入|111592|//+./main.ts
import+'./environment_prod';

console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);|111593|//+./environment_prod.ts
declare+var+ENVIRONMENT:+string;
globalThis.ENVIRONMENT+=+'PROD';|111594|或|111595|//+./environment_prod.ts
declare+global+{
++var+ENVIRONMENT:+string;
}
globalThis.ENVIRONMENT+=+'PROD';
export+{};+//+Makes+the+current+file+a+module.|111596|浏览两个文件|111597|假设main.ts和environment_prod.ts都是入口文件。Browserify会将它们(编译成JS后)包装到本地作用域函数中，这就需要使用globalThis。|111598|//+./main.ts
declare+var+ENVIRONMENT:+string;
console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);

//+./environment_prod.ts
declare+var+ENVIRONMENT:+string;
globalThis.ENVIRONMENT+=+'PROD';|111599|但是共享一个声明文件更安全，这样两个入口文件都可以导入，以避免变量名或类型名的打字错误。|111600|//+./main.ts
import+'./environment';

console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);

//+./environment_prod.ts
import+'./environment';

globalThis.ENVIRONMENT+=+'PROD';

//+./environment.ts
type+Environment+=+'PROD'+%7C+'DEV'+%7C+'LOCAL';

declare+var+ENVIRONMENT:+Environment;|111601|注意顺序很重要：browserify+environment_prod.js+main.js+>+bin.js|111602|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis|1|https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-globalthis|2|https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation|3|http://browserify.org/^0|B|A|33|8|3N|D|V|3|0|Z|J|1|0|0|0|6|6|D|6|22|3|28|3|2E|28|0|G|7|0|0|B|8|18|4|1S|A|0|0|0|7|6|Z|2Z|44|K|2|0|0|7|3|H|28|0|0|0|0|0|0|0|2|7|A|J|24|A|10|A|3|0|0|0|0|8|1B|0^^$0|@$1|2|3|4|5|6|7|24|8|@$9|25|A|26|B|C]|$9|27|A|28|B|C]|$9|29|A|2A|B|C]]|D|@$9|2B|A|2C|1|2D]|$9|2E|A|2F|1|2G]]|E|$]]|$1|F|3|G|5|6|7|2H|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|2I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|2J|8|@$9|2K|A|2L|B|C]|$9|2M|A|2N|B|C]|$9|2O|A|2P|B|C]|$9|2Q|A|2R|B|C]|$9|2S|A|2T|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|2U|8|@$9|2V|A|2W|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|2X|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|2Y|8|@$9|2Z|A|30|B|C]|$9|31|A|32|B|C]|$9|33|A|34|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|35|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|36|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|6|7|37|8|@$9|38|A|39|B|C]|$9|3A|A|3B|B|C]]|D|@$9|3C|A|3D|1|3E]]|E|$]]|$1|10|3|11|5|J|7|3F|8|@]|D|@]|E|$K|L]]|$1|12|3|13|5|6|7|3G|8|@$9|3H|A|3I|B|C]|$9|3J|A|3K|B|C]]|D|@]|E|$]]|$1|14|3|15|5|6|7|3L|8|@]|D|@]|E|$]]|$1|16|3|17|5|J|7|3M|8|@]|D|@]|E|$K|L]]|$1|18|3|19|5|J|7|3N|8|@]|D|@]|E|$K|L]]|$1|1A|3|1B|5|6|7|3O|8|@]|D|@]|E|$]]|$1|1C|3|1D|5|J|7|3P|8|@]|D|@]|E|$K|L]]|$1|1E|3|1F|5|6|7|3Q|8|@]|D|@]|E|$]]|$1|1G|3|1H|5|6|7|3R|8|@$9|3S|A|3T|B|C]|$9|3U|A|3V|B|C]|$9|3W|A|3X|B|C]]|D|@$9|3Y|A|3Z|1|40]]|E|$]]|$1|1I|3|1J|5|J|7|41|8|@]|D|@]|E|$K|L]]|$1|1K|3|1L|5|6|7|42|8|@]|D|@]|E|$]]|$1|1M|3|1N|5|J|7|43|8|@]|D|@]|E|$K|L]]|$1|1O|3|1P|5|6|7|44|8|@$9|45|A|46|B|C]]|D|@]|E|$]]|$1|1Q|3|-4|5|6|7|47|8|@]|D|@]|E|$]]]|1R|$1S|$5|1T|1U|1V|E|$1W|1X]]|1Y|$5|1T|1U|1V|E|$1W|1Z]]|20|$5|1T|1U|1V|E|$1W|21]]|22|$5|1T|1U|1V|E|$1W|23]]]]

Extend the other answer about <code>globalThis</code> (see <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis" rel="nofollow noreferrer">MDN</a> and <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-globalthis" rel="nofollow noreferrer">TypeScript 3.4 note</a>) with more specific examples (TypeScript only without mixing with JavaScript), as the behavior was fairly confusing. All examples are run under Nodejs <code>v12.14.1</code> and TypeScript <code>Version 4.2.3</code>.
<h2>Simplest case with global scope</h2>
<pre><code>declare var ENVIRONMENT: string;
globalThis.ENVIRONMENT = 'PROD';
console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);
// output
// PROD
// PROD
</code></pre>
This file doesn't <code>import</code> or <code>export</code> so it's a global scope file. You can compile the above TypeScript code without any error. Note that you have to use <code>var</code>. Using <code>let</code> will throw <code>error TS2339: Property 'ENVIRONMENT' does not exist on type 'typeof globalThis'.</code>
You might notice that we <code>declare</code>d the variable as opposed to the following which also works.
<pre><code>var ENVIRONMENT: string;
ENVIRONMENT = 'DEV';
globalThis.ENVIRONMENT = 'PROD';
console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);
// output
// DEV
// PROD
</code></pre>
The output is from Nodejs <code>v12.14.1</code>. I also tested it in Chrome (after compiling to JS) and both output <code>PROD</code>. So I'd suggest using <code>globalThis</code> all the time.
<h2>Simple case with module scope</h2>
<pre><code>declare var ENVIRONMENT: string;
globalThis.ENVIRONMENT = 'PROD';
export {};
</code></pre>
Once we add <code>export</code> statement, it becomes a module scope file, which throws <code>error TS7017: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.</code> The solution is to <a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation" rel="nofollow noreferrer">augment global scope</a>.
<pre><code>declare global {
 var ENVIRONMENT: string;
}
globalThis.ENVIRONMENT = 'PROD';
console.log(globalThis.ENVIRONMENT);
export {};
</code></pre>
You still have to use <code>var</code>, otherwise you will get <code>error TS2339: Property 'ENVIRONMENT' does not exist on type 'typeof globalThis'.</code>.
<h2>Import for side effect</h2>
<pre><code>// ./main.ts
import './environment_prod';

console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);
</code></pre>
<pre><code>// ./environment_prod.ts
declare var ENVIRONMENT: string;
globalThis.ENVIRONMENT = 'PROD';
</code></pre>
Or
<pre><code>// ./environment_prod.ts
declare global {
 var ENVIRONMENT: string;
}
globalThis.ENVIRONMENT = 'PROD';
export {}; // Makes the current file a module.
</code></pre>
<h2>Browserify two files</h2>
Suppose both <code>main.ts</code> and <code>environment_prod.ts</code> are entry files. <a href="http://browserify.org/" rel="nofollow noreferrer">Browserify</a> will wrap them (after compiled to JS) into local scoped functions which necessitates the use of <code>globalThis</code>.
<pre><code>// ./main.ts
declare var ENVIRONMENT: string;
console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);

// ./environment_prod.ts
declare var ENVIRONMENT: string;
globalThis.ENVIRONMENT = 'PROD';
</code></pre>
But it's more type-safe to share a declaration file which can then be imported by both entry files, to avoid typos of variable names or type names.
<pre><code>// ./main.ts
import './environment';

console.log(ENVIRONMENT);
console.log(globalThis.ENVIRONMENT);

// ./environment_prod.ts
import './environment';

globalThis.ENVIRONMENT = 'PROD';

// ./environment.ts
type Environment = 'PROD' | 'DEV' | 'LOCAL';

declare var ENVIRONMENT: Environment;
</code></pre>
Note that the order matters: <code>browserify environment_prod.js main.js &gt; bin.js</code>

blocks|key|2869393|text|这里发布的文本是文章TypeScript+and+Global+Variables+in+Node.js的简短版本|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2869394|自从TypeScript+3.4发布以来，有一种有文档记录的方法可以做到这一点。|2869395|在工程根目录下创建一个包含以下内容的名为global.d.ts的文件。请注意：|style|CODE|2869396|2869397|使用any|unordered-list-item|2869398|时，必须使用var才能工作(有关此操作的信息，请参阅typescriptlang.org+)。|2869399|如果没有export+{}，所有变量都将变为var|2869400|2869401|declare+global+{
++++var+Config:+{
++++++++Foo:+string;
++++};
++++var+Foo:+string;
}
export+{+};|code-block|syntax|javascript|2869402|确保tsconfig.json中包含正确的include和exclude部分。示例如下：|2869403|"include":+[
++++"src/**/*.ts",
++],
++"exclude":+[
++++"node_modules",
++++"<node_internals>/**",
++++"bin/**"
++]|2869404|要使用这些变量，只需执行如下操作：|2869405|import+*+as+Logger+from+'./logger';

//+Initialize+early
global.log+=+Logger;

//+Use+it
log.Info("Booting+system...");|2869406|享受:)|2869407|entityMap|0|LINK|mutability|MUTABLE|url|https://javascript.plainenglish.io/typescript-and-global-variables-in-node-js-59c4bf40cb31|1|https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-globalthis^0|A|16|0|0|0|K|B|0|0|2|3|0|Q|I|1|0|4|9|0|0|0|L|7|T|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|D|3|E|5|6|7|1L|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1M|8|@$A|1N|B|1O|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|1Q|8|@$A|1R|B|1S|H|I]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|P|3|Q|5|M|7|1X|8|@$A|1Y|B|1Z|H|I]]|9|@]|C|$]]|$1|R|3|-4|5|6|7|20|8|@]|9|@]|C|$]]|$1|S|3|T|5|U|7|21|8|@]|9|@]|C|$V|W]]|$1|X|3|Y|5|6|7|22|8|@$A|23|B|24|H|I]|$A|25|B|26|H|I]]|9|@]|C|$]]|$1|Z|3|10|5|U|7|27|8|@]|9|@]|C|$V|W]]|$1|11|3|12|5|6|7|28|8|@]|9|@]|C|$]]|$1|13|3|14|5|U|7|29|8|@]|9|@]|C|$V|W]]|$1|15|3|16|5|6|7|2A|8|@]|9|@]|C|$]]|$1|17|3|-4|5|6|7|2B|8|@]|9|@]|C|$]]]|18|$19|$5|1A|1B|1C|C|$1D|1E]]|1F|$5|1A|1B|1C|C|$1D|1G]]]]

The text posted here is a short version of the article <a href="https://javascript.plainenglish.io/typescript-and-global-variables-in-node-js-59c4bf40cb31" rel="noreferrer">TypeScript and Global Variables in Node.js</a>
Since the release of TypeScript 3.4 there's a documented way to do it.
Create a file in the root of the project named <code>global.d.ts</code> with the following content. Please note:
<ul>
<li>The use of var , it’s required for this to work (see <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#type-checking-for-globalthis" rel="noreferrer">typescriptlang.org</a> for information about this).</li>
<li>Without the <code>export {}</code>, all variables will become <code>any</code></li>
</ul>
<pre><code>declare global {
 var Config: {
 Foo: string;
 };
 var Foo: string;
}
export { };
</code></pre>
Make sure the tsconfig.json has proper sections for <code>include</code> and <code>exclude</code>. Example follows:
<pre><code>&quot;include&quot;: [
 &quot;src/**/*.ts&quot;,
 ],
 &quot;exclude&quot;: [
 &quot;node_modules&quot;,
 &quot;&lt;node_internals&gt;/**&quot;,
 &quot;bin/**&quot;
 ]
</code></pre>
To use the variables, just do something like:
<pre><code>import * as Logger from './logger';

// Initialize early
global.log = Logger;

// Use it
log.Info(&quot;Booting system...&quot;);
</code></pre>
Enjoy :)

blocks|key|2658230|text|它在浏览器上工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2658231|我在https://stackoverflow.com/a/12709880/15859431里找到了这个|offset|length|2658232|declare+global+{
++++interface+Window+{
++++++++myGlobalFunction:+myGlobalFunction
++++}
}|code-block|syntax|javascript|2658233|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/12709880/15859431^0|0|2|19|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

It is work on browser 
I found this in <a href="https://stackoverflow.com/a/12709880/15859431">https://stackoverflow.com/a/12709880/15859431</a>
<pre><code>declare global {
 interface Window {
 myGlobalFunction: myGlobalFunction
 }
}
</code></pre>

In JavaScript I can just do this:

<pre><code> something = 'testing';
</code></pre>

And then in another file:

<pre><code> if (something === 'testing')
</code></pre>

and it will have <code>something</code> be defined (as long as they were called in the correct order).

I can't seem to figure out how to do that in TypeScript.

This is what I have tried. 

In a .d.ts file:

<pre><code>interface Window { something: string; }
</code></pre>

Then in my main.ts file:

<pre><code> window.something = 'testing';
</code></pre>

then in another file:

<pre><code> if (window.something === 'testing')
</code></pre>

And this works. But I want to be able to lose the <code>window.</code> part of it and just have my <code>something</code> be global. Is there a way to do that in TypeScript?

(In case someone is interested, I am really trying to setup my logging for my application. I want to be able to call <code>log.Debug</code> from any file without having to import and create objects.)

Create a global variable in TypeScript

TypeScript

在JavaScript中，我可以这样做： something = 'testing';然后在另一个文件中： if (something === 'testing')它将定义something (只要它们是以正确的顺序调用的)。我似乎不知道如何在TypeScript中做到这一点。这就是我尝试过的。在.d.ts文件中：in...

问在TypeScript中创建全局变量
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TypeScript中创建全局变量EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在TypeScript中创建全局变量
EN