Angular项目创建全局常量文件的最优方案咨询

问题背景 #

我调研了Angular项目中创建全局常量文件的三种常见方式，各存在明显弊端：

• 常量类：readonly修饰符仅在编译时生效，运行时无法阻止修改
• 普通常量文件：缺乏多上下文的分类管理，常量零散混乱
• Angular环境文件：仅适用于环境特定配置（如dev/prod接口地址），不适用于通用全局常量

为此我提出了一个方案：参考环境文件的结构，使用单一大型常量对象，同时结合TypeScript的Readonly类型和Object.freeze()函数确保不可变，代码如下：

export const constants: Readonly<any> = Object.freeze({
  Context:
    {
      PI: 3.14159265359,
      WEATHER: 'https://goweather.herokuapp.com/weather/',
    },
   AnotherContext: {...}
})

请问这个方案是否可行？有没有遗漏的关键要点？

回答 #

方案整体可行性 #

这个方案完全可行，它很好地解决了你提到的三种传统方式的弊端：

• 结合Readonly（编译时类型检查）和Object.freeze()（运行时冻结），补上了常量类运行时可修改的漏洞
• 通过上下文分组（如Context、AnotherContext）解决了普通常量文件缺乏分类的问题
• 结构和Angular环境文件一致，符合开发者的使用习惯

需要注意的遗漏要点 #

1. Object.freeze()是浅冻结
   你当前的代码仅冻结了顶层的constants对象，嵌套的子对象（如Context）在运行时仍然可以被修改。比如在浏览器控制台执行constants.Context.PI = 3，虽然TypeScript会编译报错，但运行时实际能修改成功。
   解决办法是实现一个深冻结函数，递归冻结所有嵌套层级的对象：

   function deepFreeze<T>(obj: T): Readonly<T> {
     Object.values(obj).forEach(val => {
       if (typeof val === 'object' && val !== null) deepFreeze(val);
     });
     return Object.freeze(obj);
   }
   
   // 使用方式
   export const constants: Readonly<AppConstants> = deepFreeze({...});
   

2. Readonly<any>丢失类型提示
   使用any会完全浪费TypeScript的类型检查优势，开发者使用常量时无法获得自动补全和拼写错误提示。应该定义具体的类型接口：

   interface AppConstants {
     Context: {
       PI: number;
       WEATHER: string;
     };
     AnotherContext: {
       // 定义该上下文下的常量类型
       MAX_RETRY: number;
     };
   }
   
   export const constants: Readonly<AppConstants> = deepFreeze({
     Context: {
       PI: 3.14159265359,
       WEATHER: 'https://goweather.herokuapp.com/weather/',
     },
     AnotherContext: {
       MAX_RETRY: 3
     }
   });
   

3. 按需导入与打包体积
   如果常量对象规模很大，全量导入会增加不必要的打包体积（虽然Angular的Tree Shaking会优化，但效果有限）。建议根据上下文拆分多个小常量文件，比如constants.context.ts、constants.another.ts，需要时按需导入，避免全量引入。

4. 测试mock的便利性
   如果测试场景中需要临时修改某个常量，冻结的对象很难被mock。如果你的项目有大量需要mock常量的测试用例，建议将常量封装成Angular服务，通过依赖注入提供，这样测试时可以轻松替换服务实例。

5. 动态常量的适配性
   该方案仅适用于纯静态常量，如果某些常量需要根据环境、用户权限或其他动态条件生成，这个方案就不适用了，此时还是需要结合服务或环境变量来实现。

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