使用TypeScript渲染自定义Ant Design Table时遇TS2322错误求助

错误信息 #

semantic error TS2322: Type '{ columns: never[]; }' is not assignable to type
'IntrinsicAttributes & TableProps'. Property 'columns' does not exist on
type 'IntrinsicAttributes & TableProps'.

semantic error TS2322: Type '{ dataSource: never[]; columns: never[]; }' is not
assignable to type 'IntrinsicAttributes & TableProps'. Property 'dataSource'
does not exist on type 'IntrinsicAttributes & TableProps'.

组件代码（问题复现） #

const DsrTable: FC = (): JSX.Element => {
    return (
        <div>
            <h1>Table</h1>
            <Table
                dataSource={[]}
                columns={[]}
            />
        </div>
    )
}

相关类型定义 #

Table 组件声明 #

declare const UTable: (props: TableProps<any>) => JSX.Element;

export interface TableProps<T> extends AntdTableProps<T> {
    mediaQueryLimit?: number;
}

AntdTableProps 定义 #

export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'transformColumns' | 'internalHooks' | 'internalRefs' | 'data' | 'columns' | 'scroll' | 'emptyText'> {
    dropdownPrefixCls?: string;
    dataSource?: RcTableProps<RecordType>['data'];
    columns?: ColumnsType<RecordType>;
    pagination?: false | TablePaginationConfig;
    loading?: boolean | SpinProps;
    size?: SizeType;
    bordered?: boolean;
    locale?: TableLocale;
    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<RecordType> | SorterResult<RecordType>[], extra: TableCurrentDataSource<RecordType>) => void;
    rowSelection?: TableRowSelection<RecordType>;
    getPopupContainer?: GetPopupContainer;
    scroll?: RcTableProps<RecordType>['scroll'] & {
        scrollToFirstRowOnChange?: boolean;
    };
    sortDirections?: SortOrder[];
    showSorterTooltip?: boolean | TooltipProps;
}

注：无法修改任何Table相关属性及代码，仅能自定义DsrTable组件。

解决方法 #

1. 修正组件命名匹配 #

从类型声明可知自定义Table组件的实际名称是UTable，若代码中误用了<Table>，需修正导入或使用的组件名：

// 示例：导入时重命名为Table，或直接使用UTable
import { UTable as Table } from '你的组件路径';

const DsrTable: FC = (): JSX.Element => {
    return (
        <div>
            <h1>Table</h1>
            <Table
                dataSource={[]}
                columns={[]}
            />
        </div>
    )
}

2. 显式指定泛型类型 #

TypeScript会将空数组默认推断为never[]，显式指定泛型可消除类型不匹配：

// 定义实际业务类型，若无业务类型可使用通用类型
type TableRecord = Record<string, unknown>;

const DsrTable: FC = (): JSX.Element => {
    return (
        <div>
            <h1>Table</h1>
            <Table<TableRecord>
                dataSource={[] as TableRecord[]}
                columns={[] as ColumnsType<TableRecord>}
            />
        </div>
    )
}

3. 类型断言绕过检查（确认安全时使用） #

若上述方法无效，且确认属性合法，可通过类型断言强制通过检查：

const DsrTable: FC = (): JSX.Element => {
    const tableProps = {
        dataSource: [],
        columns: []
    } as unknown as TableProps<any>;
    
    return (
        <div>
            <h1>Table</h1>
            <Table {...tableProps} />
        </div>
    )
}

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