0:00 The first way that you would handle this first case is you would hover over aria-posinset. You can see here that it takes React.AriaAttributes ['aria-posinset'] ?: number or undefined. You can see that this is a property here. You can think of all of props, like when you pass them to React components, they're just objects.

0:22 What we're looking at here is a property on an object that this component expects. React.AriaAttributes we're seeing this can be number or undefined. Let's put a little one there and now that type error goes away. We can also put undefined in here, if we want to, that would work.

0:38 Now, we've got this onChange here. We got React.DOMAttributes, HTMDivElement, onChange = React.FormHandler, HTMLDivElement or undefined. This one looks a bit more complex. Let me take this out here.

0:53 You notice that React bundles a lot of its own types here to explain what it can do. If we just grab this, if we say type example = React.FormEventHandler, we can command click on this to take a look at what it demands and what it needs.

1:10 Let's take a look. React.FormEventHandler. This is T = Element. You notice, we're now inside index.d.ts here. We're now inside React type definitions itself and it's EventHandler, FormEvents. We command click over to here. Oh God, a bit scary here. This isn't good.

1:31 We've now got a bivarianceHack up here. You can see that the types get a little bit scary straight away, but if we go back to FormEventHandler or what was it? Yeah, FormEventHandler, HTMLDivElement, we've now got a FormEvent here that extends a SyntheticEvent. This is pretty tough to figure out.

1:51 What we do know is that this takes some handler or which is likely to be a function. If you pass it a function, then it's going to be happy. We can investigate this a bit more by passing it some parameters here. This isn't happy. Type blah, blah, blah is not assignable to this.

2:09 What if we just pass it one parameter? Now, we've got this e here, which is a React.FormEvent. You can see, we're starting to get a sense for the terrifying things that React types can bring up and the puzzles it can leave us in.

2:27 The other way you can do this instead of it like extracting this out into a type here manually is you can just command click on onChange to go to the type itself, and this is a FormEventHandler, T. I'm going to show you how to navigate a lot of this stuff later.

2:43 Finally, how do I get autocomplete with JSX? Well, you need to use the control space, hockey. What this is going to do is it's just going to bring up a bunch of different properties. You can see that all of these with the little brick on the side here, these are all properties on this object.

3:03 These objects, "How do I know all of the components or all of the props that this component takes?" Well, we can command click onto div itself and ignore this one down here. We want to look in index.d.ts. This is going to be ReactDetailedHTMLProps.

3:21 This stuff is really, really hard to explore, but you should be able to get a sense by figuring out, working your way around these. Go to definition, which is what this command click is, using the autocomplete, and using these hovers to be able to work your way around these confusing types.