Passing Type Arguments 7 exercises

TypeScript Generics

Section Resources
- JavaScript Set from MDN
  MDN reference for the Set object in JavaScript, which is a collection of unique values.
- 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.
- Record Types from the TypesScript docs
  Documentation for the Record utility type in the TypeScript Handbook.
- TypeScript's reduce type signature from its source on GitHub
  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.
- fetch, Response, and Body from TypeScript's DOM lib source on GitHub
  TypeScript's DOM lib provides the types for interacting with the Document Object Model.
- Awaited Utility Type from the TypeScript docs
  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.
- Sengrid.ts from the Cal.com Github Repo
  A TypeScript class for interacting with the SendGrid email service in the cal.com repository.

Transcript

0:00 In this exercise, we have a Component class, which is generic, where you're able to pass in TProps whenever you build a constructor here. What it does is it assigns props to here and it means that you can call getProps to just extract those props out.

0:17 This is all working. This seems fine. This means that our component is generic. Whatever we pass in here gets put into the type here, but when we clone the component, it's being returned as Component<any>. Whereas it should actually be the component type that's here. That's because our component that we're passing in is unknown and we're getting a sort of funky error here too.

0:38 We should also be able to grab the props from that clonedComponent, and they should be exactly the same type as this, { a: 1, b: 2, c: 3 } or rather { a: number; b: number; c: number } here.

0:52 That's your job, is to work out how to type this function in order...It's probably going to need to be a generic function, but we need to somehow understand what the props are of the component that we're passing in and then be able to return those when we grab the props there.

Problem

Infer Types from Type Arguments

Here we have a Component class that can be passed in TProps.

Inside of the constructor it assigns props to this, and provides a getProps method that can be called that will extract those props out:


export class Component<TProps> {
  private props: TProps;
  constructor(p

Transcript

0:38 We should also be able to grab the props from that clonedComponent, and they should be exactly the same type as this, { a: 1, b: 2, c: 3 } or rather { a: number; b: number; c: number } here.