What is the preferred way to structure type declaration files with Vite in React TypeScript app

Question

I am migrating my app from Webpack to Vite. What is the preferred way to add this:

/// <reference types="vite/client" />

I have already a file types/global.d.ts. Also I created a file env.d.ts and added:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_MY_ENDPOINT: string;
  // more env variables...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

But then I have 2 times the reference /// <reference types="vite/client" />.

What is the best way to structure this?

Answer 1

Create a file called "vite-env.d.ts":

Contents of the file should be:

/// <reference types="vite/client" />

For me I saved this file in my /src folder.

Adding this file means you only need add this in a single time.