在Typescript中的文件中本地处理全局变量

Question

我公司的工作方式很奇怪。我们使用PHP模板引擎将所有文件复制到一个HTML中并提供服务

主html

<script>
(() => {
const foo = 'bar';
{{ include('xxx.js') }}
})
{{ include('zzz.js') }}
</script>

xxx.ts

declare const foo: string;
(() => {
console.log(foo);
})()

正如您所看到的，IIFE有两层，一层在主HTML中，另一层在每个.ts中，以确保变量的范围正确包含在每个.ts文件中。然后，我使用tsc将xxx.ts编译为xxx.js。

问题是，现在我有一个额外的文件yyy.ts，我想将它包含在main.html的IIFE中xxx.ts的正下方。假设yyy.ts与xxx.ts完全相同。

yyy.ts

declare const foo: string;
(() => {
console.log(foo);
})()

在这两个文件中，我在foo遇到了一个问题。错误为Cannot redeclare block-scoped variable。

我无法将foo放入global.d.ts文件中，因为它不是全局的，因为它只对xxx.js和yyy.js有效

我已经做了一些阅读，并看到TS编译的方式是，如果文件没有import/export，它将把所有变量视为全局变量。

我该如何解决这个问题？我能想到的两种方式是：

• 找到一种设置tsconfig的方法，将每个文件视为单独的文件。我还没有找到一个好的解决方案
• 在.ts文件中，在IIFE中声明全局变量。但我遇到了错误Modifiers cannot appear here

如有任何帮助，我们将不胜感激。谢谢

Answer 1

我有一种感觉，你不明白我关于IIFE的观点是用PHP而不是TS完成的。所以我认为如果我展示一些例子可能会有意义。

据我所知，你有一个名为foo的全局var，你希望它包含在xxx&zzz。。

首先，不要将IIFE放在TS文件中。否则，就像你发现你会得到Cannot redeclare block-scoped variable一样

所以下面是一个想法，我相信你会做什么之后。

文件xxx。TS

declare const foo: string;
const msg = "hello";
console.log(`${msg) ${foo)`);

文件zzz。TS

declare const foo: string;
const msg = "goodbye";
console.log(`${msg) ${foo)`);

现在，如果在我们的PHP文件中，我们做了->

<script>
(() => {
const foo = 'bar';
(() => { {{ include('xxx.js') }} })
(() => { {{ include('yyy.js') }} })
})
</script>

所以在上面，首先你有一个全局的var foo，但对于你的TS文件只有全局的，每个TS文件也可以有自己的本地var。在上面你可以看到我定义了一个本地var msg，它有hello&CCD_ 23在每个TS文件中不同。

因此，如果你运行上面的程序，你应该会看到类似->

hello bar
goodbye bar

以上这些都不会污染你的全球窗户。