NextJS项目中，如何生成tsc类型检查的报告文件？

核心思路：利用tsc官方JSON输出+自定义脚本转换 #

TypeScript 3.9+ 支持--json参数，可直接输出机器可读的JSON格式类型检查结果，再通过简单的Node脚本将其转换为HTML/CSV等格式的报告。

步骤1：生成JSON格式的检查结果 #

执行tsc命令时添加--json参数，指定输出文件：

# 单次检查生成JSON报告
tsc --noEmit --incremental --json ts-errors.json

# 若需watch模式下持续更新JSON文件
tsc --noEmit --watch --incremental --json ts-errors.json

注：watch模式下，每次类型检查触发后会自动覆盖ts-errors.json文件。

步骤2：编写脚本转换为HTML/CSV报告 #

以下是两个实用的转换脚本示例：

转换为CSV报告

创建convert-to-csv.js：

const fs = require('fs');
const errors = require('./ts-errors.json');

const csvHeader = "文件路径,行号,列号,错误代码,错误信息\n";
const csvRows = errors.errors.map(err => {
  // 处理CSV中的引号转义
  return `"${err.file}",${err.start.line},${err.start.character},"${err.code}","${err.message.replace(/"/g, '""')}"`;
});

fs.writeFileSync('ts-errors.csv', csvHeader + csvRows.join('\n'));

转换为HTML报告

创建convert-to-html.js：

const fs = require('fs');
const errors = require('./ts-errors.json');

const htmlContent = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TypeScript类型检查报告</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    table { border-collapse: collapse; width: 100%; margin-top: 20px; }
    th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
    th { background-color: #f5f5f5; }
    .error-code { color: #dc3545; font-weight: bold; }
    .error-message { color: #dc3545; }
    .summary { font-size: 1.1em; margin-bottom: 10px; }
  </style>
</head>
<body>
  <h1>TypeScript类型检查报告</h1>
  <div class="summary">
    <p>检查时间：${new Date(errors.time).toLocaleString()}</p>
    <p>错误总数：${errors.errors.length}</p>
  </div>
  <table>
    <tr>
      <th>文件路径</th>
      <th>行号</th>
      <th>列号</th>
      <th>错误代码</th>
      <th>错误信息</th>
    </tr>
    ${errors.errors.map(err => `
    <tr>
      <td>${err.file}</td>
      <td>${err.start.line}</td>
      <td>${err.start.character}</td>
      <td class="error-code">${err.code}</td>
      <td class="error-message">${err.message.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>
    </tr>
    `).join('')}
  </table>
</body>
</html>
`;

fs.writeFileSync('ts-errors.html', htmlContent);

步骤3：自动化处理（可选） #

若需在watch模式下自动更新报告，可使用chokidar监听JSON文件变化，自动触发转换：

1. 安装依赖：

npm install chokidar --save-dev

2. 创建watch-report.js：

const chokidar = require('chokidar');
const { execSync } = require('child_process');

// 初始生成报告
execSync('node convert-to-csv.js && node convert-to-html.js');
console.log('初始报告已生成');

// 监听JSON文件变化，自动更新报告
chokidar.watch('ts-errors.json').on('change', () => {
  try {
    execSync('node convert-to-csv.js && node convert-to-html.js');
    console.log('报告已更新');
  } catch (err) {
    console.error('更新报告失败:', err.message);
  }
});

3. 在package.json中添加脚本：

{
  "scripts": {
    "tsc:check": "tsc --noEmit --incremental --json ts-errors.json && node convert-to-csv.js && node convert-to-html.js",
    "tsc:watch": "tsc --noEmit --watch --incremental --json ts-errors.json & node watch-report.js"
  }
}

替代方案：第三方工具（谨慎选择） #

部分第三方工具可直接生成报告，但需注意维护状态：

• tsc-report：基于tsc的JSON输出生成HTML报告，需自行验证兼容性
• typescript-error-reporter：支持多种输出格式，但更新频率较低

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