如何正确定义 antd 可编辑表格列的类型

huangapple
go评论90阅读模式
英文:

How to properly define antd editable table columns type

问题

Here's the translation of your code portion:

  1. 我正在使用Antd和TypeScript构建一个可编辑的表格，遵循指南 [antd: table edit row](https://ant.design/components/table#components-table-demo-edit-row)。
  3. 目前，它作为一个可编辑表格工作良好，无论是编辑还是显示数据。
  5. 然而，由于我在使用TypeScript，某些列的类型出现了错误。
  7. 这是我的Item定义和列的值。
  9. ```typescript
  10. interface CleanFilterItemLabel {
  11.     key: string;
  12.     name: string;
  13.     color?: string;
  14. }
  16. interface CleanFilterItem {
  17.     id: React.Key,
  18.     state: string,
  19.     keyword: string,
  20.     create_at: number,
  21.     edit_at: number,
  23.     author?: string,
  24.     level?: number,
  25.     group?: number,
  26.     labels?: CleanFilterItemLabel[];
  27. }
  29. const edit_tabel_column = [
  30.     {
  31.         title: t("editPage.level"),
  32.         dataIndex: 'level',
  33.         editable: true,
  34.     },
  35.     // 其他列...
  36. ]
  38. const mergedEditColumns = edit_tabel_column.map((col) => {
  39.     if (!col.editable) {
  40.         return col;
  41.     }
  42.     return {
  43.         ...col,
  44.         onCell: (record: CleanFilterItem) => ({
  45.             record,
  46.             inputType: col.dataIndex,
  47.             dataIndex: col.dataIndex,
  48.             title: col.title,
  49.             editing: isEditing(record),
  50.         }),
  51.     };
  52. })
  54. <Form form={form} component={false}>
  55.     <Table 
  56.         components={{
  57.             body: {
  58.                 cell: EditableCell
  59.             }
  60.         }}
  61.         rowSelection={rowSelection} 
  62.         columns={mergedEditColumns} // 这里出现类型错误
  63.         className={style.customTable}
  64.         dataSource={tableData} 
  65.         pagination={{ pageSize: 5 }}
  66.         scroll={{ y: 360 }}
  67.         rowKey={"id"}
  68.     />
  69. </Form>

这导致了以下错误：

  1. 类型 '{ title: string; dataIndex: string; editable: boolean; filters?: undefined; filterSearch?: undefined; onFilter?: undefined; render?: undefined; ellipsis?: undefined; sorter?: undefined; } | { title: string; ... 7 more ...; sorter?: undefined; } | ... 6 more ... | { ...; }[]' 不能分配给类型 'ColumnType<CleanFilterItem> | ColumnGroupType<CleanFilterItem>[]'。
  2.   类型 '{ title: string; dataIndex: string; editable: boolean; filters?: undefined; filterSearch?: undefined; onFilter?: undefined; render?: undefined; ellipsis?: undefined; sorter?: undefined; } | { title: string; ... 7 more ...; sorter?: undefined; } | ... 6 more ... | { ...; }' 不能分配给类型 'ColumnType<CleanFilterItem> | ColumnGroupType<CleanFilterItem>'。
  3.     类型 '{ title: string; dataIndex: string; editable: boolean; filters: { text: string; value: string; }[]; filterSearch: boolean; onFilter: (value: string, record: any) => boolean; render: (state: string) => JSX.Element; ellipsis?: undefined; sorter?: undefined; }' 不能分配给类型 'ColumnType<CleanFilterItem> | ColumnGroupType<CleanFilterItem>'。
  4.       类型 '{ title: string; dataIndex: string; editable: boolean; filters: { text: string; value: string; }[]; filterSearch: boolean; onFilter: (value: string, record: any) => boolean; render: (state: string) => JSX.Element; ellipsis?: undefined; sorter?: undefined; }' 不能分配给类型 'ColumnType<CleanFilterItem>'。
  5.         属性 'onFilter' 的类型不兼容。
  6.           类型 '(value: string, record: any) => boolean' 不能分配给类型 '(value: string | number | boolean, record: CleanFilterItem) => boolean'。
  7.             参数 'value' 和 'value' 的类型不兼容。
  8.               类型 'string | number | boolean' 不能分配给类型 'string'。ts(2322)
  9. InternalTable.d.ts(14, 5): 预期类型位于此处 'columns' 属性声明在类型 'IntrinsicAttributes & TableProps<CleanFilterItem> & { children?: ReactNode; } & { ref?: Ref<HTMLDivElement> | undefined; }'

我已经检查了这个问题 columns type error when using a custom sorter function on Ant Design table，并尝试将以下定义添加到我的列，但仍然失败：

  1. const edit_tabel_column: (ColumnsType<CleanFilterItem> & {editable?: boolean}[]) = []

我不擅长这种复杂的类型定义，那么我应该如何给它一个正确的定义？

  2. <details>
  3. <summary>英文:</summary>
  5. I&#39;m working on build an editable table using antd in typescript, following the guide [antd: table edit row](https://ant.design/components/table#components-table-demo-edit-row).
  7. For now it works fine as an editable table, whether editing or displaying data.
  9. However, since i&#39;m using typescript, there&#39;re some errors with column type.
  11. Here&#39;s my Item definition and column value.
  13. ```typescript
  14. interface CleanFilterItemLabel {
  15.     key: string;
  16.     name: string;
  17.     color?: string;
  18. }
  20. interface CleanFilterItem {
  21.     id: React.Key,
  22.     state: string,
  23.     keyword: string,
  24.     create_at: number,
  25.     edit_at: number,
  27.     author?: string,
  28.     level?: number,
  29.     group?: number,
  30.     labels?: CleanFilterItemLabel[];
  31. }
  33.   const edit_tabel_column = [
  34.     {
  35.         title: t(&quot;editPage.level&quot;),
  36.         dataIndex: &#39;level&#39;,
  37.         editable: true,
  38.     },
  39.     // {
  40.     //     title: t(&quot;editPage.labels&quot;),
  41.     //     dataIndex: &#39;labels&#39;,
  42.     //     editable: true,
  43.     //     render: (labels: any) =&gt; (
  44.     //       &lt;&gt;
  45.     //         {labels.map((label: any) =&gt; {
  46.     //           return (
  47.     //             &lt;Tag key={label.key}&gt;
  48.     //               {label.name}
  49.     //             &lt;/Tag&gt;
  50.     //           )
  51.     //         })}
  52.     //       &lt;/&gt;
  53.     //     ),
  54.     // },
  55.     {
  56.         title: t(&quot;editPage.group&quot;),
  57.         dataIndex: &#39;group&#39;,
  58.         editable: true,
  59.     },
  60.     {
  61.       title: t(&quot;editPage.state&quot;),
  62.       dataIndex: &#39;state&#39;,
  63.       editable: true,
  64.       filters: [
  65.         {
  66.           text: t(&quot;editPage.enabled&quot;),
  67.           value: &#39;open&#39;,
  68.         },
  69.         {
  70.           text: t(&quot;editPage.disabled&quot;),
  71.           value: &#39;closed&#39;
  72.         }
  73.       ],
  74.       filterSearch: false,
  75.       onFilter: (value: string, record: any) =&gt; record.state === value,
  76.       render: (state: string) =&gt; (
  77.         &lt;&gt;
  78.           {state === &#39;open&#39; ? &lt;Badge status=&quot;error&quot; text={t(&quot;editPage.disabled&quot;)}/&gt; : &lt;Badge status=&quot;success&quot; text={t(&quot;editPage.enabled&quot;)}/&gt;}
  79.         &lt;/&gt;
  80.         ),
  81.     },
  82.     {
  83.         title: t(&quot;editPage.keyword&quot;),
  84.         dataIndex: &#39;keyword&#39;,
  85.         editable: true,
  86.         ellipsis: {
  87.             showTitle: false,
  88.         },
  89.         ...getColumnSearchProps(&#39;keyword&#39;),
  90.     },
  91.     {
  92.         title: t(&quot;editPage.createAt&quot;),
  93.         dataIndex: &#39;create_at&#39;,
  94.         ellipsis: {
  95.             showTitle: false,
  96.         },
  97.         editable: false,
  98.         sorter: (a: any, b: any) =&gt; a.create_at - b.create_at,
  99.         render: (create_at: number) =&gt; (
  100.         &lt;Tooltip title={time.get_date_string_from_timestamp(create_at, &quot;YYYY-MM-DD&quot;)} placement=&#39;top&#39;&gt;
  101.             {time.get_date_string_from_timestamp(create_at, &quot;YYYY-MM-DD&quot;)}
  102.         &lt;/Tooltip&gt;
  103.         ),
  104.     },
  105.     {
  106.         title: t(&quot;editPage.editAt&quot;),
  107.         dataIndex: &#39;edit_at&#39;,
  108.         ellipsis: {
  109.             showTitle: false,
  110.         },
  111.         editable: false,
  112.         sorter: (a: any, b: any) =&gt; a.edit_at - b.edit_at,
  113.         render: (edit_at: number) =&gt; (
  114.         &lt;Tooltip title={time.get_date_string_from_timestamp(edit_at, &quot;YYYY-MM-DD&quot;)}&gt;
  115.             {time.get_date_string_from_timestamp(edit_at, &quot;YYYY-MM-DD&quot;)}
  116.         &lt;/Tooltip&gt;
  117.         ),
  118.     },
  119.     {
  120.         title: t(&quot;editPage.operation&quot;),
  121.         dataIndex: &#39;operation&#39;,
  122.         render: (_: any, record: CleanFilterItem) =&gt; {
  123.           const editable = isEditing(record);
  124.           return editable ? (
  125.             &lt;span&gt;
  126.               &lt;Typography.Link onClick={() =&gt; saveEditingRow(record.id)} style={{ marginRight: 8 }}&gt;
  127.               {t(&#39;editPage.save&#39;)}
  128.               &lt;/Typography.Link&gt;
  129.               &lt;Popconfirm title={t(&quot;editPage.sureToCancel&quot;)} onConfirm={cancelEditTableRow}&gt;
  130.                 &lt;a&gt;{t(&#39;editPage.cancel&#39;)}&lt;/a&gt;
  131.               &lt;/Popconfirm&gt;
  132.             &lt;/span&gt;
  133.           ) : (
  134.             &lt;div&gt;
  135.               &lt;Typography.Link disabled={editingKey !== &#39;&#39;} onClick={() =&gt; editTableRow(record)}&gt;
  136.                 {t(&#39;editPage.edit&#39;)}
  137.               &lt;/Typography.Link&gt;
  138.               &lt;Divider type=&quot;vertical&quot; /&gt;
  139.               &lt;Typography.Link disabled={editingKey !== &#39;&#39;} onClick={() =&gt; removeRow(record)}&gt;
  140.               {t(&#39;editPage.delete&#39;)}
  141.               &lt;/Typography.Link&gt;              
  142.             &lt;/div&gt;
  143.           );
  144.         },
  145.     }
  146.   ]
  148.   const mergedEditColumns = edit_tabel_column.map((col) =&gt; {
  149.     if (!col.editable) {
  150.       return col;
  151.     }
  152.     return {
  153.       ...col,
  154.       onCell: (record: CleanFilterItem) =&gt; ({
  155.         record,
  156.         inputType: col.dataIndex,
  157.         dataIndex: col.dataIndex,
  158.         title: col.title,
  159.         editing: isEditing(record),
  160.       }),
  161.     };
  162.   })
  164.   &lt;Form form={form} component={false}&gt;
  165.     &lt;Table 
  166.         components={{
  167.           body: {
  168.             cell: EditableCell
  169.           }
  170.         }}
  171.         rowSelection={rowSelection} 
  172.         columns={mergedEditColumns} // here comes types error
  173.         className={style.customTable}
  174.         dataSource={tableData} 
  175.         pagination={{ pageSize: 5 }}
  176.         scroll={{ y: 360 }}
  177.         rowKey={&quot;id&quot;}
  178.     /&gt;
  179.   &lt;/Form&gt;

and it leads to the following errors

  1. Type &#39;({ title: string; dataIndex: string; editable: boolean; filters?: undefined; filterSearch?: undefined; onFilter?: undefined; render?: undefined; ellipsis?: undefined; sorter?: undefined; } | { title: string; ... 7 more ...; sorter?: undefined; } | ... 6 more ... | { ...; })[]&#39; is not assignable to type &#39;(ColumnType&lt;CleanFilterItem&gt; | ColumnGroupType&lt;CleanFilterItem&gt;)[]&#39;.
  2.   Type &#39;{ title: string; dataIndex: string; editable: boolean; filters?: undefined; filterSearch?: undefined; onFilter?: undefined; render?: undefined; ellipsis?: undefined; sorter?: undefined; } | { title: string; ... 7 more ...; sorter?: undefined; } | ... 6 more ... | { ...; }&#39; is not assignable to type &#39;ColumnType&lt;CleanFilterItem&gt; | ColumnGroupType&lt;CleanFilterItem&gt;&#39;.
  3.     Type &#39;{ title: string; dataIndex: string; editable: boolean; filters: { text: string; value: string; }[]; filterSearch: boolean; onFilter: (value: string, record: any) =&gt; boolean; render: (state: string) =&gt; JSX.Element; ellipsis?: undefined; sorter?: undefined; }&#39; is not assignable to type &#39;ColumnType&lt;CleanFilterItem&gt; | ColumnGroupType&lt;CleanFilterItem&gt;&#39;.
  4.       Type &#39;{ title: string; dataIndex: string; editable: boolean; filters: { text: string; value: string; }[]; filterSearch: boolean; onFilter: (value: string, record: any) =&gt; boolean; render: (state: string) =&gt; JSX.Element; ellipsis?: undefined; sorter?: undefined; }&#39; is not assignable to type &#39;ColumnType&lt;CleanFilterItem&gt;&#39;.
  5.         Types of property &#39;onFilter&#39; are incompatible.
  6.           Type &#39;(value: string, record: any) =&gt; boolean&#39; is not assignable to type &#39;(value: string | number | boolean, record: CleanFilterItem) =&gt; boolean&#39;.
  7.             Types of parameters &#39;value&#39; and &#39;value&#39; are incompatible.
  8.               Type &#39;string | number | boolean&#39; is not assignable to type &#39;string&#39;.
  9.                 Type &#39;number&#39; is not assignable to type &#39;string&#39;.ts(2322)
  10. InternalTable.d.ts(14, 5): The expected type comes from property &#39;columns&#39; which is declared here on type &#39;IntrinsicAttributes &amp; TableProps&lt;CleanFilterItem&gt; &amp; { children?: ReactNode; } &amp; { ref?: Ref&lt;HTMLDivElement&gt; | undefined; }&#39;

I've checked this question columns type error when using a custom sorter function on Ant Design table and try add the following definition to my column, but it still fails

  1. const edit_tabel_column: (ColumnsType&lt;CleanFilterItem&gt; &amp; {editable?: boolean}[]) = []

I'm not good at such a complex type definiation, so how should i give it a proper definition?

答案1

得分: 0

问题在于onFilter列的类型定义为value: string | number | boolean, record: Item

如果我们定义自己的onFilter类型，定义如下：
value: number, record: Item

它会抛出错误，称value: number与value: string | number | boolean不兼容。

解决办法是让它们具有相同的类型定义，即string | number | boolean。

这是我的复制链接一旦可编辑表格列具有onFilter属性，TypeScript声称mergedColumns与columns的类型不兼容

英文:

The problem is the column onFilter type has a type definition
value: string | number | boolean, record: Item

If we define our own onFilter type with definition like
value: number, record: Item

It will throw errors, claim tha value: number is not compatiable with value: string | number | boolean.

The solution is to let them have the same type definition as string | number | boolean.

And here's my reproduction link Once on editable table columns has onFilter property, typescript claims that mergedColumns is not assignable type with columns

huangapple
  • 本文由 发表于 2023年4月19日 21:53:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76055369.html
  • antd
  • types
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定