导入TypeScript枚举出现类型错误：隐式any等Webpack编译报错

问题重现 #

枚举定义文件 common/enumerations.ts：

enum ViewBy {
    Alphabetical = "alphabetical",
    Year = "year"
};

export { ViewBy }

导入使用的文件 Test.tsx：

import { useState } from 'react';
import { ViewBy } from './common/enumerations';

function Test(): JSX.Element {
    const [viewBy, setViewBy] = useState<ViewBy>(ViewBy.Alphabetical);
    return <>></>;
}

export default Test;

编译报错：

Test.tsx(2,10) TS7034: 变量“ViewBy”在某些无法确定类型的位置隐式拥有“any”类型。
Test.tsx(6,42) TS2749: “ViewBy”指代一个值，但此处被当作类型使用。是否指“typeof ViewBy”？
Test.tsx(6,50) TS7005: 变量“ViewBy”隐式拥有“any”类型。

解决方案 #

1. 直接导出枚举 #

修改枚举定义文件，将枚举声明与导出合并，这是TypeScript导出枚举的标准写法，能确保类型和值被正确关联导出：

export enum ViewBy {
    Alphabetical = "alphabetical",
    Year = "year"
}

导入后可正常同时作为类型和值使用，无需额外处理。

2. 检查并修正tsconfig.json配置 #

确保tsconfig.json的编译配置正确，重点关注以下几项：

{
  "compilerOptions": {
    "module": "ESNext", // 根据项目环境选择CommonJS或ESNext
    "moduleResolution": "Node", // 确保模块解析逻辑正确
    "strict": true, // 开启严格类型检查，避免隐式any
    "esModuleInterop": true // 兼容CommonJS模块导入逻辑
  }
}

错误的模块解析配置会导致TypeScript无法正确识别导出的枚举类型。

3. 用类型别名+常量对象替代枚举 #

如果枚举方案仍有问题，可以改用更轻量化的类型别名+常量对象组合，彻底规避枚举的类型/值混淆问题：

// common/enumerations.ts
export type ViewBy = "alphabetical" | "year";

export const ViewBy = {
    Alphabetical: "alphabetical" as const,
    Year: "year" as const
};

导入使用方式与原代码完全一致，但类型和值的边界更清晰。

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