React/TypeScript模板字面量表达式类型错误求助

你遇到的问题是因为TypeScript默认认为process.env下的所有属性都是string | undefined类型，即使手动赋值，类型系统也不会自动更新该属性的类型。以下是几种可行的解决办法：

1. 使用非空断言操作符（!） #

在使用环境变量时，直接添加非空断言告诉TypeScript该变量一定存在：

expect(global.fetch).toHaveBeenCalledWith(
    `${process.env.NEXT_PUBLIC_API_URL!}tenants/v1/${locale}/inquiries`,
    {
        method: 'POST',
        headers: getDefaultHeaders(),
        body: JSON.stringify(defaultRequest.body)
    }
);

注意：这种方式需要确保测试环境中NEXT_PUBLIC_API_URL确实被正确赋值，否则运行时可能出现未定义错误。

2. 提前校验环境变量并抛出错误 #

在测试代码开头添加校验逻辑，当变量不存在时直接抛出错误，TypeScript会自动推断后续代码中该变量为string类型：

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/';

if (!process.env.NEXT_PUBLIC_API_URL) {
  throw new Error('测试环境未配置NEXT_PUBLIC_API_URL');
}

it('should make a POST request when called', async () => {
    await contactProxy(defaultRequest, response);

    expect(global.fetch).toHaveBeenCalledWith(
        `${process.env.NEXT_PUBLIC_API_URL}tenants/v1/${locale}/inquiries`,
        {
            method: 'POST',
            headers: getDefaultHeaders(),
            body: JSON.stringify(defaultRequest.body)
        }
    );
});

3. 扩展ProcessEnv类型定义 #

在项目根目录创建env.d.ts文件，手动声明环境变量的类型：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NEXT_PUBLIC_API_URL: string;
    }
  }
}

export {};

这样TypeScript会全局识别NEXT_PUBLIC_API_URL为string类型，无需每次使用都做断言或校验。

4. 在Jest配置中预设置环境变量 #

修改jest.config.js（或jest.config.ts），通过setupFiles提前加载环境变量配置：

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
  // 其他Jest配置...
};

然后在jest.setup.js中设置：

process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000/';

这种方式可以确保所有测试用例运行前环境变量都已被正确赋值，同时结合类型定义可以彻底解决类型问题。

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