Ralat skrip taip berlaku apabila menetapkan VITE_API_URL dalam baseURL bagi aksios

Question

Saya mempunyai persediaan aksios yang sangat asas pada aplikasi Vue 3 yang dibina pada Vite dan Typescript. Walau bagaimanapun, saya mendapat ralat skrip taip untuk "baseURL" yang berbunyi:

Input 'rentetan|'boolean|undefined' tidak boleh diperuntukkan untuk menaip 'rentetan|undefined'. Taip 'false' tidak boleh diperuntukkan untuk menaip 'rentetan |.ts(2322)

Seperti yang dinyatakan secara jelas, VITE_API_URL 的类型为 string |布尔 | undefined，但 baseURL tidak suka menerima nilai boolean. Sekarang, jelas sekali saya tidak cuba memberikan nilai boolean kepada sifat ini, tetapi jenisnya menunjukkan bahawa ia mungkin , dan itu sudah cukup untuk mengacaukannya.

Kini Vite mentakrifkan antara muka untuk VITE_API_URL, seperti berikut:

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

Jika saya yang mencipta antara muka ini, saya hanya akan mengalih keluar boolean kerana saya tidak akan menetapkan boolean untuk nilai ini, tetapi saya tidak berpuas hati bahawa menukar antara muka terbina dalam Vite adalah prosedur yang betul di sini.

Saya masih mengembangkan pengetahuan TypeScript saya, jadi saya berharap ia adalah sesuatu yang mudah yang saya ketinggalan, tetapi saya nampaknya tidak dapat mencari sebarang penyelesaian untuk membolehkan kedua-dua ini bermain dengan baik. Memandangkan betapa popularnya Vite dan Axios, saya berharap orang lain telah menghadapi masalah ini dan menemui penyelesaian yang mudah. Sebarang bantuan akan sangat dihargai!

httpClient.ts adalah seperti berikut:

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

Anda boleh meningkatkan ImportMetaEnv dengan menambahkan input pada mana-mana pembolehubah persekitaran tersuai yang anda gunakan:

1. Dalam src/env.d.ts (buat jika perlu), tambah kod berikut:

   /// 
   
   interface ImportMetaEnv {
     readonly VITE_API_URL: string
   }
   

2. Jika menggunakan Kod VS, anda mungkin perlu memulakan semula pelayan TypeScript (atau IDE itu sendiri) untuk memuat semula jenis.