如何配置tsconfig.json使TypeScript转译错误信息更详尽？

问题 #

转译TypeScript时错误信息缺失关键内容，既无报错行号，也没有问题保留字的相关提示。

报错示例 #

SyntaxError: Unexpected reserved word
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:155:18)
    at callTranslator (node:internal/modules/esm/loader:285:14)
    at ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:30)
    at async link (node:internal/modules/esm/module_job:76:21)

运行命令 #

/path/.nvm/versions/node/v20.10.0/bin/node --require ts-node/register --loader=ts-node/esm --trace-warnings /path/src/home-client.ts

当前tsconfig.json配置 #

{
  "compilerOptions": {
    "esModuleInterop": true,
    "moduleResolution": "NodeNext",
    "module": "NodeNext",
    "target": "es2021",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "decorators",
      "dom",
      "es2021"
    ]
  },
  "exclude": [
    "node_modules",
    "src/extensions"
  ],
  "ts-node": {
    "experimentalSpecifierResolution": "node",
    "transpileOnly": true,
    "esm": true,
  }
}

触发错误的测试代码 #

let arr = [1,2,3];
async function doIt(){return true;}
arr.filter(()=>{return await doIt()}); //nonsense to use await in filter, but it server demonstration purpose

测试代码运行命令 #

/path/.nvm/versions/node/v20.10.0/bin/node --require ts-node/register --loader=ts-node/esm --trace-warnings /path/demo.ts

需求：修改tsconfig.json配置，让转译错误信息更详尽，至少包含编译失败代码的行号。

解决方案 #

要获取更详细的错误信息，需调整ts-node和TypeScript的编译配置，具体修改如下：

• 关闭transpileOnly模式
  transpileOnly: true会跳过TypeScript的类型检查和详细错误报告，仅做转译。将其改为false，让ts-node执行完整的类型检查和错误分析：

  "ts-node": {
    "experimentalSpecifierResolution": "node",
    "transpileOnly": false,
    "esm": true
  }
  

• 启用TypeScript详细错误输出
  在compilerOptions中添加noEmitOnError: true和pretty: true，前者确保编译出错时不生成输出文件，后者让错误信息格式更清晰易读：

  "compilerOptions": {
    // 保留原有配置
    "noEmitOnError": true,
    "pretty": true
  }
  

• 添加skipLibCheck优化（可选）
  若项目依赖的库类型定义较多，关闭transpileOnly后可能会变慢，添加skipLibCheck: true可跳过库的类型检查，仅关注业务代码错误：

  "compilerOptions": {
    // 保留原有配置
    "skipLibCheck": true
  }
  

修改后的完整tsconfig.json示例：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "moduleResolution": "NodeNext",
    "module": "NodeNext",
    "target": "es2021",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "decorators",
      "dom",
      "es2021"
    ],
    "noEmitOnError": true,
    "pretty": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "src/extensions"
  ],
  "ts-node": {
    "experimentalSpecifierResolution": "node",
    "transpileOnly": false,
    "esm": true
  }
}

修改后重新运行代码，就能看到包含行号和具体错误原因的提示，比如针对测试代码会输出：

demo.ts:3:27 - error TS1308: 'await' expression is only allowed within an async function.

3 arr.filter(()=>{return await doIt()});
                            ~~~~~

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