ColDef is unable to render in Angular

I am trying to show data in ag grid on angular. However my [columnDefs] has some problems.

<ag-grid-angular
   class = "ag-theme-alpine"
   [rowData]=rowData
   [rowSelection]="'multiple'"
   [columnDefs]=columnDefs>
</ag-grid-angular>

This is the error message, Type 'ColDef[]' is not assignable to type '(ColDef | ColGroupDef)[]'.ngtsc(2322) database.component.ts(13, 3): Error occurs in the template of component DatabaseComponent.

columnDefs: ColDef[] = [
  { field: 'make' },
  { field: 'model' },
  { field: 'price' }
];

I have included my columnDefs in database.component.ts FYI.

Solution

Ugh, that's just a linting 'error' rather than anything specifically wrong.

JS (TS) doesn't do method overloading like, for example, C# can, so you end up with methods with parameters of various different types.

I try to avoid this to make my methods clearer, personally, at the loss of minor flexibility.

AG don't do this, however.

So their col defs are either a list of ColDef objects, OR a single ColGroupDef object (side note: I really hate it when there's overlap between objects and arrays) which helps to confuse matters.

The quick and dirty solution is to just tell it that it's any type and make it go away rather than be specific columnDefs: any = [...].

Alternatively, you can define columnDefs properly as columnDefs: ColDef[] | ColGroupDef = [...]. That should shut it up.