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)

有没有办法实现这样的目标？

Answer 1

首先，不要假设全局变量there are many reasons for that。

您可以在客户端中有一个公开这些类型的模块，该模块应该采用全局变量并公开它。

例如

<强> 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。

Answer 2

如果你想要声明存在一个可用的全局变量，你需要的只有一个带有声明的.d.ts文件。

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

不需要进口。