解决TypeScript导入自定义转译.xyz文件的TS2307错误

针对你遇到的问题，以下是关键的补充步骤：

1. 配置TypeScript识别.xyz扩展名 #

在tsconfig.json中，确保TypeScript能解析.xyz文件，添加到resolve.extensions，同时配置正确的模块解析策略：

{
  "compilerOptions": {
    "resolveExtensions": [".ts", ".js", ".xyz"],
    "moduleResolution": "bundler" // 若用Node.js环境则设为"node"
  }
}

2. 添加通用模块声明文件 #

创建一个全局的.d.ts声明文件（比如src/types/xyz.d.ts），让TypeScript认可所有.xyz模块的合法性，同时兼容你插件提供的动态类型：

declare module "*.xyz" {
  // 这里的类型会被你的IDE插件动态覆盖，仅用于避免编译报错
  const exports: Record<string, unknown>;
  export = exports;
}

注意：这个声明只是兜底，你的IDE插件已经能提供具体类型，不会影响开发时的类型提示。

3. 修复Webpack Loader配置（若用Webpack构建） #

之前的loader无效大概率是顺序或配置错误，正确的配置应该是先把.xyz转译为TypeScript，再用ts-loader处理：

• 先编写自定义loader（比如xyz-loader.js）：

module.exports = function(source) {
  // 调用你开发的编译器，将.xyz内容转译为TS代码
  const tsCode = yourXyzCompiler.compile(source);
  return tsCode;
};

• 在webpack.config.js中配置规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.xyz$/,
        use: [
          'ts-loader', // 后执行：将转译后的TS转为JS
          './xyz-loader.js' // 先执行：将.xyz转为TS
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.xyz'] // 确保Webpack能找到.xyz文件
  }
};

4. 用自定义Transformer支持TSC直接编译（若不用Webpack） #

如果直接用tsc编译，需要给TypeScript添加自定义转换器，在编译阶段转译.xyz文件：

• 安装ts-patch（用于加载自定义转换器）：

npm install ts-patch -D

• 编写转换器（比如xyz-transformer.ts）：

import * as ts from 'typescript';

export default function transformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile> {
  return (context) => {
    return (sourceFile) => {
      if (sourceFile.fileName.endsWith('.xyz')) {
        // 调用编译器转译.xyz内容为TS代码
        const tsCode = yourXyzCompiler.compile(sourceFile.text);
        // 生成新的TS源文件AST
        return ts.createSourceFile(
          sourceFile.fileName,
          tsCode,
          ts.ScriptTarget.Latest,
          true
        );
      }
      return sourceFile;
    };
  };
}

• 在tsconfig.json中配置插件：

{
  "compilerOptions": {
    "plugins": [
      { "transform": "./xyz-transformer.ts" }
    ]
  }
}

• 用ts-patch执行编译：

ts-patch compile

关键说明 #

• require.extensions仅作用于Node.js运行时，对TS编译或Webpack构建无意义，之前的尝试无效是正常的。
• 若Webpack仍报错，检查loader的路径是否正确，以及你的编译器是否能正确输出可被ts-loader处理的TS代码。

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