在axios的baseURL中赋值VITE_API_URL时出现Typescript错误

Question

我在基于 Vite 和 Typescript 构建的 Vue 3 应用程序上有一个非常基本的 axios 设置。但是，我收到“baseURL”的打字稿错误，内容如下：

输入“字符串|”布尔 | undefined' 不可分配给类型 'string |不明确的'。 类型“false”不可分配给类型“string |”未定义'.ts(2322)

正如明确暗示的那样，VITE_API_URL 的类型为 string |布尔 | undefined，但 baseURL 不喜欢接受布尔值。现在，显然我并没有尝试为该属性分配一个布尔值，但它的类型表明它可能，这足以扰乱它。

现在Vite为VITE_API_URL定义了一个接口，如下：

interface ImportMetaEnv {
  [key: string]: string | boolean | undefined
  BASE_URL: string
  MODE: string
  DEV: boolean
  PROD: boolean
  SSR: boolean
}

如果我是创建这个界面的人，我只会删除布尔值，因为我永远不会为这个值设置布尔值，但我不满意改变 Vite 的内置界面是正确的此处的操作过程。

我仍在扩展我的 Typescript 知识，所以我希望这是我所缺少的一些简单的东西，但我似乎找不到任何解决方案来让这两个玩得很好。考虑到 Vite 和 Axios 的流行程度，我希望其他人也遇到过这个问题并找到了一个简单的解决方案。任何帮助将不胜感激！

httpClient.ts如下：

import axios from 'axios';

const httpClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default httpClient;

Answer 1

您可以增强 ImportMetaEnv 添加输入您正在使用的任何自定义环境变量：

1. 在src/env.d.ts（如果需要的话创建）中，添加以下代码：

   /// 
   
   interface ImportMetaEnv {
     readonly VITE_API_URL: string
   }
   

2. 如果使用 VS Code，您可能需要重新启动 TypeScript 服务器（或 IDE 本身）才能重新加载类型。