TypeScript中如何获取当前文件名？解决编译后文件名异常问题

因为TypeScript运行时实际执行的是编译后的JavaScript文件，__filename指向的是JS文件路径，所以直接用它拿不到原TS文件名。可以通过以下几种方式解决：

• 保持编译后文件名与原TS一致（常用方案）
  首先在tsconfig.json中配置编译选项，确保输出的JS文件和原TS文件名同名、目录结构对应：

  {
    "compilerOptions": {
      "rootDir": "./src", // 你的TS源码目录
      "outDir": "./dist", // 编译后JS输出目录
      "module": "CommonJS" // 或ESModule，根据项目选择
    },
    "include": ["src/**/*"]
  }
  

  之后在TS文件中，通过替换JS文件名的后缀得到原TS文件名：

  // CommonJS环境
  const path = require('path');
  // 从编译后的JS文件名替换后缀为.ts
  const tsFileName = path.basename(__filename, '.js') + '.ts';
  console.log(tsFileName); // 输出原TS文件名，比如my-script.ts
  
  // ESM环境（需在tsconfig中设置module为ESNext等）
  import path from 'path';
  import { fileURLToPath } from 'url';
  
  const __filename = fileURLToPath(import.meta.url);
  const tsFileName = path.basename(__filename, '.js') + '.ts';
  console.log(tsFileName);
  

• 编译时注入原文件名（进阶方案）
  如果编译流程涉及Webpack、Rollup这类构建工具，可以通过对应插件在编译时将原TS文件名注入到代码中。比如使用Webpack的DefinePlugin，在配置中添加：

  const webpack = require('webpack');
  
  module.exports = {
    // 其他配置
    plugins: [
      new webpack.DefinePlugin({
        '__TS_FILENAME__': JSON.stringify(path.basename(__filename))
      })
    ]
  };
  

  之后在TS文件中直接使用__TS_FILENAME__即可获取原文件名。

需要注意的是，如果编译流程会修改文件名（比如打包成单个bundle、自动重命名），第一种方案可能失效，此时优先考虑构建工具注入的方式。

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