How can I use Infinite Scroll with Typescript?

I’ve been banging my head against a wall all day trying to get a simple Infinite Scroll example to work and all I can figure is that Typescript is preventing it from happening.

I’m following this doc, Infinite Scroller | ion-infinite-scroll Action Component … I’ve even completely replaced my code with the code in this doc, however it will not run because it crashes for the lines in loadData() saying that EventTarget does not have the properties “disabled” or “complete()”

If I take out those lines, everything runs fine but it will only send one request via the InfiniteScroll trigger. I’m assuming I need to typecast it to the correct type of event? But I cannot for the life of me find any documentation or github issue that explains how to work around this.

Any help would be greatly appreciated.

It seems like for some reason Vue’s events either have some extra properties or are missing some from standard Event interfaces…I just cast them to any or if passed to a function, set the corresponding parameter to any when I encounter that problem, since I know that those properties do exist, and probably won’t cause problems.

This isn’t an ideal solution, unfortunately, but it’s quick and easy and shouldn’t really cause any problems, as far as I can see.

Relevant code:

//               👇👇👇👇 👈 set to any to get rid of errors  
const loadData = (ev: any) => {
  setTimeout(() => {
    pushData();
    console.log("Loaded data");
    ev.target.complete();
    // App logic to determine if all data is loaded
    // and disable the infinite scroll
    if (items.value.length == 1000) {
      ev.target.disabled = true;
    }
  }, 500);
};

Sample repo with full code

Not sure I got your question correctly, if not, it would be helpful if could post a repo/sandbox link with your code

Cheers

The main issue here is that the complete method is a method on ion-infinite-scroll, which is of type HTMLIonInfiniteScrollElement, but event.target is of type EventTarget. This is normally fine, but when you add custom methods and properties this can cause issues.

We have an open issue that proposes new interfaces to improve the target typing: feat: extend CustomEvent

We plan on having this in Ionic Framework v6.

You can typecast event.target as type HTMLIonInfiniteScrollElement as a temporary workaround. In the future, you will be able to set the event type as InfiniteScrollCustomEvent which will have the target typings built in.

2 Likes

Thanks a ton! That cleared it up. Tried to find what class to cast it to but could not find it to save my life haha