Passing Type Arguments 7 exercises

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;

Loading exercise


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.