TypeScript中导入自定义.comp文件报错，如何解决？

我之前也碰到过类似自定义文件类型在TS里不被识别的情况，结合你的配置来看，核心问题是TypeScript不知道如何解析.comp扩展名的模块，而且你之前创建的空声明文件没有正确定义模块的导出类型，才会出现“不是模块”的报错。下面一步步来解决：

1. 创建正确的类型声明文件 #

TypeScript需要明确知道.comp文件导出的是什么类型，所以得写一个类型声明文件来告知它。比如在项目里新建typings/compose.d.ts（或者直接放在你的core目录下），内容如下：

// 声明所有*.comp文件的模块类型
declare module '*.comp' {
  // 你的组件是继承HTMLElement的ES类，这里定义对应类型
  class WebComponent extends HTMLElement {
    constructor();
    // 可以根据组件实际的生命周期或方法补充类型，比如：
    // connectedCallback(): void;
    // disconnectedCallback(): void;
  }

  export default WebComponent;
}

这个文件的作用是告诉TS：所有.comp后缀的模块都会导出一个继承HTMLElement的类，这样TS就不会再报“找不到模块”的错误了。

2. 调整tsconfig.json配置 #

你的tsconfig里有几个地方需要修改，让TS能识别声明文件并正确解析模块路径：

{
  "compilerOptions": {
    "outDir": "build",
    "baseUrl": ".",
    // 修正paths配置，原写法不符合TS路径解析规则
    "paths": {
      "core/*": ["core/*"],
      "test/*": ["test/*"]
    },
    "target": "es2015",
    // 确保typeRoots包含声明文件所在目录，比如typings或core
    "typeRoots": ["./node_modules/@types", "./core", "./typings"]
  },
  "include": [
    "test/*.ts",
    // 让TS包含你的声明文件
    "./typings/**/*.d.ts"
  ],
  "exclude": [
    "node_modules"
    // 移除**/*.comp的排除规则，TS不需要编译它，但要识别它是合法模块
  ]
}

• 修正paths：原来的"core": ["core/*"]写法错误，应该用"core/*": ["core/*"]才能正确解析import 'core/xxx'这类路径。
• 移除.comp文件的排除：TS不需要编译.comp文件，但需要知道它是合法模块，所以不要排除。
• 包含声明文件：确保TS能找到你刚才写的compose.d.ts。

3. 验证Webpack配置 #

你的Webpack配置基本没问题，再确认两点即可：

• resolve.extensions里已经包含.comp，确保Webpack能找到这些文件。
• loader顺序：ts-loader处理.ts文件，compose-loader处理.comp文件，这个顺序是对的——TS文件里导入.comp时，Webpack会先通过ts-loader做类型检查，再交给compose-loader编译.comp文件。

做完这些调整后，TypeScript应该就能正确识别.comp模块了，不会再报找不到模块或不是模块的错误，同时Webpack也能正常编译你的组件。

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