Beim Zuweisen von VITE_API_URL in baseURL von axios tritt ein Typescript-Fehler auf

Question

Ich habe ein sehr einfaches Axios-Setup für eine Vue 3-Anwendung, die auf Vite und Typescript basiert. Ich erhalte jedoch einen Typoskriptfehler für „baseURL“, der lautet:

Eingabe 'string|'boolean|undefiniert' kann nicht dem Typ 'string|undefiniert' zugewiesen werden. Der Typ „false“ kann nicht dem Typ „string | ‚undefiniert‘.ts(2322)

zugewiesen werden.“

Wie ausdrücklich angedeutet, akzeptiert VITE_API_URL 的类型为 string |布尔 | undefined，但 baseURL keine booleschen Werte. Nun versuche ich natürlich nicht, dieser Eigenschaft einen booleschen Wert zuzuweisen, aber ihr Typ deutet darauf hin, dass es sein könnte , und das reicht aus, um damit herumzuspielen.

Jetzt definiert Vite eine Schnittstelle für VITE_API_URL wie folgt:

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

Wenn ich derjenige wäre, der diese Schnittstelle erstellt, würde ich einfach den booleschen Wert entfernen, da ich für diesen Wert niemals einen booleschen Wert festlegen würde, aber ich bin nicht davon überzeugt, dass das Ändern der integrierten Schnittstelle von Vite hier das richtige Verfahren ist.

Ich bin immer noch dabei, meine Typescript-Kenntnisse zu erweitern, also hoffe ich, dass mir etwas Einfaches fehlt, aber ich kann anscheinend keine Lösung finden, damit diese beiden gut funktionieren. Angesichts der Beliebtheit von Vite und Axios hoffe ich, dass jemand anderes auf dieses Problem gestoßen ist und eine einfache Lösung gefunden hat. Jede Hilfe wäre sehr dankbar!

httpClient.ts ist wie folgt:

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 本身）才能重新加载类型。