TypeScript/Ember 3.1项目枚举运行时导入错误排查求助

你遇到的问题大概率和Ember老版本的模块解析规则、TypeScript枚举的编译处理，或者导入语句的小失误有关，下面一步步拆解原因和解决办法：

可能的问题原因 #

1. 导入名称不匹配 #

你组件里写的是import { StateNames, CardSummary } from '../../types/snowcat/state-types'，但类型文件里导出的是CardState枚举——除非StateNames是CardState的运行时值别名（比如export const StateNames = CardState），否则你在组件里用CardState.new的时候，运行时根本找不到这个变量，自然会触发导入错误。

2. Ember 3.1的模块系统未识别types/目录 #

Ember 3.1依赖老的AMD模块系统（基于RequireJS），默认只会处理app/、addon/这些核心目录下的文件。你的types/目录可能没被加入到Ember构建系统的模块查找路径里，导致TypeScript编译时能识别类型，但打包后的运行时代码里找不到对应模块。

3. 早期ember-cli-typescript对枚举的支持缺陷 #

对应Ember 3.1的ember-cli-typescript版本属于1.x系列，对运行时枚举的处理还不够完善，可能没有把types/目录下的.ts文件正确编译为JS并打包到最终产物中。

对应的解决方案 #

先修正最基础的导入问题 #

如果是笔误，直接把导入语句改成正确的枚举名称：

import { CardState } from '../../types/snowcat/state-types';

如果StateNames确实是CardState的别名，那要确保类型文件里同时导出枚举的运行时值：

// state-types.ts
export enum CardState { 
  error = 'error', 
  new = 'new', 
  okay = 'okay', 
  warning = 'warning', 
}
export const StateNames = CardState; // 导出运行时值别名

配置构建系统识别types/目录 #

1. 修改tsconfig.json，把types/目录加入到include数组，让TypeScript能正确编译这个目录下的文件：

{
  "compilerOptions": { /* 你的现有配置 */ },
  "include": [
    "app/**/*",
    "types/**/*"
  ]
}

2. 在ember-cli-build.js中，确保types/目录被当作源目录处理（如果默认没处理的话）：

// ember-cli-build.js
module.exports = function(defaults) {
  const app = new EmberApp(defaults, {
    // 其他配置
  });

  // 手动导入类型目录下编译后的JS文件（如果自动打包未生效）
  // app.import('types/snowcat/state-types.js');

  return app.toTree();
};

把枚举移到app/目录下 #

Ember默认会优先处理app/下的所有文件，把枚举定义放到app/types/snowcat/state-types.ts，然后用Ember的模块别名导入：

import { CardState } from 'your-app-name/types/snowcat/state-types';

这样构建系统会自动编译并打包这个文件，不会出现运行时找不到模块的问题。

升级或调整ember-cli-typescript版本 #

确保你使用的ember-cli-typescript版本和Ember 3.1兼容（1.x系列），如果版本太旧，可能存在枚举相关的bug，可以尝试升级到该系列的最新版本（比如1.5.x）。

替代方案：用字符串字面量联合类型代替枚举 #

如果你不需要运行时的枚举对象，只是想做类型约束，完全可以用字符串字面量联合类型，这样不会有任何运行时导入问题：

// state-types.ts
export type CardState = 'error' | 'new' | 'okay' | 'warning';

然后组件里的代码改成：

@computed('cardSummary.cardState')
get type(): string {
  const allowedStates: CardState[] = ['new', 'okay', 'warning'];
  if (allowedStates.includes(this.cardSummary.cardState as CardState)) {
    return 'info';
  }
  return 'error';
}

（这里的类型断言是因为includes的类型检查会比较严格，你可以根据实际情况调整）

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