我正在建立一个使用AgGrid的react库+企业库的新项目。我已经安装了最新版本的 ag-grid-react、ag-grid-community 和 ag-grid-enterprise (^31.2.0)。不幸的是,尽管它们都是相同的版本(并且我确保删除了
yarn.lock
文件并重新安装),但我仍然遇到奇怪的打字稿冲突。
例如,如果我有一个导出一堆列定义的文件并尝试将它们与 AgGridReact 组件一起使用,则打字稿会将列定义标记为不兼容。但是,如果我将这些相同的定义直接复制并粘贴到组件属性中,那么它就可以工作。
这是我正在尝试创建的 ClientAgGrid 组件:
export interface ClientDataGridParams extends AgGridReactProps<Client> {
}
export const ClientDataGrid = (params?: ClientDataGridParams) => {
const [trigger] = ClientsApi.useLazyReadClientsQuery(); // RTK Query
return (
<AgGridReact<Client>
rowModelType="clientSide"
columnDefs={ClientColumnDefs}
{...params}
/>
)
}
以下是列定义:
export const ClientColumnDefs: ColDef<Client>[] = [
{
headerName: "#",
sortable: false,
filter: false,
floatingFilter: false,
cellRenderer: RowNumberCellRenderer,
width: 75,
pinned: 'left'
},
{
field: 'id',
hide: true,
filter: 'text'
},
{
field: 'origin',
filter: 'text',
},
{
field: 'createdAt',
headerName: 'Created At',
filter: 'date',
cellRenderer: DateTimeCellRenderer
},
{
field: 'updatedAt',
headerName: 'Updated At',
filter: 'date',
cellRenderer: DateTimeCellRenderer
}
];
export default ClientColumnDefs;
我的项目编译时出现以下错误......
TS2322: Type 'ColDef<Client, any>[]' is not assignable to type '(ColDef<Client, any> | ColGroupDef<Client>)[]'.
Type 'ColDef<Client, any>' is not assignable to type 'ColDef<Client, any> | ColGroupDef<Client>'.
Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ColDef<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ColDef<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>'.
Types of property 'valueGetter' are incompatible.
Type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any> | undefined' is not assignable to type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any> | undefined'.
Type 'ValueGetterFunc<Client, any>' is not assignable to type 'string | ValueGetterFunc<Client, any> | undefined'.
Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>'.
Types of parameters 'params' and 'params' are incompatible.
Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ValueGetterParams<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ValueGetterParams<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>'.
Types of property 'node' are incompatible.
Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client> | null' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client> | null'.
Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client>'.
Types of property 'setDataValue' are incompatible.
Type '(colKey: string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/column").Column<any>, newValue: any, eventSource?: string | undefined) => boolean' is not assignable to type '(colKey: string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/column").Column<any>, newValue: any, eventSource?: string | undefined) => boolean'.
Types of parameters 'colKey' and 'colKey' are incompatible.
Type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/column").Column<any>' is not assignable to type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/column").Column<any>'.
Type 'Column<any>' is not assignable to type 'string | Column<any>'.
Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/column").Column<any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/column").Column<any>'.
Types have separate declarations of a private property 'gridOptionsService'.
我去尝试了几个最近的版本。
v31.1.0
也坏了。然而,v31.1.1
有效!
似乎他们需要对其发布进行更好的质量控制。
由于此问题,AgGrid 团队现在正在跟踪此问题:https://github.com/ag-grid/ag-grid/issues/7899
内部问题编号为 AG-11493。您可以在这里监控:https://www.ag-grid.com/ag-grid-pipeline/
他们说修复应该在下一个版本中发布,或者如果太接近截止时间,则可能是之后的版本。