在材质表 React 中定义表列时使用渲染时出现类型错误

Question

您好我正在使用材料表生成表视图，这里我定义了列：

const columns: TableColumn[] = [
    {
        title: 'TYPE',
        field: 'type_of_action',
        highlight: true,
    },
    {
        title: 'DESCRIPTION',
        field: 'description',
    },
    {
        title: 'REFERENCE ID',
        field: 'reference_id'
    },
    {
        title: 'ENVIRONMENT',
        field: 'environment'
    },
    {
        title: 'SEVERITY',
        field: 'severity'
    },
    {
        title: 'PRIORITY',
        field: 'priority'
    },
    {
        title: 'ACTION',
        field: 'action',
        render: (rowData) => (
            console.log(rowData.priority). <---- error
        ),
    }
];

我在最后几列中使用了渲染。但我在 Intellij 中看到一个错误，例如：

TS2339: Property 'priority' does not exist on type '{}'.

实际上我的代码有效，我可以看到 rowData.priority 在我的控制台中打印出来。

我现在这里的 rowData 是 type{} 并且无法识别优先级

为了解决这个问题，我需要在<MaterialTable>标签内定义它，否则无法识别字段？

但是在标签中放这么多行代码看起来很脏。有什么方法可以将列提取到 const 变量同时避免类型错误？

我的一个想法是首先传递 columns 变量，然后使用map 进行操作，但我不知道该怎么做？

Answer 1

当类型不同于string 时，尝试将type 属性添加到您的列定义中：

const columns: TableColumn[] = [
{
        title: 'PRIORITY',
        field: 'priority',
        type: 'number'
    }
]

Posible values 是：'boolean', 'numeric', 'date', 'datetime', 'time', 'currency'。

您可以在此PR 中找到更多详细信息。