在axios的baseURL中赋值VITE_API_URL时出现Typescript错误
P粉014218124
P粉014218124 2024-03-19 16:45:32
0
1
504

我在基于 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;

P粉014218124
P粉014218124

全部回复(1)
P粉176980522

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

  1. src/env.d.ts(如果需要的话创建)中,添加以下代码:

    /// 
    
    interface ImportMetaEnv {
      readonly VITE_API_URL: string
    }
    
  2. 如果使用 VS Code,您可能需要重新启动 TypeScript 服务器(或 IDE 本身)才能重新加载类型。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板