[Vite] import.meta interface

vite 에서는 import.meta 를 통해 환경변수에 접근할수 있도록 제공한다.

이 import.meta 가 타입 추론이 되지 않는 경우가 있다

(특히 hot 속성)

별도로 인터페이스를 선언해주어야 한다.

interface ViteHotContext {
  readonly data: any

  accept(): void
  accept(cb: (mod: ModuleNamespace | undefined) => void): void
  accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void
  accept(
    deps: readonly string[],
    cb: (mods: Array<ModuleNamespace | undefined>) => void,
  ): void

  dispose(cb: (data: any) => void): void
  prune(cb: (data: any) => void): void
  invalidate(message?: string): void

  on<T extends string>(
    event: T,
    cb: (payload: InferCustomEventPayload<T>) => void,
  ): void
  off<T extends string>(
    event: T,
    cb: (payload: InferCustomEventPayload<T>) => void,
  ): void
  send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void
}

interface ImportMeta {
  readonly hot?: ViteHotContext
}

그런 다음 타입 스크립트 컨피그 설정 해주면 된디ㅏ

{
  "compilerOptions": {
    "types": [
      "vite/client", // Vite 타입 정의 추가
      "./types/vite-env" // 방금 만든 타입 정의 파일 추가
    ]
  }
}

 

 

출처: https://vitejs.dev/guide/api-hmr

Vite

환경 변수 관련 vite 링크: 

https://ko.vitejs.dev/guide/env-and-mode

Vite

 

vite import.meta 를 사용하는 이유

https://pozafly.github.io/environment/why-do-you-use-import-meta-in-vite/

Vite에서 import.meta는 왜 사용하는 걸까? (feat. HMR)