有没有熟悉 Antd 可编辑表格的，自定义的数据类型应该怎么修改 Column 定义才能通过 ts 检查？

[steins2628]

如题，自定义的数据结构大概长这样

interface MyLabel {
    key: string;
    name: string;
    color?: string;
}

interface MyData {
    id: React.Key,
    group: number,   
    category: number 
    state: number,  
    keyword: string,
    create_at: number,
    edit_at: number,

    author?: string,
    level?: number,
    labels?: MyLabel[];
}

因为要做可编辑除了默认的类型还会有 render, filter...，现在的 column 类型大概是这样的

  {
    title: string,
    dataIndex: string,
    editable: boolean,
    filters?: undefined,
    filterSearch?: undefined,
    onFilter?: undefined,
    render?: undefined,
    ellipsis?: undefined,
    sorter?: undefined,
  }

然后 ts 检查就会告诉我

... not assignable to type ColumnType<MyData> | ColumnGroupType<MyData>

直接给 column 赋类型 ColumnsType<MyData> 也是不行的，有点迷茫不知道要怎么改了，官网教程也没说

同时 render 的时候，默认的类型应该是 string | number | undefined, 实际上是个枚举，但直接给枚举类型也是报错的，用断言 as number 也是不行的

有没有好兄弟分享下经验的，这种时候应该怎么定义类型？

附上完整的 Column 定义

  const edit_tabel_column = [
    {
        title: 'level',
        dataIndex: 'level',
        editable: true,
    },
    {
        title: 'group',
        dataIndex: 'group',
        editable: true,
        filters: [
          {
            text: "Blacklist",
            value: CleanGroup.Blacklist
          },
          {
            text: "Whitelist",
            value: CleanGroup.Whitelist
          }
        ],
        filterSearch: false,
        onFilter: (value: CleanGroup, record: any) => record.group === value,
        render: (value: CleanGroup) => (
          <SelectCell group={value}/>
        ),
    },
    {
      title: 'category',
      dataIndex: 'category',
      editable: true,
      filters: [
        {
          text: 'Quick Access',
          value: CleanCategory.QuickAccess,
        },
        {
          text: 'Frequent Folder',
          value: CleanCategory.FrequentFolders,
        },
        {
          text: 'Recent File',
          value: CleanCategory.RecentFiles,
        },
      ],
      filterSearch: false,
      onFilter: (value: CleanCategory, record: any) => record.category === value,
      render: (value: CleanCategory) => (
          <SelectCell category={value}/>
        ),
    },
    {
      title: 'state',
      dataIndex: 'state',
      editable: true,
      filters: [
        {
          text: 'enabled',
          value: CleanState.Enabled
        },
        {
          text: 'disabled',
          value: CleanState.Disabled
        }
      ],
      filterSearch: false,
      onFilter: (value: CleanState, record: any) => record.state === value,
      render: (value: CleanState) => (
        <SelectCell badge state={value}/>
      ),
    },
    {
        title: 'keyword',
        dataIndex: 'keyword',
        editable: true,
        ellipsis: {
            showTitle: false,
        },
    },
    {
        title: 'create_at',
        dataIndex: 'create_at',
        ellipsis: {
            showTitle: false,
        },
        editable: false,
        sorter: (a: any, b: any) => a.create_at - b.create_at,
        render: (create_at: number) => (
        <Tooltip title={time.get_date_string_from_timestamp(create_at, "YYYY-MM-DD")} placement='top'>
            {time.get_date_string_from_timestamp(create_at, "YYYY-MM-DD")}
        </Tooltip>
        ),
    },
    {
        title: 'edit_at',
        dataIndex: 'edit_at',
        ellipsis: {
            showTitle: false,
        },
        editable: false,
        sorter: (a: any, b: any) => a.edit_at - b.edit_at,
        render: (edit_at: number) => (
        <Tooltip title={time.get_date_string_from_timestamp(edit_at, "YYYY-MM-DD")}>
            {time.get_date_string_from_timestamp(edit_at, "YYYY-MM-DD")}
        </Tooltip>
        ),
    },
    {
        title: 'operation',
        dataIndex: 'operation',
        render: (_: any, record: MyData) => {
          const editable = isEditing(record);
          return editable ? (
            <span>
              <Typography.Link onClick={() => saveEditingRow(record.id)} style={{ marginRight: 8 }}>
              {'save'}
              </Typography.Link>
              <Popconfirm title={'sure to cancel?')} onConfirm={cancelEditTableRow}>
                <a>{'cancel'}</a>
              </Popconfirm>
            </span>
          ) : (
            <div>
              <Typography.Link disabled={editingKey !== ''} onClick={() => editTableRow(record)}>
                {'edit'}
              </Typography.Link>
              <Divider type="vertical" />
              <Typography.Link disabled={editingKey !== ''} onClick={() => removeRow(record)}>
              {'delete'}
              </Typography.Link>              
            </div>
          );
        },
    }
  ]

  const mergedEditColumns = edit_tabel_column.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: MyData) => ({
        record,
        inputType: col.dataIndex,
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  })