如何在带有 typescript 的 React js 项目中使用 .env 文件？

Question

我有一个 React js 项目，但是使用打字稿。我知道我们可以创建 .env 文件并定义一些配置，

.env 文件

REACT_APP_SOME_CONFIGURATION = "some value" 

并在代码中使用它，而不导入任何内容，如下所示

const configValue = process.env.REACT_APP_SOME_CONFIGURATION 

我在我的项目中尝试过这个设置，但没有成功。是因为它是打字稿吗？在这种情况下如何使用 .env 文件。

Answer 1

在 TypeScript 中，您需要设置返回值，因此如果该字符串这样做

const configValue : string = process.env.REACT_APP_SOME_CONFIGURATION 

或者

const configValue: string = (process.env.REACT_APP_SOME_CONFIGURATION as string);

Answer 2

您可以将其添加到您的react-app-env.d.ts文件中

declare namespace NodeJS {
    interface ProcessEnv {
       //types of envs
        NODE_ENV: 'development' | 'production' | 'test';
        PUBLIC_URL: string;

    }
}