如何解决 TypeScript 错误：“类型‘typeof env’上不存在属性‘EXPO_PUBLIC_BACKEND_URL’”？

Question

我正在使用 Expo 和 TypeScript 开发 React Native 项目。我正在尝试使用

process.env.EXPO_PUBLIC_BACKEND_URL

访问环境变量。

“当我运行应用程序时，代码工作正常，但我在 VSCode 中收到 TypeScript 错误”：

Property 'EXPO_PUBLIC_BACKEND_URL' does not exist on type 'typeof env'.

这是我的代码的相关部分：

const backendUrl = process.env.EXPO_PUBLIC_BACKEND_URL;
console.log(backendUrl);

我在

.env

文件中设置了环境变量，并且在运行时一切正常。但是，TypeScript 无法识别该变量，导致编辑器显示波形错误。

我尝试过的：

• 我已确保 .env 文件设置正确并且该变量在运行时可访问。
• 将我的 Expo SDK 升级到 51

我的

tsconfig.json

：

{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "jsx": "react-jsx",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "noImplicitThis": true,
        "alwaysStrict": true,
        "typeRoots": ["./env.d.ts"]
    }
}

我的

package.json

：

{
    "name": "helphive-frontend",
    "version": "1.0.0",
    "description": "Frontend mobile application in Expo for Helphive platform.",
    "main": "node_modules/expo/AppEntry.js",
    "author": "Maiz",
    "license": "MIT",
    "scripts": {
        "start": "expo start",
        "android": "expo run:android",
        "ios": "expo run:ios",
        "web": "expo start --web",
        "lint": "eslint .",
        "format": "prettier --write ."
    },
    "dependencies": {
        "@react-native-firebase/app": "^19.2.2",
        "@react-native-firebase/messaging": "^19.2.2",
        "@react-navigation/bottom-tabs": "^6.5.20",
        "@react-navigation/native": "^6.1.12",
        "@react-navigation/native-stack": "^6.9.20",
        "@reduxjs/toolkit": "^2.2.1",
        "eas-cli": "^10.0.2",
        "expo": "^51.0.17",
        "expo-dev-client": "~4.0.19",
        "expo-document-picker": "~12.0.2",
        "expo-file-system": "~17.0.1",
        "expo-font": "~12.0.7",
        "expo-image-picker": "~15.0.6",
        "expo-location": "~17.0.1",
        "expo-secure-store": "^13.0.2",
        "expo-status-bar": "~1.12.1",
        "nativewind": "^2.0.11",
        "react": "18.2.0",
        "react-native": "0.74.2",
        "react-native-image-picker": "^7.1.1",
        "react-native-maps": "1.14.0",
        "react-native-paper": "^5.12.3",
        "react-native-paper-dropdown": "^1.0.7",
        "react-native-safe-area-context": "4.10.1",
        "react-native-screens": "3.31.1",
        "react-native-svg": "15.2.0",
        "react-native-vector-icons": "^10.0.3",
        "react-redux": "^9.1.0",
        "string-width": "^7.1.0",
        "yarn": "^1.22.22"
    },
    "devDependencies": {
        "@babel/core": "^7.20.0",
        "@eslint/compat": "^1.1.1",
        "@eslint/js": "^9.7.0",
        "@types/node": "^20.14.11",
        "@types/react": "~18.2.79",
        "@types/react-native": "^0.73.0",
        "@types/tailwindcss": "^3.1.0",
        "@typescript-eslint/eslint-plugin": "^7.16.1",
        "@typescript-eslint/parser": "^7.16.1",
        "eslint": "9.x",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^5.1.3",
        "eslint-plugin-react": "^7.34.4",
        "eslint-plugin-react-hooks": "^4.6.2",
        "globals": "^15.8.0",
        "husky": "^9.0.11",
        "lint-staged": "^15.2.7",
        "prettier": "^3.3.3",
        "tailwindcss": "3.3.2",
        "typescript": "^5.5.3",
        "typescript-eslint": "^7.16.1"
    },
    "engines": {
        "node": "20.15.0"
    },
    "lint-staged": {
        "**/*.{js,jsx,ts,tsx,json,css,md}": [
            "prettier --write",
            "eslint --fix",
            "git add"
        ]
    },
    "private": true
}

重现步骤：

Answer 1

忘记回答我的解决方案。

您必须在项目的根目录中创建一个

env.d.ts

typescript 声明文件：

declare namespace NodeJS {
    interface ProcessEnv {
        EXPO_PUBLIC_BACKEND_URL: string;
        // define more or use wildcard
    }
}

还要确保

env.d.ts

包含在

tsconfig.json

的“包含”数组中：

{
    "extends": "expo/tsconfig.base",
    "compilerOptions": {},
    "include": ["src/**/*", "App.tsx", "env.d.ts"] //here
}