使用Vite 5 React-TS模板运行pnpm dev时枚举未定义问题排查

可见错误点 #

• 枚举放在.d.ts文件中错误：.d.ts是类型声明文件，仅用于描述类型信息，编译后不会生成对应的JavaScript代码。而枚举是运行时存在的值，放在.d.ts里会导致编译后丢失枚举的运行时实现，浏览器自然找不到CharacterConnectionStatus。
• 枚举未导出：即使忽略.d.ts的问题，你定义的枚举没有用export导出，其他模块无法访问这个值（接口是类型，TypeScript可以通过全局类型查找识别，但枚举是值，必须显式导出才能跨模块使用）。
• tsconfig配置冗余且错误：declaration: true和declarationDir是用来自动生成类型声明文件的（通常用于库开发），你手动编写的类型声明不需要这个配置，反而可能导致类型文件混乱。

修复步骤 #

1. 迁移枚举到.ts文件：
   将src/types/index.d.ts重命名为src/types/index.ts，并导出枚举和接口：

   export enum CharacterConnectionStatus {
     ONLINE = "online",
     OFFLINE = "offline",
     AWAY = "away",
   }
   
   export interface Character {
     id: string;
     username: string;
     firstName: string;
     lastName: string;
     birthday: string;
     description: string;
     avatarURI: string;
     connection_status: CharacterConnectionStatus;
   }
   

2. 在App.tsx中导入依赖：
   在文件顶部添加导入语句：

   import { Character, CharacterConnectionStatus } from './types';
   

3. 修正tsconfig.json：
   移除declaration和declarationDir配置，确保include包含src目录：

   {
     "compilerOptions": {
       /* 其他原有配置 */
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]
   }
   

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