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 Let's look at classes next. We have a Component class here that has a props attribute which is currently being typed as unknown. Inside the constructor, you have to pass it props. It then assigns props that you pass in, and it has a function that returns getProps.

0:17 Currently, we have a component that we're passing in a 1, b 2, c 3. We're getting this Component, and it's a class, basically. That result, though, is typed as unknown, and we're expecting the result to equal the type of a number, b number, and c number.

0:33 Your job is to figure out when we call this component, we want to technically be able to pass any shape of props, which sounds like a generic, and your job is to try and work out how to make props generic.

Problem

Generics in Classes

Now let's take a look at classes.

This class component has a props attribute, which is currently being typed as unknown.

Inside the constructor, you have to pass it props which are then assigned to this.props. There is a getProps function that will return the props.

For now, the props