React TypeScript项目中如何正确调用外部SheetJS库的对象？

问题根源 #

通过<script>标签引入的SheetJS会挂载到全局window对象，但TypeScript默认无法识别未声明的全局变量，因此会抛出“Cannot find name”类错误。另外需要注意：SheetJS中不存在全局的WorkBook构造函数，正确创建工作簿的方式是使用XLSX.utils.book_new()。

解决步骤 #

1. 声明全局类型 #

在项目src目录下创建类型声明文件（比如src/types/sheetjs.d.ts），添加以下内容告知TypeScript全局存在XLSX对象：

declare global {
  interface Window {
    XLSX: any;
  }
}

// 可选：补充更精确的类型定义以获得更好的提示
declare module 'xlsx' {
  export interface WorkBook {
    SheetNames: string[];
    Sheets: { [key: string]: any };
  }
}

export {};

2. 在组件中正确访问SheetJS #

在组件内通过window.XLSX访问全局SheetJS对象，示例代码如下：

import React, { useEffect } from 'react';

const ExcelProcessor = () => {
  useEffect(() => {
    // 访问SheetJS工具集
    const xlsxUtils = window.XLSX.utils;
    
    // 创建新工作簿（正确写法）
    const wb = xlsxUtils.book_new();
    
    // 示例：构建工作表并添加到工作簿
    const worksheet = xlsxUtils.aoa_to_sheet([
      ['姓名', '年龄'],
      ['张三', 25],
      ['李四', 30]
    ]);
    xlsxUtils.book_append_sheet(wb, worksheet, '人员信息');
    
    // 导出Excel文件
    window.XLSX.writeFile(wb, '人员列表.xlsx');
  }, []);

  return <div>Excel处理组件</div>;
};

export default ExcelProcessor;

额外建议 #

如果追求更完善的类型提示和开发体验，推荐直接通过npm安装官方包：npm install xlsx，之后在组件中通过import * as XLSX from 'xlsx'引入，无需全局挂载，TypeScript会自动识别所有类型定义。

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