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;
您可以增強 ImportMetaEnv
添加輸入您正在使用的任何自定義環(huán)境變量:
在src/env.d.ts
(如果需要的話創(chuàng)建)中,添加以下代碼:
///interface ImportMetaEnv { readonly VITE_API_URL: string }
如果使用 VS Code,您可能需要重新啟動 TypeScript 服務(wù)器(或 IDE 本身)才能重新加載類型。