Axios의 baseURL에 VITE_API_URL을 할당할 때 Typescript 오류가 발생합니다.

Question

Vite 및 Typescript를 기반으로 구축된 Vue 3 애플리케이션에 매우 기본적인 Axios 설정이 있습니다. 그러나 "baseURL"에 대해 다음과 같은 타이프스크립트 오류가 발생합니다.

'문자열|'부울|정의되지 않음' 입력은 '문자열|정의되지 않음' 유형에 할당할 수 없습니다. 'false' 유형은 'string' 유형에 할당할 수 없습니다.ts(2322)

명확히 암시되듯이 VITE_API_URL 的类型为 string |布尔 | undefined，但 baseURL 부울 값을 받아들이는 것을 좋아하지 않습니다. 이제 분명히 이 속성에 부울 값을 할당하려는 것은 아니지만 해당 유형은 수도 일 수 있음을 암시하므로 이 정도면 충분히 엉망이 될 수 있습니다.

이제 Vite는 VITE_API_URL에 대한 인터페이스를 다음과 같이 정의합니다.

으아악

내가 이 인터페이스를 만드는 사람이라면 이 값에 대해 부울 값을 절대 설정하지 않을 것이기 때문에 부울 값을 제거할 것입니다. 하지만 여기서는 Vite의 내장 인터페이스를 변경하는 것이 올바른 작업 과정이라는 점에 만족하지 않습니다.

저는 아직 Typescript 지식을 넓혀가는 중이라 제가 놓치고 있는 간단한 내용이길 바라지만 이 두 가지를 훌륭하게 플레이할 수 있는 해결책을 찾을 수 없는 것 같습니다. Vite와 Axios의 인기를 고려하면 다른 누군가가 이 문제에 직면하여 간단한 해결책을 찾았기를 바랍니다. 어떤 도움이라도 대단히 감사하겠습니다!

httpClient.ts 내용은 다음과 같습니다.

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

Answer 1

사용 중인 사용자 정의 환경 변수에 입력을 추가하여 향상 ImportMetaEnv할 수 있습니다.

1. src/env.d.ts(필요한 경우 생성)에 다음 코드를 추가합니다.

   으아아아

2. VS Code를 사용하는 경우 유형을 다시 로드하려면 TypeScript 서버(또는 IDE 자체)를 다시 시작해야 할 수도 있습니다.