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

```typescript
const makeInfiniteScroll = (params: unknown) => {
  const data = params.initialRows || []

  const scroll = async () => {
    const rows = await params.fetchRows()
    data.push(...rows)
  }

  return {
    scroll,
    getRows: () => data,
  }
}
```

In our tests is a `table` constant that calls `makeInfiniteScroll` and passes in an object with a `key` of `"id"` as well as a `fetchRows` function.

The `fetchRows` function returns a `Promise.resolve` with an array containing a single object with an `id` of `1` and a `name` of `"John"`:

```typescript
it("Should fetch more data when scrolling", async () => {
  const table = makeInfiniteScroll({
    key: "id",
    fetchRows: () => Promise.resolve([{ id: 1, name: "John" }]),
  })

  await table.scroll()

  await table.scroll()

  expect(table.getRows()).toEqual([
    { id: 1, name: "John" },
    { id: 1, name: "John" },
  ])
})
```

If `fetchRows` does not include a property that was set by `key`, an error will occur. For example, if `fetchRows` returned `{ name: "John" }`, we would get an error.

## Challenge

Your challenge is to make `makeInfiniteScroll` generic, and to update it to also accept an `initialRows` property that is the same type as the `fetchRows`.

This will allow for the inference of `rows` as seen in the test:

```typescript
it("Should allow you to pass initialRows", () => {
  const { getRows } = makeInfiniteScroll({
    key: "id",
    initialRows: [
      {
        id: 1,
        name: "John",
      },
    ],
    fetchRows: () => Promise.resolve([]),
  })

  const rows = getRows()

  expect(rows).toEqual([
    {
      id: 1,
      name: "John",
    },
  ])

  type tests = [Expect<Equal<typeof rows, Array<{ id: number; name: string }>>>]
})
```

Refactor a function to handle generic data, enforce property existence, and ensure correct type inference with initial data.

The first thing we need to add is a type argument for `makeInfiniteScroll`.

We'll start by scaffolding a type called `MakeInfiniteScrollParams` that will be an object containing `initialRows`, and `fetchRows`.

For now we'll set `initialRows` to be an array of `unknown` and `fetchRows` to be a function that returns a `Promise` of `unknown`:

```typescript
type MakeInfiniteScrollParams = {
  initialRows: unknown[]
  fetchRows: () => Promise<unknown>
}
```

Next, we'll set the `params` argument to be of type `MakeInfiniteScrollParams`:

```typescript
const makeInfiniteScroll = (params: MakeInfiniteScrollParams) => {
  const data = params.initialRows || []

  const scroll = async () => {
    const rows = await params.fetchRows()
    data.push(...rows)
  }

  return {
    scroll,
    getRows: () => data,
  }
}
```

With these changes in place, the function shows an error for `data.push`:

```text
Type 'unknown' must have a '[Symbol.iterator]()' method that returns an iterator. 
```

To fix this we can set `fetchRows` to be a function that returns a `Promise` returning an array of `unknown`:

```typescript
type MakeInfiniteScrollParams = {
  initialRows: unknown[]
  fetchRows: () => Promise<unknown[]>
}
```

With that error fixed, there is now an error in the test with `key` since it doesn't exist on the `param`:

```typescript
it("Should fetch more data when scrolling", async () => {
  const table = makeInfiniteScroll({
    key: "id",
    fetchRows: () => Promise.resolve([{ id: 1, name: "John" }]),
  })

  await table.scroll()

  await table.scroll()

  expect(table.getRows()).toEqual([
    { id: 1, name: "John" },
    { id: 1, name: "John" },
  ])
})
```

To fix it for the time being, we'll add it to our type as as a string:

```typescript
type MakeInfiniteScrollParams = {
  key: string
  initialRows: unknown[]
  fetchRows: () => Promise<unknown[]>
}
```

But now we are getting more errors!

When we hover over the object we pass in to `makeInfiniteScroll` we see the following error:

```text
Property 'initialRows' is missing in type '{ key: string; fetchRows: () => Promise<{ id: number; name: string; }[]>; }' but required in type 'MakeInfiniteScrollParams'. 
```

This is happening because we aren't passing in `initialRows`, so let's make it optional:

```typescript
type MakeInfiniteScrollParams = {
  key: string
  initialRows?: unknown[]
  fetchRows: () => Promise<unknown[]>
}
```

## Adding TRow

Now that we have all this stuff, we can start to see relationships between all the pieces.

We can add `TRow` to the type, and set `initialRows` to be an array of `TRow` and `fetchRows` to be a function that returns a `Promise` of `TRow[]`:

```typescript
type MakeInfiniteScrollParams<TRow> = {
  key: keyof string
  initialRows?: TRow[]
  fetchRows: () => Promise<TRow[]>
}
```

We are able to safely represent this in an object, since we're dealing with arrays.

Then in `makeInfiniteScroll` we pass `TRow` as a type argument and make sure to add it to the `params` argument:

```typescript
const makeInfiniteScroll = <TRow>(params: MakeInfiniteScrollParams<TRow>) => { ... 
```

## Making Tests Pass

The initial rows test is now passing. Rows are getting inferred properly based on `name` and `id`.

To make sure that our test for the key is a property of the row is passing, we can check if `key` is a `keyof` `TRow`:

```typescript
type MakeInfiniteScrollParams<TRow> = {
  key: keyof TRow
  initialRows?: TRow[]
  fetchRows: () => Promise<TRow[]>
}
```

Now if we don't pass in a promise to `fetchRows`, it is going to throw an error. To fix this we can update it so `Promise` returns a `Promise<TRow[]>` or `TRow[]`:

```typescript
type MakeInfiniteScrollParams<TRow> = {
  key: keyof TRow
  initialRows?: TRow[]
  fetchRows: () => Promise<TRow[]> | TRow[]
}
```

Introduce a Type Parameter to Ensure Type Consistency

0:00 The first thing that comes to mind is we're obviously going to need a type argument for makeInfiniteScroll. The question is what we should be expecting in that type. For now, let me just scaffold a couple of things. I'm going to say, "interface MakeInfiniteScrollParams."

0:17 I like extracting this out to an interface or a type. Let's go for a type, actually. MakeInfiniteScrollParams and just scaffold this here. We know that we have initialRows, which is probably going to be an array of something, and we have fetchRows. It looks like fetchRows is going to be a function. It doesn't actually take in any arguments, which is good. Let's say it just returns unknown.

0:44 In fact, I think it might be best if it returns a Promise unknown. We know that, basically, it's going to fetch something. We need to actually pass in a Promise here. I guess maybe we could do a maybe Promise. Anyway, we'll get to that.

0:59 We've got this unknown here. We can see that data.push...Type unknown must have a Symbol.iterator method that returns an iterator. What? It turns out the data.push expects it to be an array of something. Because we're spreading this in, we know that this is probably going to be an array of something, which makes sense because we're fetching more rows here.

1:25 We've now got this key here. Key doesn't exist on the params. Let's add that in just as a string, for now. Let's see if things have improved at all. Oh no. No, they really haven't. Why isn't this erroring? Oh yeah. Because we don't need to pass in the initial rows. This one can actually just be an optional here.

1:48 That's good. We've removed some errors, but this table, for instance, it's now just...fetchRows is returning Promise unknown. That's good. table here, getRows is returning an unknown array, which is going to be complaining down here. It's supposed to be an array of the things that you pass into initialRows.

2:10 Now we can see that we have a couple of unknowns here. We have this key string, which I'm just going to type as unknown as well. Now that we have all this stuff, we can start to see relationships between all the pieces. We can see that this type probably needs to have a T on it, like TRow, for instance, that represents all of the pieces here.

2:31 initialRows, it makes sense for that to be an array of TRow. fetchRows is also going to be an array of TRow. We can represent this pretty safely in an object here because we know we're going to be dealing in arrays. We know that TRow array is going to be there, and Promise TRow is going to be there.

2:50 Now we need to find some way of passing it into the MakeInfiniteScrollParams. We've got TRow here. From all of our pain that we've been through, we know that we can add TRow here, and it's going to be in InfiniteScroll there.

3:07 How are we doing now? We're getting pretty nice functionality here. We're getting getRows. We're actually passing this test down at the bottom. Our rows are now inferred properly based on name and id. If we add age, 23 there, let's say, then this is going to be added to this too, which is fantastic. This function is now inferring properly. Brilliant.

3:29 What's erroring at us now? We have a "Should ensure that key is one of the properties of the row." We know how to do this. We know that TRow, we can use keyof TRow to make sure that this key is one of those members.

3:45 Now, if we go down to the bottom here, we've got key id. We'll get id and name here. If we pass in age, it's going to yell at us. If we pass in name, it's going to work. Pass in id. It's going to work. That is fabulous. This is erroring properly because we don't have name on this particular object that we're inferring from.

4:04 What can we take from this? We know that we can pass in...There's multiple inference sites here, so the initialRows and the Promise TRow. This is a really, really neat one, the fact that you can infer from a Promise that's passed in.

4:19 I'm just wondering, if we don't pass in a Promise here...We have fetchRows. Let's just say that we return this, for instance. This is actually going to yell at us because it's expecting an async function here. This doesn't seem, to me, to make sense. We could say this returns a Promise TRow or TRow array here.

4:41 Now this will work because it doesn't need to return a Promise. It can return a Promise if it wants to, but it doesn't need to. This will work as an async or a sync function. There you go. A little bonus for you. This is pretty nice. I'm pretty happy with how this API turned out. Well done, if you found the solution.

Make An Infinite Scroll Function Generic with Correct Type Inference

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.

The Generics workshop is your guide to mastering one of TypeScript's most complex features.

Through dozens of exercises, you'll get to grips with generics from the lowest level, up through examples of how your favorite TS libraries use them.

<Testimonial author={{name: "Tal Faran"}}>Just finished all the Generics sections. Really enjoyed it! It covers realistic problems from our day to day work, and when you reach the end you have strong grasp of how to use generic more efficiently, and in a prettier way that is more accurate of what you wanted to achieve in the first place.</Testimonial>

## Intro to Generics

The best place to start is the start. We'll learn the syntax for assigning generics to functions and classes. We'll learn what's possible with the syntax, and build our very first runtime generic function.

## Passing Type Arguments

TypeScript can infer generics based on arguments passed to functions- but there's an alternative. You can manually pass types as type arguments to functions. We'll cover exactly why this is useful, _when_ it's useful, and what limitations this approach has.

## The Art of Generic Inference

Understanding generics in functions requires deep knowledge of the TypeScript compiler. You usually have multiple options when it comes to representing a generic in a function - and there's often not a right answer. We'll examine exercises which help illuminate these decisions.

## Advanced Generics

There's more to generics than inference. In this section we'll cover generics with conditional types, generic currying, and generics on interfaces. Each come with their own challenges.

## Function Overloads

Sometimes, you don't need a generic. Function overloads provide another method for inferring types from arguments passed to a function. In this section, we'll compare and contrast overloads with generics - and even discuss how they can be combined.

TypeScript Generics Workshop

Total TypeScript Core Volume is a set of three full TypeScript workshops for the intermediate to expert professional TypeScript programmer that wants to take their skills to the next level. This bundle also includes the Advanced React with TypeScript workshop that will give you expert-level knowledge for typing your React apps.

The Advanced React Workshop is a **pre-release** product. It is almost full recorded and will be released fully in a month or so.

Type Transformations

TypeScript Generics

Advanced TypeScript Patterns

Advanced React with TypeScript

TypeScript Expert Interviews

Core Volume + React Bundle

By the end of this workshop, you'll be a master of generics and have a good understanding of function overloads, inference, and all the tricks you need.

TypeScript Generics Workshop Welcome

Generics allow you to ensure that your functions are properly typed, often without having to specify the return type.

Replace the unknown Type with a Generic

Typing Functions with Generics

It is possible to specify what can be passed into a generic while still allowing its literal type to be inferred.

Add Constraints to a Generic

Restricting Generic Argument Types

Types passed into a function can be used to infer types in an object that gets returned.

Use Multiple Generics with a Function

Typing Independent Parameters

Generics work really well with Type Helpers. One use case is typing properties that are passed in as part of an object.

Approaches for Typing Object Parameters

In Excalidraw's codebase, we'll examine a sum function that accepts an array and a mapper function used to reduce values down to a number.

Generic Functions in Excalidraw

Here you will learn how generics can be used to allow you to pass in typed properties of any shape when instantiating a class.

Add Types to a Class

Generics in Classes

With generics you can specify that certain properties are present and of a specific type while also allowing for any additional properties to be present.

Add Object Property Constraints to a Generic

Generic Mapper Function

Orta Therox, an ex-TypeScript team member, says generics are crucial to avoid lengthy types in its structural type system, unlike Objective-C's nominal types.

The Importance of Generics in TypeScript

The TypeScript docs for generics have info and examples on creating and using generic types.

Generics section of the TypeScript docs

Learn more about the unknown type in the TypeScript docs

The unknown Type from the TypeScript Docs

The "Generic Constraints" page from the TypeScript documentation provides detailed information on how to define constraints for generic types

Generic Constraints from the TypeScript Docs

The Classes section of the TypeScript docs provides detailed information on how to use generics with classes, including examples and best practices.

Classes section of the TypeScript docs

See a real-world example of how generics are used in a software project.

gesture.ts from the Excalidraw GitHub Repo

A refresher from the Type Transformations workshop lesson, "Support Function Type Constraints with Variable Arguments", showing extends in action.

Total TypeScript - The Extends Keyword in action

Intro to Generics

Many of TypeScript's built-in types support type arguments. With help from generics you can specify the types that a function accepts and returns.

Pass Type Arguments to a Function

Add Type Parameters to a Function

By adding a default generic, you ensure that your functions remain type safe. The generic context follows a similar pattern to the type helper context.

Specify a Default Value

Defaults in Type Parameters

Generic slots can be added to the type arguments of classes or type helpers.

Infer from the Type Arguments of a Class

Infer Types from Type Arguments

Generics are captured at different levels based on where they're called. Here we'll examine how generics are used in a reduce function.

Pass Type Arguments to a Reduce Function

Strongly Type a Reduce Function

Not all libraries support generics by default. Fortunately, there are some techniques for working around this with help from generics.

Use Generics to Type a Fetch Request

Avoid any Types with Generics

The repo for cal.com contains several examples of how passing type arguments allows for overriding the weaknesses of external libraries.

Passing Type Arguments in cal.com

Improving Code Maintainability

MDN reference for the Set object in JavaScript, which is a collection of unique values.

JavaScript Set from MDN

Documentation for the Record utility type in the TypeScript Handbook.

Record Types from the TypesScript docs

TypeScript's reduce method signature on GitHub in the type declaration file used as a reference for JavaScript's built-in objects available in TypeScript.

TypeScript's reduce type signature from its source on GitHub

TypeScript's DOM lib provides the types for interacting with the Document Object Model. 

fetch, Response, and Body from TypeScript's DOM lib source on GitHub

Documentation for the Awaited utility type in the TypeScript Handbook. This type can be used to extract the type of a Promise or Async value.

Awaited Utility Type from the TypeScript docs

A TypeScript class for interacting with the SendGrid email service in the cal.com repository.

Sengrid.ts from the Cal.com Github Repo

Passing Type Arguments

The approach you take to generics impacts how far you have to drill into objects, and the readability of your code on the whole.

Represent Generics at the Lowest Level

Generics at Different Levels

This section is all about figuring out how best to represent these generics in terms of the things that are being passed into functions.

Two Approaches for Typing Object Keys

Typed Object Keys

Generics allow you to type arguments for functions that are passed to other functions.

Constrain a Type Argument to a Function

Make a Generic Wrapper for a Function

Learn how to ensure the accurate literal inference of type arguments using constraints.

Understand Literal Inference in Generics

The choice of representing types in type arguments can impact literal inference. Constraints like "as const" can refine it.

Understand Generic Inference When Using Objects as Arguments

Restrict inputs and infer literal types in TypeScript by applying constraints on the type parameter.

To accept multiple literal types and infer them, T should be extended with union types like "string | number"

Accepting Multiple Literal Types

Inferring Literal Types from any Basic Type

Going with the lowest-level and tightest representation in your generics leads to good results and better inference.

Constrain to the Array Member, Not the Array

Infer the Type of an Array Member

It doesn't necessarily take hard work to get good inference. Choosing which generics to use and where to place them is key.

Two Approaches to Working with Class Names

Generics in a Class Names Creator

Tanner Lindsley explains how to use descriptive names for generics in React Query to ensure proper function flow and passing in the right slots.

Generics in React Query

The official TypeScript documentation for the Keyof Type Operator.

Keyof Type Operator from the TypeScript Docs

The official TypeScript documentation for Type Assertions.

Type Assertions from the TypeScript Docs

The official TypeScript documentation for the Record Utility Type.

Record Utility Type from the TypeScript Docs

Study the source code to gain a deeper understanding of how the Object.keys() method works.

Object.keys() from the TypeScript Source Code

The official TypeScript documentation for Tuple Types.

Tuple Types from the TypeScript Docs

The official TypeScript documentation for the Parameters Utility Type.

Parameters Utility Type from the TypeScript Docs

The official TypeScript documentation for the ReturnType Utility Type.

ReturnType Utility Type from the TypeScript Docs

The Art of Type Arguments

TypeScript isn't clever enough on its own to map a conditional type in the return of a function.

Ensure Runtime Level & Type Level Safety with Conditional Types

Generics with Conditional Types

TypeScript has a limitation of not trusting narrowing inside of a generic function. Using a technique to add better inference gets us around this.

Fixing the "Not Assignable" Error

Fixing Errors in Generic Functions

Curried functions accept arguments that return functions. It's possible to use generic arguments to ensure these returned functions are properly typed.

Fix Type Inference in Curried Functions

Generic Function Currying

Understanding how generics work at different levels of functions will help you when structuring chained arguments and other complicated types.

Understanding Generics at Different Levels of Functions

Generic Interfaces with Functions

Sometimes it's possible to refactor a function with multiple generics to maintain the same functionality with a single generic.

Refactoring Functions with Unnecessary Type Arguments

Spotting Useless Generics

On the flip side of the previous exercise, sometimes additional generics should be added to allow for more specific types.

Improving Type Inference with Additional Generics

Spotting Missing Generics

How tRPC Handles Inheritable Generics

Improve a theme API in TypeScript by creating a factory that returns a function that already has its theme interface passed in.

With factory functions, you can avoid passing the same type argument repeatedly, creating cleaner theming systems.

Create a Factory Function to Apply Type Arguments to All Child Functions

Refactoring Generics for a Cleaner API

In TypeScript, passing multiple type arguments to functions can cause partial inference issues.

A workaround to TypeScript's lack of partial inference can be achieved by splitting type arguments over two function calls.

A Workaround for The Lack of Partial Inference

The Partial Inference Problem

Advanced Generics

Function overloads can be used to handle different input and return types, similar to generics.

Understanding Function Overloads

What is a Function Overload?

There are often many ways to solve a problem. Here we revisit an earlier exercise that used conditional types and compare it to a function overload approach.

Match Return Types with Function Overloads

Function Overloads vs. Conditional Types

It can be difficult to be type safe with a function overload. Do your best to ensure the user gets what they expect.

Specifying Types for an Overloaded Function 

Debugging Overloaded Functions

Function overloads work best when used correctly. Think carefully about what technique you should use when writing your functions.

When to Use Overloads and Unions

Function Overloads vs. Union Types

Function overloads can work together with generics to make functions behave differently based on their input.

Typing Different Function Use Cases

Generics in Function Overloads

Knowing how to read and diagnose problems related to function overloads on interfaces is very important. Here, you'll troubleshoot an overloaded interface.

The Inference Mystery Solved

Solving an Inference Mystery

Function overloads allow for different ways to call your function. This is great for scenarios with different type signatures.

Split Functions Into Two Different Call Signatures

Use Function Overloads to Infer Initial Data

Function overloads are great for preventing one of TypeScript's oddest errors where TypeScript can't infer what type a function should be called with.

Handling Default Arguments with Function Overloads

The "Instantiated with Subtype" Error

TypeScript declaration file for the DOM API that helps you write type-safe and efficient code.

TypeScript DOM Source Code on GitHub

Function Overloads

Create a function to accept dynamic arguments for "click" and "focus" events, adding an extra argument for "click" with a specified shape.

Use a Tuple to Represent a Dynamic Number of Arguments

Create a Function with a Dynamic Number of Arguments

Create a function that chooses specific keys from an object, ensures type safety, and prevents invalid keys.

Extracting Object Properties with Reduce and Generics

Create a Pick Function

Develop functions with complex nested structures that use generic types to validate user input based on specified rules.

Add Strong Typing and Proper Error Handling to a Form Validator

Create a Form Validation Library

Modify fetchData to handle missing type arguments to return clear error messages, without compromising its functionality or usability.

Modify a Generic Type Default for Improved Error Messages

Improve a Fetch Function to Handle Missing Type Arguments

Correctly type a composition of up to five functions with arbitrary input and output types, using overloads and generics.

Using Overloads and Generics to Type Function Composition

Typing a Function Composition with Overloads and Generics

It's possible to dynamically type arguments based on what is being passed in, allowing for stronger typing and better inference.

Adding conditional types and type constraints ensure good inference and strong typing for dynamic arguments.

Transcript

Make An Infinite Scroll Function Generic with Correct Type Inference

Transcript