axios の BaseURL に VITE_API_URL を割り当てると Typescript エラーが発生する

Question

私は、Vite と Typescript 上に構築された Vue 3 アプリケーション上で非常に基本的な axios セットアップを行っています。ただし、「baseURL」に関して次のようなタイプスクリプト エラーが発生します:

入力 'string|'boolean|unknown' はタイプ 'string|unknown' に割り当てることができません。 型 'false' は型 'string |' unknown' に割り当てることはできません。ts(2322)

明示的に暗示されているように、VITE_API_URL の型は string | boolean | unknown ですが、baseURL はブール値の受け入れを好みません。ここで、明らかにこのプロパティにブール値を割り当てようとしているわけではありませんが、その型から 可能性があることが示唆されており、これをいじるのには十分です。

これで、Vite は

VITE_API_URL のインターフェイスを次のように定義します:

インターフェイス ImportMetaEnv { [キー: 文字列]: 文字列 | ブール値 | 未定義 BASE_URL: 文字列 モード: 文字列 DEV: ブール値 PROD: ブール値 SSR: ブール値 }

もし私がこのインターフェイスを作成しているのであれば、この値にブール値を設定することは決してないので、ブール値を削除するだけでしょう。しかし、Vite の組み込みインターフェイスを変更することがここでの正しい行動であるかどうかには満足していません。

私はまだ Typescript の知識を広げている最中なので、これが私に欠けている単純な何かであることを願っていますが、これら 2 つをうまく動作させるための解決策が見つからないようです。 Vite と Axios の人気の高さを考えると、他の誰かがこの問題に遭遇し、簡単な解決策を見つけてくれることを願っています。助けていただければ幸いです。

httpClient.ts は次のとおりです:

import axios from 'axios'; const httpClient = axios.create({ ベースURL: import.meta.env.VITE_API_URL, ヘッダー: { 'コンテンツタイプ': 'アプリケーション/json', }、 }); デフォルトの httpClient をエクスポート;

Answer 1

ImportMetaEnv を拡張できます。使用しているカスタム環境変数に入力を追加します。

1. src/env.d.ts

   (必要に応じて作成) に、次のコードを追加します。 /// インターフェース ImportMetaEnv { 読み取り専用 VITE_API_URL: 文字列 }

   VS Code を使用している場合は、型をリロードするために TypeScript サーバー (または IDE 自体) を再起動する必要がある場合があります。