Vite+React+TypeScript项目中VS Code无法自动导入自定义Button.d.ts文件的问题

兄弟我太懂你这种无奈了！明明手动导入类型一切正常，TypeScript也能识别到Button.d.ts，可VS Code就是死活不肯自动提示导入，非得改成index.d.ts才听话，这事儿确实挺磨人的。我来给你捋几个靠谱的解决办法：

• 先确认你的.d.ts是模块类型：要是你的Button.d.ts里没有用export导出类型，那它是全局类型，VS Code的自动导入机制根本不会把它当成可导入的模块。所以先检查文件里是不是有类似这样的代码：

  export interface ButtonProps {
    size: 'small' | 'medium' | 'large';
    disabled?: boolean;
  }
  

  加个export把类型变成模块级别的，这是基础前提。

• 检查tsconfig.json的扫描范围：确保TS能扫到这个.d.ts文件，打开你的tsconfig.json，把include配置补全，让它覆盖src下所有的ts、d.ts和tsx文件：

  {
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@/*": ["src/*"] // 可选配置，能让导入路径更简洁
      },
      // 保留你原有其他配置...
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
    "exclude": ["node_modules"]
  }
  

  保存后，TS就能正确索引到你的Button.d.ts了。

• 重启VS Code的TS语言服务：有时候VS Code的TS服务会抽风缓存旧的索引，按Ctrl+Shift+P打开命令面板，输入TypeScript: Restart TS Server回车，等服务重启完再试试自动导入，说不定就正常了。

• 曲线救国：用index.ts中转导出：要是上面的方法都不好使，你可以在Button.d.ts所在的文件夹里建一个index.ts文件，把Button的类型从.d.ts里导出来：

  // src/components/Button/index.ts
  export * from './Button.d.ts';
  

  这样VS Code就能识别到这个模块，自动导入的时候会指向index.ts，但实际上还是用的你原来的Button.d.ts里的类型，也不用改原来的文件名。

• 调整VS Code的导入偏好设置：打开VS Code的设置（Ctrl+,），搜索typescript.preferences.importModuleSpecifier，把它改成shortest或者non-relative，说不定能让VS Code更积极地识别到你的自定义类型文件。

这些方法我自己遇到类似问题的时候都试过，大部分情况都能解决，你可以挨个试试！

备注：内容来源于stack exchange，提问作者K i