PiT: typed CrudElement need to cast sortOrders and data when using dataProvider

[manolo]

Having this entry-point

public abstract class CrudEndpoint<T, ID> {

    protected abstract CrudService<T, ID> getService();

    public List<T> list(int offset, int limit, List<GridSorter> sortOrder) {
        Page<T> page = getService()
                .list(PagingUtil.offsetLimitTypeScriptSortOrdersToPageable(offset, limit, sortOrder));
        return page.getContent();
    }
...

In the following view params.sortOrders and data need to be casted. TS errors are

Argument of type 'GridSorter[]' is not assignable to parameter of type '(GridSorter | undefined)[]'.
  Type 'import("...").GridSorter' is not assignable to type 'import("/.../artur/helpers/GridSorter").default'.
    Types of property 'direction' are incompatible.
      Type 'GridSorterDirection' is not assignable to type 'string | undefined'.
        Type 'null' is not assignable to type 'string | undefined'.ts(2345)
(property) sortOrders: GridSorter[]

Argument of type '(SamplePerson | undefined)[] | undefined' is not assignable to parameter of type 'SamplePerson[]'.
  Type 'undefined' is not assignable to type 'SamplePerson[]'.ts(2345)
const data: (SamplePerson | undefined)[] | undefined

Probably the first error is not in the component but in @Artur- 's helper

import '@vaadin/vaadin-crud';
import { CrudElement } from '@vaadin/vaadin-crud';
import SamplePerson from 'Frontend/generated/com/example/application/data/entity/SamplePerson';
import * as SamplePersonEndpoint from 'Frontend/generated/SamplePersonEndpoint';
import { html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { View } from '../view';
@customElement('crudgrid-view')
export class CrudgridView extends View {
  @query('#crud')
  private crud!: CrudElement<SamplePerson>;

  render() {
    return html`
          <vaadin-crud id="crud"></vaadin-crud>
    `;
  }


  async firstUpdated() {
    console.log(this.crud);
    this.crud.dataProvider = async (params, callback) => {
      const index = params.page * params.pageSize;
      const size = await SamplePersonEndpoint.count();
      const data = await SamplePersonEndpoint.list(index, params.pageSize, params.sortOrders as any);
      callback(data as any, size);
    };
  }

  async connectedCallback() {
    super.connectedCallback();
    this.classList.add('flex', 'flex-col', 'h-full');
  }
}