Let's take a look at JSX and how you can use VS Code to get the most out of JSX and understand what types it's expecting.

```typescript
export const Component = () => {
  return (
    <div
      // How do I figure out what type aria-posinset expects?
      aria-posinset={}
      // How do I figure out what type onChange expects?
      onChange={}

      // How do I get autocomplete with JSX?
    />
  );
};
```

## Three Challenges

You have three missions:

1. Can you figure out what type `aria-posinset` takes?
2. Can you figure out the type that `onChange` expects?
3. How do you get autocomplete in JSX for the props that `div` expects?

VS Code has a variety of features for working around your codebase when writing JSX.

## Finding the `aria-posinset` Types

The first challenge was to figure out what type `aria-posinset` expects.

The solution here is by hovering over the `aria-posinset` property.

VS Code will show a box that tells us that `React.AriaAttributes['aria-posinset']` is a property takes either a `number`, or `undefined`.

Adding a `1` (or `undefined`) will make that type error goes away.

```typescript
export const Component = () => {
  return (
    <div
      aria-posinset={1} // number | undefined
      ...
```

## Finding the `onChange` Types

Next, hovering over `onChange` shows us:

```typescript
React.DOMAttributes<HTMLDivElement>.onChange?:React.FormEventHandler<HTMLDivElement> | undefined
```

This one looks a bit more complex.

React bundles a lot of its own types here to explain what it can do.

Let's create an `Example` type based on what we saw from the `onChange`:

```typescript
type Example = React.FormEventHandler<HTMLDivElement> | undefined
```

Now we can now command-click on `FormEventHandler` to take a look at what it needs.

Inside of `node_modules/@types/react/index.d.ts` we can see the `FormEventHandler` relates to the `EventHandler` type, which extends a `SyntheticEvent` that includes a `bivarianceHack`...

It gets a bit scary in the type definitions!

What we do know is that `onChange` expects a handler, which is likely to be a function.

If we pass a function into the `onChange`, we can investigate further by passing it some parameters.

Passing in a parameter of `e`, we can hover and see that `e` is a `FormEvent`.

```typescript
export const Component = () => {
  return (
    <div
      aria-posinset={1} // number | undefined
      onChange={(e) => {}}
      ...
```

An alternative way to explore the types would be to `CMD + click` the `onChange`. This would take you directly to the `onChange` type that shows the `React.FormEventHandler<T = Element>`.

We'll look at how to navigate a lot of this stuff later.

## Autocomplete with JSX

The last challenge was to get autocomplete.

To do this, you need to use the `CTRL + Space` hotkey.

This will bring up a bunch of different properties, which VS Code denotes with a brick icon. Everything from `about` to `onVolumeChange` and any other property you can think of will be listed.

In order to figure out what properties our `div` can take, `CMD + Click` on it to jump to `index.d.ts`. The `div` element will take a number of props, including those from `React.HTMLAttributes<HTMLDivElement>`.

## Wrapping Up

We've looked at three different ways to work your way around your code and its types:

1. **Go to Definition**
  * Use the `CMD + Click` (or `CTRL + Click` on Windows) to quickly jump to the definition of a particular function, element, or attribute.
2. **Autocomplete**
  * Utilize the `CTRL + Space` autocomplete hotkey to quickly complete code snippets and avoid syntax errors.
3. **Hovering**
  * Hover over errors, props, or variables to view additional information and tips.

Three Helpful Tools for Writing JSX

[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.

Navigating JSX Types

[0:00] Let's take a look at JSX and how you can use VS Code to get the most out of JSX and understand what types it's expecting. I've got three missions for you, which is can you figure out what type aria-posinset takes?  
  
[0:14] Can you figure out the type that onChange expects? How do you get autocomplete on the props that div expects as well? How do you figure that out? Those are your three missions. See if you can figure them out, and I'll show you the solution. Good luck.

TypeScript's features and developer experience make a great combination with React, but it can be confusing to get started.

What’s the best way to type component props? What are these weird `useRef` errors?

That's where this React with TypeScript tutorial comes in!

Starting from the very beginning of bringing TS support to a React project, you'll soon find yourself properly typing hooks and mastering components. You’ll learn everything you need to know to get productive with React and TypeScript.

Tutorial topics include:

* Reading React's type definitions to debug errors and ensure correct usage
* Defining props for custom and `React.FC` function components.
* Putting TypeScript's inference to work for you
* Supporting component children
* Typing and overriding event handlers
* Utilizing `ComponentProps` to extract properties from imported components or HTML DOM elements
* Understanding the APIs and typing for `useState`, `useCallback`, `useEffect`, and other React Hooks. By the end of this workshop, you'll be confident when using React with TypeScript in your own projects!

<Testimonial author={{name: "Francisko de Moraes Rezende", image: "https://cdn.sanity.io/images/z9io1e0u/production/8e2b0b48599527885121568e19c761edd1c3e2ee-460x460.jpg"}}>Went through it and I think it's great! I wish this tutorial existed when I started my first gig 11 months ago. It teaches all the things I use on a daily basis and some that I didn't know; I was using the verbose way of getting HTML props in types until I went through the tutorial. This is my new go-to recommendation for people starting to work with TS+React. Thanks for creating this and making it free, Matt.</Testimonial>

## Instructions

This React with TypeScript tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory approach to finding a solution.

You'll need to:

* Watch and read the problem introduction.
* Check out the TypeScript or React documentation or dive into type definitions to look for help
* Try a solution and check your work. There may be more than one way to solve the challenge! Whether you succeed or get stuck, watch and read the solution and check out the included code.

## Prerequisites

You'll need a working knowledge of React, as well as foundational TypeScript knowledge. Working through the <a href="https://www.totaltypescript.com/tutorials/beginners-typescript" target="_blank" rel="noopener">Beginner's TypeScript Tutorial</a> is recommended.

## Running the Exercises

Exercises can be worked on using the inline Stackblitz editor, or by <a href="https://gitpod.io/#https://github.com/total-typescript/react-typescript-tutorial" target="_blank" rel="noopener">opening the tutorial repo in Gitpod</a>. Online editors do not support the full feature set of a local VS Code installation (e.g. quickly jumping to type definitions).

To work locally, clone the <a href="https://github.com/total-typescript/react-typescript-tutorial" target="_blank" rel="noopener">React with TypeScript Tutorial repo</a>, and use a package manager to install dependencies. From there, check out the README for further instructions.

Get productive building applications with React and TypeScript with our interactive guide on React's types - from component props to useRef.

React TypeScript Tutorial 

There are a few steps to follow in order to add React to a TypeScript project.

Adding React to a TypeScript Project

Most frontend frameworks include optional TypeScript support, meaning you won't have to manually set it up.

TypeScript in React Frameworks

Introduction

It's important to understand how to type props since you'll work with them every day in React.

Four Approaches to Typing Props

Ensure Props are Present and Defined

React's Function Component React.FC has its own considerations for enabling proper type checking.

Specifying Props for React.FC 

Typing a Component as a Function

Many teams type React's children as any, but there is a better option.

Typing React's Children

Solving the any Problem with Children

Instead of guessing a handler's type, you should be specific.

Choose the Correct Event Handler Type

Typing Event Handlers

When building React components, there are a couple of options for proper typing based on the underlying HTML element.

Add HTML Props to React Components

Using HTML Props in React Components

Components can have a lot of built-in props for things like event handlers that you don't always want, but there are a few techniques for overriding them.

Techniques for Overriding Native Props

Overriding and Removing Component Props 

Use a Type Helper to Extract Component Props

Extracting Props from Custom Components

Components

It's common for the useState hook to be called with an empty array, which TypeScript has issues inferring. Follow this approach for proper typing.

Fix useState's never[] Error

Properly Typing useState

The useState hook uses function overloads to handle cases where you may or may not want to pass an intial value.

Specifying types for useState

Typing useState with undefined

There's a strange property of the useState API that TypeScript treats in a specific way.

Going from Function Comparisons to Object Comparisons

Calling useState with Excess Properties

The useEffect Hook isn't generic, so you need to follow its API to use it properly.

Properly use the useEffect API

Solving Errors with useEffect

By examining a function's type definitions, you can properly type React's useCallBack Hook

Have TypeScript Infer the Callback Function Type

Typing the useCallback Hook

Not all hooks use the same type signature. Dive in to fix errors and specify the return type of a memoized value.

Specify or Infer useMemo's Return Type

Typing the useMemo Hook

There are three type definitions for useRef. Let's start by looking at the most basic.

Typing the useRef Hook

Basic useRef Typing

There are a few different ways to use refs in React, along with some rules to follow.

Refs in React

Specify the Initial Value with useRef

useRef with HTML Elements

Targeting a useRef Overload

Making a Read-Only Ref Mutable

Leveraging one of TypeScript's built-in features allows you to specifically type the state and actions for a reducer function in React.

Transcript

Navigating JSX Types

Transcript