[typescript] Avoid `api: any` or `colRef: any` due to circular import

[flaviendelangle]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Currently, when importing the GridApi or GridColDef object would cause a circular import, we replace it with an any
For instance

/**
 * The column of the current header component.
 */
colDef: any;
/**
 * API ref that let you manipulate the grid.
 */
api: any;

We can use dynamic import to avoid circular dependency and type correctly those properties

/**
 * The column of the current header component.
 */
colDef: import('../colDef/gridColDef').GridColDef;
/**
 * API ref that let you manipulate the grid.
 */
api: import('../api/gridApiRef').GridApiRef;

Motivation 🔦

Typing correctly will help us catching bugs and inconsistencies.

For GridColumnHeaderParams we have calls that gives the apiRef and other that gives apiRef.current

const getColumnHeaderParams = React.useCallback(
  (field: string): GridColumnHeaderParams => ({
    field,
    colDef: apiRef.current.getColumn(field),
    api: apiRef!.current,
  }),
  [apiRef],
);

export type GridColumnHeaderClassFn = (params: GridColumnHeaderParams) => string;

const headerClassName = isFunction(column.headerClassName)
  ? column.headerClassName({ field: column.field, colDef: column, api: apiRef })
  : column.headerClassName;

It's the only one I found with inconsistencies inside a single type.
I'm opening a second issue to propose to unify the behaviors across the various calls so that the only breaking change on this one is GridColumnHeaderParams

Furthermore, having the autocomplete is a big help for large objects like api or colRef