Intro to Generics 9 exercises

TypeScript Generics

Section Resources
- Generics section of the TypeScript docs
  The TypeScript docs for generics have info and examples on creating and using generic types.
- The unknown Type from the TypeScript Docs
  Learn more about the unknown type in the TypeScript docs
- Generic Constraints from the TypeScript Docs
  The "Generic Constraints" page from the TypeScript documentation provides detailed information on how to define constraints for generic types
- Classes section of 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.
- gesture.ts from the Excalidraw GitHub Repo
  See a real-world example of how generics are used in a software project.
- Total TypeScript - The Extends Keyword in action
  A refresher from the Type Transformations workshop lesson, "Support Function Type Constraints with Variable Arguments", showing extends in action.

Transcript

0:00 In this exercise, we're going to look at practical use case for these generics. We have a mapping function here called concatenate first and last name where we're basically spreading in the user. Then we're returning full name as user.firstName and user.lastName.

0:15 Now, what this means is that when we map over a set of users, we want to basically say, "The new user should equal the first name and last name and also the full name here, too." It should also retain other properties that have been passed in here. It shouldn't delete anything, right?

0:34 We can see from actual our runtime inputs here that it's not going to delete anything. It's just going to spread the thing in and add the full name. The types don't know that. We also need to make sure that the thing that we pass in, it has a first name and a last name on it.

0:52 That's your job is to make this. We're definitely going to need a generic on here. We're probably going to need a constraint, too, to make sure that it's first name and last name. That's your job. Good luck.

Problem

Generic Mapper Function

In this exercise, we're going to look at a practical use case for generics.

Consider this concatenateFirstNameAndLastName function. It spreads in the user and then returns fullName as user.firstName and user.lastName:


export const concatenateFirstNameAndLastName = (user: un