在axios的baseURL中賦值VITE_API_URL時出現Typescript錯誤
P粉014218124
P粉014218124 2024-03-19 16:45:32
0
1
472

我在基於 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 本身)才能重新載入類型。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!