React+TypeScript(Vite)类型自动导入失效问题求助

问题场景 #

通过npm create vite@latest创建的React+TypeScript项目，此前无需额外配置即可正常使用TypeScript类型自动导入功能，但当前该功能失效：

• 在项目根目录的types/index.ts中定义了Name类型：

type Name = {
 firstName : string,
 lastName: string
}

• 在React组件Test中使用该类型时，触发报错Cannot find name 'Name'. ts(2304)，组件代码：

type Collection= {
 students : Name[]
}

export default function Test() {
   return (
      <div>test</div>
    )
 }

项目当前tsconfig配置如下：

tsconfig.json #

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

tsconfig.app.json #

{
  "compilerOptions": {
    "composite": true,
    "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,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

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

tsconfig.node.json #

{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true
  },
  "include": ["vite.config.ts"]
}

解决方案 #

1. 让TypeScript识别类型文件 #

当前tsconfig.app.json的include仅覆盖src目录，而types目录在项目根目录未被纳入。修改tsconfig.app.json的include字段：

"include": ["src", "types"]

2. 导出类型 #

确保types/index.ts中的类型被导出，否则无法被自动导入：

export type Name = {
 firstName : string,
 lastName: string
}

3. 重启TypeScript服务 #

修改配置后，重启VS Code的TypeScript服务（快捷键Ctrl+Shift+P，搜索并选择TypeScript: Restart TS Server），再回到组件中使用Name类型，自动导入功能即可恢复。

4. 可选：配置类型别名优化导入体验 #

若想让导入路径更简洁，可在tsconfig.app.json的compilerOptions中添加路径别名：

"compilerOptions": {
  // 保留原有配置
  "baseUrl": ".",
  "paths": {
    "@types/*": ["types/*"]
  }
}

同时在vite.config.ts中同步配置Vite的别名，确保构建工具识别：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@types': path.resolve(__dirname, './types')
    }
  }
})

5. 检查VS Code自动导入设置 #

确认VS Code的自动导入功能未被禁用：

• 打开设置（快捷键Ctrl+,）
• 搜索Auto Import: Enable，确保勾选
• 搜索TypeScript: Suggest Auto Imports，确保勾选

内容的提问来源于stack exchange，提问作者Shamseer K