Auto-import of .d.ts files

I am using Vite, TypeScript and React. I'm facing an issue with VS Code auto-imports of custom .d.ts files.

Manual imports work fine the .d.ts file is detected by TypeScript. Issue with VS Code not pick up auto-imports for the Button.d.ts. VS Code manages to detect the .d.ts file and auto-import it if I rename it to index.d.ts.

Folder structure:

src/
  ├── components/
  │    ├── Button/
  │    │    ├── Button.tsx
  │    │    └── Button.d.ts

Button.d.ts:

export type TypeButton = {className?:string}

Button.tsx:

import type {TypeButton} from "./Button.d"
const Button = ({className=""}:TypeButton) =>{
    return <button className={className}></button>
}
export default Button

package.json:

{
  "name": "made-you-look",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react-swc": "^3.8.0",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}

tsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "./",
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true,
        "declaration": true
    },
    "include": ["src"]
}

A .d.ts file is used to provide type information about an API that's written in JavaScript. In a Typescript project, if you import a JS module such as Button.js, then it will pick up the accompanying Button.d.ts to gather type information. When you compile TS with the option declaration: true in your config, these are created automatically so that the consumer also has access to type information. This is needed as types don't exist in the compiled JS. You only need to create .d.ts files by hand for projects that only have JS codebases(Legacy or otherwise)

However in your case you are writing in typescript. You can just put you type declaration in your Button.tsx or just any .ts file. Then you environment will be able to handle it correctly.