在TypeScript中，是否可以共享全局声明？

Question

通常我会将一些服务器端变量放到全局范围中，这样我就可以从客户端的TypeScript代码中的任何位置访问它们，例如：

在.cshtml文件中的服务器端：

<script>
  const RazorGlobals = {
    apiBaseUrl: '@Model.ApiBaseUrl'
  }
</script>

客户端代码：

declare const RazorGlobals: {
  apiBaseUrl: string
}

fetch(RazorGlobals.apiBaseUrl + '/myResource').then(doStuff)

目前我需要在每个需要使用它的文件的顶部重复使用declare const RazorGlobals...部分。我正在寻找一种方法，在单个位置定义此声明，类似于以下伪代码：

globals.d.ts:

export declare const RazorGlobals: {
  apiBaseUrl: string
}

file1.ts:

import './globals'

fetch(RazorGlobals.apiBaseUrl + '/myResource').then(doStuff)

file2.ts:

import './globals'

fetch(RazorGlobals.apiBaseUrl + '/myOtherResource').then(doOtherStuff)

有没有一种方法可以实现类似这样的效果？

- Geir Sagberg

---

把 d.ts 文件放在两个应用程序都可以访问的地方？ - toskv

是的，那是暗示，抱歉。我更新了代码以澄清我的意图。 - Geir Sagberg

他想为在全局上下文中定义的变量添加类型。你的解决方案只是在名为globals的模块中创建一个变量。他的方法是正确的，他只需要找出如何让编译器同时包含他的文件和定义。 - toskv

如果globals d.ts文件与您的项目在同一个文件夹中，只需删除export和导入语句。tsc应该会自动识别它。话虽如此，@gilamran说得有道理，您可能不应该仅仅假设它存在，而是将其作为应用程序配置的一部分。 - toskv

Answer 1

如果要声明一个全局变量，使其在任何地方都可用，您只需要创建一个包含声明的 .d.ts 文件即可。

// globals.d.ts
declare const RazorGlobals: {
  apiBaseUrl: string
}

不需要任何导入。

- toskv

---

这个回答解决了我所提出的问题，因此我将把它标记为答案。话虽如此，我可能会像@gilamran建议的那样去做，这似乎是一种更安全的方法 :) - Geir Sagberg

它确实如此。 :) - toskv

Answer 2

首先，不要假设存在全局变量，因为这有很多原因。

你可以在客户端中创建一个模块来公开这些类型，该模块应该将全局变量暴露出来。

例如：

config.ts

import { IAppConfig } from '../shared/AppConfig';
export const APP_CONFIG: IAppConfig = (window as any).RazorGlobals;

component.ts

import { APP_CONFIG } from './config';
console.log(APP_CONFIG.apiBaseUrl);

关于共享类型，你应该在客户端和服务器之间有一个名为shared的文件夹，在这个示例中，所有类型都应该在AppConfig.d.ts中。

使用相同的tsconfig.json编译客户端和服务器会引起很多问题。我在medium post和一个开源的starter-kit中讨论了这个问题。

- gilamran