使用npm run build构建Ag-Grid时出现Type Error问题求助

你的代码存在两个核心TypeScript类型错误，以下是针对性修复方案：

错误原因及修复步骤 #

1. 修复Grid Ref类型不匹配 #

当前gridRef未指定类型，TypeScript推断为MutableRefObject<undefined>，但AgGridReact组件要求ref类型为AgGridReact | null。

修复代码：

// 导入AgGridReact类型
import { AgGridReact } from 'ag-grid-react';

// 初始化ref时指定正确类型
const gridRef = useRef<AgGridReact>(null);

2. 修复行数据与列定义的类型不匹配 #

由于rowData初始化为空数组且未指定类型，TypeScript推断为never[]，导致列定义无法匹配预期的ColDef类型。需要定义行数据的接口，并为相关变量指定类型。

修复代码：

// 导入ColDef和DefaultColDef类型
import { ColDef, DefaultColDef } from 'ag-grid-community';

// 定义行数据的接口
interface StaffRow {
  first_name: string;
  last_name: string;
  job_title: string;
  office: string;
  email: string;
  phone: string;
}

// 为rowData指定类型
const [rowData, setRowData] = useState<StaffRow[]>([]);

// 为columnDefs指定类型
const [columnDefs] = useState<ColDef<StaffRow>[]>([
  { headerName: 'First Name', field: 'first_name' },
  { headerName: 'Last Name', field: 'last_name' },
  { headerName: 'Job Title', field: 'job_title' },
  { field: 'office' },
  { field: 'email' },
  { field: 'phone' },
]);

// 为defaultColDef指定类型
const defaultColDef: DefaultColDef<StaffRow> = {
  resizable: true,
  sortable: true,
};

3. 完整修复后的代码 #

'use client'
import { useState, useEffect, useCallback, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { AgGridReact } from 'ag-grid-react';
import { ColDef, DefaultColDef } from 'ag-grid-community';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

interface StaffRow {
  first_name: string;
  last_name: string;
  job_title: string;
  office: string;
  email: string;
  phone: string;
}

const Home = () => {
  const gridRef = useRef<AgGridReact>(null);
  const router = useRouter();
  const [rowData, setRowData] = useState<StaffRow[]>([]);

  useEffect(() => {
    fetch('../api/staff')
      .then((response) => response.json())
      .then((data) => setRowData(data.rows));
  }, []);

  const onSelectionChanged = useCallback(() => {
  }, []);

  const defaultColDef: DefaultColDef<StaffRow> = {
    resizable: true,
    sortable: true,
  };

  const [columnDefs] = useState<ColDef<StaffRow>[]>([
    { headerName: 'First Name', field: 'first_name' },
    { headerName: 'Last Name', field: 'last_name' },
    { headerName: 'Job Title', field: 'job_title' },
    { field: 'office' },
    { field: 'email' },
    { field: 'phone' },
  ]);

  return (
    <div className="ag-theme-alpine" style={{ height: '600px' }}>
      <AgGridReact
        id="staff_grid"
        ref={gridRef}
        rowData={rowData}
        defaultColDef={defaultColDef}
        columnDefs={columnDefs}
        onSelectionChanged={onSelectionChanged}
        rowSelection={'single'}
        style={{ height: '100%', width: '100%' }}
      ></AgGridReact>
    </div>
  );
};

export default Home;

关键说明 #

• 原示例使用JavaScript，而你的文件是TypeScript（.tsx），因此必须明确指定类型以满足TypeScript的类型检查。
• 定义行数据接口后，TypeScript会自动校验列定义的field是否与行数据的属性匹配，避免拼写错误。

内容的提问来源于stack exchange，提问作者tony.sharpts