Challenges 7 exercises

Make An Infinite Scroll Function Generic with Correct Type Inference

Here we have amakeInfiniteScroll function that is similar to a hook in React or another framework:

const makeInfiniteScroll = (params: unknown) => {
const data = params.initialRows || []
const scroll = async () => {
const rows = await params.fetchRows()

Loading exercise


0:00 In this exercise, we're taking this makeInfiniteScroll function, and it's completely untyped right now. We're trying to capture some reusable stuff inside a single function. You can think of this makeInfiniteScroll as a hook in React or a similar thing in another framework.

0:20 We have this table here, makeInfiniteScroll. We're expecting this key to be ID and fetchRows, we're returning promise.resolve ID1 named John. Now, we're expecting that if we fetchRows here and the promise.resolve doesn't include the key, then it's going to error at us. This key has to be a key of the thing that we're fetching from fetchRows.

0:48 It should also allow you to pass in initialRows. These initialRows should be the same type as this fetchRows here. It should also infer the rows when the rows get returned. Currently, the rows are any. It lets you pass any key inside here, and currently, there's no inference going on whatsoever.

1:08 Your job is to try to type this function to make it generic and make sure that all of the pieces get inferred properly. Good luck.