Node.js TypeScript环境下google-charts-node图表生成解决方案求助

1. 补全类型依赖 #

google-charts-node本身未提供TypeScript类型定义，需要手动处理：

• 安装核心包及辅助类型：

  npm install google-charts-node
  npm install -D @types/google-visualization
  

• 若辅助类型无法覆盖需求，在项目根目录创建自定义类型声明文件src/types/google-charts-node.d.ts，内容如下：

  declare module 'google-charts-node' {
    export function render(options: {
      chartType: string;
      data: any[][];
      options?: Record<string, unknown>;
      width?: number;
      height?: number;
    }): Promise<string>;
  }
  

• 确保tsconfig.json的include字段包含该类型文件：

  {
    "include": ["src/**/*", "src/types/**/*"]
  }
  

2. 适配TypeScript代码示例 #

将原JavaScript代码改造为TS兼容版本，以下是柱状图的完整实现：

import { render } from 'google-charts-node';
import fs from 'fs/promises';

async function generateBarChart() {
  try {
    // 生成base64格式的图表图片
    const chartBase64 = await render({
      chartType: 'BarChart',
      data: [
        ['年份', '销售额', '支出', '利润'],
        ['2021', 1200, 500, 700],
        ['2022', 1500, 600, 900],
        ['2023', 1800, 750, 1050]
      ],
      options: {
        title: '年度经营数据',
        width: 800,
        height: 600,
        bar: { groupWidth: '80%' },
        legend: { position: 'bottom' }
      }
    });

    // 将base64图片保存为本地文件
    await fs.writeFile('bar-chart.png', chartBase64, 'base64');
    console.log('图表已生成：bar-chart.png');
  } catch (err) {
    console.error('生成图表失败：', err);
  }
}

generateBarChart();

3. 检查TypeScript编译配置 #

确保tsconfig.json的关键配置符合要求：

{
  "compilerOptions": {
    "target": "ES2017", // 支持async/await语法
    "module": "CommonJS", // 适配Node.js模块系统
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

4. 常见问题排查 #

• 类型报错：检查自定义类型声明是否匹配render方法的实际参数，若有新增配置项，同步更新类型定义。
• 运行时window未定义：不要直接调用google.visualization的API，所有图表配置都通过render方法传递，google-charts-node会在无头浏览器环境中处理。
• 编译失败：确保Node.js版本≥14.x，避免语法兼容性问题。

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