如何在TypeScript/JavaScript中声明带默认值的全局变量并跨文件复用？

以下是几种在多个TSX文件中直接使用Months变量的可行方案，按推荐优先级排序：

方案一：模块化导出（推荐） #

这是TypeScript项目最规范的做法，避免全局污染，类型安全且易于维护。

1. 创建常量模块文件
   新建一个专门存放常量的文件（比如src/utils/constants.ts），定义并导出Months：

// src/utils/constants.ts
export const Months = [
  { name: 'January' },
  { name: 'February' },
  { name: 'March' },
  { name: 'April' },
  { name: 'May' },
  { name: 'June' },
  { name: 'July' },
  { name: 'August' },
  { name: 'September' },
  { name: 'October' },
  { name: 'November' },
  { name: 'December' }
];

2. 在目标文件中导入使用
   在file1.tsx、file2.tsx等文件中直接导入后使用：

// file1.tsx
import { Months } from './utils/constants';

// 直接调用示例
const monthNames = Months.map(item => item.name);

方案二：挂载到window全局对象（不推荐，仅特殊场景使用） #

如果必须做成全局变量，可以挂载到浏览器的window对象，但会造成全局污染，不利于项目长期维护。

1. 挂载变量到window
   在项目入口文件（比如src/index.tsx）中，将Months挂载到window：

// src/index.tsx
const Months = [
  { name: 'January' },
  // ...其余月份定义
];

// 类型断言避免TS报错
(window as any).Months = Months;

2. 声明全局类型
   新建src/global.d.ts文件，添加window的类型扩展，让TS识别全局变量：

// src/global.d.ts
declare global {
  interface Window {
    Months: Array<{ name: string }>;
  }
}

// 必须添加export使文件成为模块
export {};

3. 直接使用
   之后在任意TSX文件中可直接调用：

// file2.tsx
const monthList = window.Months.map(item => item.name);
// 若不想写window，可在tsconfig.json中确保global.d.ts被包含，直接写Months.map(...)

方案三：TypeScript全局命名空间（不推荐） #

通过命名空间定义全局变量，同样存在全局污染问题，仅适用于旧项目兼容场景。

1. 定义全局命名空间并暴露
   新建src/globals.ts文件：

// src/globals.ts
namespace GlobalConstants {
  export const Months = [
    { name: 'January' },
    // ...其余月份定义
  ];
}

// 声明全局变量类型
declare global {
  const Months: typeof GlobalConstants.Months;
}

// 挂载到全局对象
globalThis.Months = GlobalConstants.Months;

2. 配置TS并使用
   确保src/globals.ts在tsconfig.json的include范围内，之后即可在任意文件中直接使用Months：

// file3.tsx
const monthOptions = Months.map(item => ({ label: item.name, value: item.name }));

内容的提问来源于stack exchange，提问作者Mer Merced