TypeScript函数解构入参columns、data隐式具有any类型报错如何解决

报错原因 #

TypeScript 无法自动推导columns和data两个入参的类型，触发了TS默认的隐式any类型校验规则。

解决步骤 #

前置依赖确认

• 如果你使用的是 v7 版本的react-table，需要先安装类型依赖：npm i @types/react-table -D
• 如果你使用的是 v8 及以上版本的@tanstack/react-table，库本身内置了类型定义，无需额外安装。

完整代码适配示例

首先定义你的表格行数据的实际业务类型，再给函数参数标注类型、给useTable绑定泛型即可：

import { useTable, type Column } from 'react-table'

// 1. 按你实际的表格行字段定义类型，此处为示例可自行修改
interface Contact {
  id: number
  name: string
  email: string
  phone: string
}

// 2. 给函数入参明确标注类型
function ContactProps({
  columns,
  data
}: {
  columns: Column<Contact>[]
  data: Contact[]
}) {
  // 3. useTable传入Contact泛型绑定行数据类型
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable<Contact>({
      columns,
      data,
    })

  // 后续表格渲染逻辑...
}

临时解决方案（不推荐，会丢失类型校验和提示）

如果只是临时调试不想定义完整类型，可以直接给参数标注为any数组：

function ContactProps({ columns, data }: { columns: any[]; data: any[] }) {
  // 原有逻辑...
}

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