create-react-app中process.env.NODE_ENV判断local触发ts(2367)错误如何解决？

这个问题我之前也碰到过，本质是TypeScript对process.env.NODE_ENV的默认类型约束在搞鬼，我给你拆解下原因和解决办法：

为什么会报错？ #

TypeScript的默认类型定义里，NodeJS.ProcessEnv.NODE_ENV被限定为"development" | "production" | "test"这三个值——这是Node.js生态里最常见的环境标识。当你判断它等于"local"时，TS会静态检查出这两个类型没有重叠，所以提示“这个条件永远为false”，哪怕你在实际运行时确实把NODE_ENV设成了local。

而在JavaScript里没有静态类型检查，所以代码能正常执行；至于create-react-app里用REACT_APP_NODE_ENV没问题，是因为CRA对自定义环境变量（以REACT_APP_开头的）并没有做固定的类型约束，TS会把它们当成普通的string类型处理，自然不会报错。

解决办法 #

1. 扩展全局类型定义（推荐） #

直接修改TypeScript对ProcessEnv的类型声明，让它包含"local"这个值。在你的项目里新建一个.d.ts类型声明文件（比如src/types/global.d.ts），写入以下代码：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NODE_ENV: 'development' | 'production' | 'test' | 'local';
    }
  }
}

// 必须加这行，让TS把这个文件当成模块处理
export {};

保存后，TS就会认可NODE_ENV可能是"local"，错误自然消失，同时还能保留类型提示的优势。

2. 使用类型断言快速绕过 #

如果你不想修改全局类型，也可以用类型断言告诉TS“我知道这个值的实际类型”：

// 断言为string类型
if ((process.env.NODE_ENV as string) === "local") {
  links = [authLink, apolloLogger, uploadLink];
}

// 或者更精准的联合类型断言
if (process.env.NODE_ENV as 'development' | 'production' | 'test' | 'local' === "local") {
  links = [authLink, apolloLogger, uploadLink];
}

这种方式比较快捷，但会丢失一部分类型安全的校验，适合临时场景。

3. 改用自定义环境变量（类似CRA的方式） #

如果不想动类型，也可以像CRA那样用自定义前缀的环境变量，比如APP_NODE_ENV=local，然后代码里判断：

if (process.env.APP_NODE_ENV === "local") {
  links = [authLink, apolloLogger, uploadLink];
}

TS对这类自定义环境变量默认会识别为string | undefined，不会有类型冲突问题。

内容的提问来源于stack exchange，提问作者A.com