Let's build a classic `pick` function.

The function takes in an object and an array of keys, then returns the keys that you expect at both the runtime level and the type level:

```typescript
const pick = (obj: {}, picked: string[]) => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {})
}
```

As seen in this test, we should get back `a` and `b` as `number`s instead of an empty object:

```typescript
it("Should pick the keys from the object", () => {
  const result = pick(
    {
      a: 1,
      b: 2,
      c: 3,
    },
    ["a", "b"]
  )

  expect(result).toEqual({ a: 1, b: 2 })

  type test = Expect<Equal<typeof result, { a: number; b: number }>>
})
```

There's also test to make sure that you don't pass in something that isn't on the object.

In this case `d` shouldn't be able to be passed here because it's not a member of this object:

```typescript
it("Should not allow you to pass keys which do not exist in the object", () => {
  pick(
    {
      a: 1,
      b: 2,
      c: 3,
    },
    [
      "a",
      "b",
      // @ts-expect-error
      "d",
    ]
  )
})
```

## Challenge

Your challenge is to fix the `pick` function so the tests pass as expected.

If you feel stuck, revisit the lessons about the `reduce` function, capturing certain things in generics, and determining how many generic arguments are needed.

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

Here's the starting point of the `pick` function:

```typescript
const pick = (obj: {}, picked: string[]) => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {})
}
```

Since we need to capture the type of the object, we'll start by adding a `TObj` type argument and assigning it to `obj`:

```typescript
const pick = <TObj>(obj: TObj, picked: string[]) => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {})
}
```

Down in the tests, we're capturing `a`, `b`, and `c` keys with number values. We also should be able to pass in `b`, but not `d`:

```typescript
it("Should not allow you to pass keys which do not exist in the object", () => {
  pick(
    {
      a: 1,
      b: 2,
      c: 3,
    },
    [
      "a",
      "b",
      // @ts-expect-error
      "d",
    ]
  )
})
```

This means that we need to set our `picked` array to be `keyof TObj[]`:

```typescript
const pick = <TObj>(obj: TObj, picked: keyof TObj) => { ... 
```

But with this change, we get a new error:

```text
Argument of type 'string[]' is not assignable to parameter of type 'keyof TObj[]' 
```

This is annoying because TypeScript thinks we're saying "I want an array of `keyof TObj`", but what we really want is to call `keyof` on an array of `TObj`.

It's an important distinction!

The way to get around it is just to add `Array`:

```typescript
const pick = <TObj>(obj: TObj, picked: Array<keyof TObj>) => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {})
}
```

Now we aren't getting that error anymore!

The next problem is that our return type is still an empty object.

Let's check out the error inside of our `reduce`:

```text
Type 'keyof TObj' cannot be used to index type '{}'. 
```

The problem is that `reduce` picks up its type argument from whatever is passed into its accumulator– in this case, an empty object `{}`.

This is when we need to decide what type we're returning, because it is going to be different than the object we passed in (which is currently the only thing being inferred).

We can't use the `Pick` utility type and return `Pick<TObj, TPicked>` because we don't have a `TPicked` type argument.

We also can't say `typeof picked` or something like that because it just extracts out `keyof TObj`:

```typescript
const pick = <TObj>(
  obj: TObj,
  picked: Array<keyof TObj>
): Pick<TObj, typeof picked> => {
  ...
```

We need to add a second generic.

## Adding the TPicked Type Argument

Let's add `TPicked extends Array<keyof TObj>` and assign `picked` to it:

```typescript
const pick = <TObj, TPicked extends Array<keyof TObj>>(
  obj: TObj,
  picked: TPicked
) => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {})
}
```

Now let's investigate our first test:

```typescript
it("Should pick the keys from the object", () => {
  const result = pick(
    {
      a: 1,
      b: 2,
      c: 3,
    },
    ["a", "b"]
  )

  expect(result).toEqual({ a: 1, b: 2 })

  type test = Expect<Equal<typeof result, { a: number; b: number }>>
})
```

When we call `pick` in our first test, we are getting the object with the `a`, `b`, and `c` keys, all of type `number`.

In the second type argument `TPicked`, we are getting an array of `"a"` or `"b"`.

That's fine, but we have to do some extraction to get what we need from it.

Ideally what we would be able to say `Pick<TObj, TPicked>` and then say `TPicked` in that slot.

Currently to extract we have to do `TPicked[number]`:

```typescript
const pick = <TObj, TPicked extends Array<keyof TObj>>(
  obj: TObj,
  picked: TPicked
): Pick<TObj, TPicked[number]> => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {})
}
```

Now the `result` in our test is being typed how we want:

```typescript
// ON HOVER over `result`
const result: Pick<
  {
    a: number
    b: number
    c: number
  },
  "a" | "b"
>
```

But we're actually having to extract out of the `("a" | "b")[]` array:

```typescript
// ON HOVER over the call to pick in test 1
const pick: <{
    a: number;
    b: number;
    c: number;
}, ("a" | "b")[]>(obj: {
    a: number;
    b: number;
    c: number;
}, picked: ("a" | "b")[]) => Pick<{
    a: number;
    b: number;
    c: number;
}, "a" | "b">
```

It would be great if it instead inferred it instead of us having to do the extra `[number]` extraction on the `TPicked` type.

To make this happen we'll move the `Array` wrapper in the `TPicked` type argument over to the `picked` argument.

At this point, in `Pick` we can remove the `TPicked[number]` and just say `TPicked`:

```typescript
const pick = <TObj, TPicked extends keyof TObj>(
  obj: TObj,
  picked: Array<TPicked>
): Pick<TObj, TPicked> => { ...
```

When we check the call to `pick` in our test we'll see that it's now just going to be `"a"` or `"b"`:

```typescript
// ON HOVER over the call to pick in test 1
const pick: <{
    a: number;
    b: number;
    c: number;
}, "a" | "b">(obj: {
  ...
```

We're getting closer, but there's an error with `picked.reduce`:

```text
Type '{}' is not assignable to type 'Pick<TObj, TPicked>'. 
```

This is happening because `.reduce` is currently inferring an empty object.

Instead we want it to infer `Pick<TObj, TPicked>` inside of its accumulator.

We can't just assign the `acc` argument to be `Pick<TObj, TPicked>` because TypeScript is focusing on the initial value of `{}` that we gave it.

What we need to do is coerce the accumulator to be `Pick<TObj, TPicked>` by using an `as`:

```typescript
const pick = <TObj, TPicked extends keyof TObj>(
  obj: TObj,
  picked: Array<TPicked>
): Pick<TObj, TPicked> => {
  return picked.reduce((acc, key) => {
    acc[key] = obj[key]
    return acc
  }, {} as Pick<TObj, TPicked>)
}
```

The empty object is going to be the `Pick<TObj, TPicked>`, so now in the accumulator we are saying that the `acc[key]`, which is `keyof TPicked` or `keyof TObj`, is the `obj[key]`.

With this change we no longer need the return type in our `pick` function definition since `reduce` now has `Pick<TObj, TPicked>` in its type argument:

```typescript
// ON HOVER over .reduce
(method) Array<TPicked>.reduce<Pick<TObj, TPicked>>
```

Now when we hover over `result` in our test, we see that it's nicely using the `Pick` utility type:

```typescript
const result: Pick<
  {
    a: number
    b: number
    c: number
  },
  "a" | "b"
>
```

The tests are passing, and `as` is working as expected!

Extracting Object Properties with Reduce and Generics

0:01 We know that we're definitely going to need to capture the type of the object. That is for sure. We've got TObj here. Let's say object is TObj there. Now what we've got inside pick is we're capturing a number, b number, c number, which is perfectly reasonable.

0:19 Then we've got this picked function, which we need to be the type of those keys. We should be able to pass in a, b, but not d. That means we need to put in key of TObj there.

0:36 Oh, key of TObj. This is a classic one. This error is so annoying because it looks like we're saying, "I want an array of keyof TObj." In fact, what you end up with is it calls keyof on an array of TObj. What? That's really confusing. You end up with "Argument of type string array is not assignable to this."

1:03 What it actually wants you to pass in is things like concat and copyWithin and entries, all that stuff. Horrible, horrible syntactical error. The way to get around it is just to use the Array thing instead.

1:16 Now this will work. You'll get a, b, and c here. Isn't it so nice when the autocomplete just does exactly what you want it to do? Then d is going to be erroring for us properly there. Beautiful. That's pretty good.

1:30 Now, this result type, what are we getting back? We're still getting back an empty object. Oh no. reduce here, we've run into this error before, where inside this reduce, it picks up its type arguments from the thing that you pass in here. We've got this horrible little bit.

1:52 One thing we could do is we could say actually, we need to decide what type we're returning here because the object that we're returning is going to be different than the object we passed in. Currently, the only thing that we've inferred is the object that we're passing in.

2:10 We could return TObj, but then we're probably going to need to use the Pick utility type here. We return Pick TObj. Then what do we put inside here? We can't say, "typeof picked" or something like that, because that just extracts out the keyof TObj thing that we have there.

2:29 We actually need a second generic here, which is the things that we're going to pick from the object. Let's stick that here. Let's say, "TPicked extends Array," or, in fact, it's going to be...There's actually a really interesting thing here. We could say, "Array keyof TObj" here. We could put in TPicked.

2:56 Now we say, "Pick TObj typeof picked." I'm going to ignore this error for now. In fact, I'll just remove this for a bit because I actually want to investigate what gets picked up when you use an array inside here. My spidey senses are tingling. I'm thinking that might not be the best thing to do.

3:18 What we get here is we get a number, b number, c number in the first type argument, so in TObj, but then in the second type argument, we get an array of a or b. This is fine, but we've actually got to do a bit of extraction there to get out the thing that we want.

3:34 We don't actually care that there's an array wrapping them. All we want to extract is a or b. That's ideally what we would like in that slot. What we want to do is we want to say, "Pick TObj," and then say "TPicked." Currently, we have to do TPicked number. Isn't that so weird?

3:55 Now the result is actually typed as we want it to be. It's picking it properly, but we're actually having to extract out this array when it would be great if it just inferred it. We're having to do this extra little layer.

4:07 What we can do is we can actually say let's remove this array from the outside. We're saying, "TPicked" here. Now we're going to put the array here. Now, TPicked number, I don't need that number anymore because TPicked is no longer an array. It's actually going to be just a or b. Isn't that sweet? Super-nice.

4:30 Now then we've got an issue with the reduce. Let me just check that it's working. result now, result should...Whoops. What have I done there? result.a, and we've got b. If I remove b from the equation, then b disappears. We're just left with a.

4:47 If I add d, which is a boolean -- sorry, 1 -- then we can pick here. We can pick d. Then we get d boolean. Brilliant stuff. That's fabulous. Now our tests are still passing.

5:04 How do we make this reduce happy? Why is it moaning? It's moaning because type empty object is not assignable to type Pick TObj TPicked. The reason is that reduce is inferring this empty object. What we want to do is make it, basically, infer this inside its accumulator. This accumulator is still an empty object.

5:29 We can do that by doing this. Well, no. We can't do that by doing this because it's actually not caring about the accumulator. It's just caring about this still. I think what we need to do is do an as here.

5:47 This as, what it's doing is it's basically saying this empty object is going to be the Pick TObj TPicked. In the accumulator, we're basically saying accumulator key, which is keyof TPicked or keyof the TObj, is the object T key. We can't say, "acc.whatever = cool," because whatever is not assignable to, basically, Pick TObj TPicked.

6:19 This, I think, is the best way around it. We don't actually need this return type anymore because pick.reduce now has Pick TObj TPicked in its type argument. We can actually remove this if we want to. Goodbye. Done. picked Array TPicked. This is still looking good.

6:39 The result of pick is now still exactly the same, pick, blah, blah, blah, blah, blah. That's super-duper nice. What we end up with is exactly what we need. We've got our result, which is just using the pick utility type.

6:52 It's quite nice that it shows you this. It would be nice if it just showed you the resolved output, but this is fine, I think. We end up with the test are passing. We've got the as working too. Nice.

7:05 The lesson here, I think, is to make sure you're using two generics. Make sure that the thing in your type argument is the lowest possible level. This TPicked here should be just a or b instead of an array of a or b which you've then got to extract out.

7:22 That just helps the compiler a little bit. It makes sure that you're not doing extra work for the compiler. Also, the readability of these type arguments is really, really nice. We do need to extract the entire object here because we care about the type that it results in.

7:38 For instance, we can pass strings into here. Then a would be typed as a string. result.a is going to be a string. That's why we need to capture the entire object there instead of just capturing the keys like we've seen before. There we go. Nice challenge. Well done.

Create a Pick Function

0:00 In this exercise, we're building a classic pick function. This pick function basically takes in an object and then takes in an array of keys from that object. What it's going to do is you're supposed to take this pick function, apply it to an object, say the keys you want, and you should get back the keys that you expect.

0:20 Not only on the runtime level, which should be working right now but also on the type level. On the type level, you should be getting an A number and B number, but instead, we're just getting an empty object back.

0:33 There's also another test down here to make sure that you don't pass in something that isn't on the object. D shouldn't be able to be passed here because it's not a member of this object here. That's your challenge. I think you have everything you need. Remember everything that we have about the reduce function and how annoying it is.

0:55 You're definitely going to need at least one generic here. Remember about, I don't know, how to capture certain things in generic arguments and how many generic arguments you need. I think that's it. 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.





Master TypeScript's generics with exercises from basics to advanced, including conditional types and currying.

TypeScript Generics Workshop

Total TypeScript Complete Volume is a set of five full TypeScript workshops for the advanced-beginner to expert professional TypeScript programmer that wants to take their skills to the next level. This bundle includes all of the Total TypeScript self-paced workshops.

TypeScript Pro Essentials

Type Transformations

TypeScript Generics

Advanced TypeScript Patterns

Advanced React with TypeScript

TypeScript Expert Interviews

TypeScript Pro Complete

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

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

Introduce a Type Parameter to Ensure Type Consistency

Make An Infinite Scroll Function Generic with Correct Type Inference

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

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

Create a Pick Function

Transcript