Here we have our `Button` component with a `className` and some `children` on it, as well as an `onClick`.



```typescript
interface ButtonProps {
  className: string;
  children: React.ReactNode;
}

export const Button = ({ children, className, onClick }: ButtonProps) => {
  return (
    <button onClick={onClick} className={className}>
      {children}
    </button>
  );
};
```

Note that the `Button` component's `onClick` currently is not present in the `ButtonProps` interface.

## Challenge

Your challenge is to determine how to type the component's `onClick` property to match the type of the native `<button>`'s `onClick`. 

When you've found the type, update the `ButtonProps` accordingly.

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

The solution calls back to what we learned a few lessons ago.

Start by hovering over the `onClick`.

There are several things displayed, but the main thing to notice is that `onClick` is an optional property that will be typed as either `React MouseEventHandler` or `undefined`.

```typescript
// hovering over onClick
globalThis.React.DOMAttributes<HTMLButtonElement>.onClick?:React.MouseEventHandler<HTMLButtonElement> | undefined
```

Copy the type, and add it to the interface:

```typescript
interface ButtonProps {
  className: string;
  children: React.ReactNode;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}
```

Now the `onClick` has React's `MouseEventHandler`, and we're passing it an `HTMLButtonElement`.

Inspecting the types, you'll find that the `HTMLButtonElement` comes in from the DOM typings. Note that if you try to pass in a different element like `HTMLDivElement`, TypeScript will error because `type MouseEventHandler<HTMLDivElement>` is not assignable to `MouseEventHandler<HTMLButtonElement>`.

However, you could be more general and remove the type argument and just have `React.MouseEventHandler` instead.

Now when you go to create a `Button` with an `onClick` handler, you'll have autocompletion on the `e` properties:

```typescript
const Parent = () => {
  return (
    <Button className="=" onClick={(e) => {
      // autocomplete works here
      e.currentTarget
```

## Summary

When you want to type a native event handler, just hover over it to see what the property is, then copy and paste that into the your types.

In general, you can remove some of the more specific elements and default them to their basic elements so they accept anything. You could also mark them as optional with `?:`

```typescript
interface ButtonProps {
  className: string;
  children: React.ReactNode;
  onClick?: React.MouseEventHandler;
}
```

Typing any of React's handlers will work this same way!

Choose the Correct Event Handler Type

[0:01] The way that we figure this out, we learned a few lessons ago. What we do is we hover over this onClick here. You can see that there are various different things here. The main one that we have is it's saying, onClick is a optional property, that's what this means, and it's either React.MouseEventHandler or undefined.  
  
[0:22] If I copy this over, and I put it on these ButtonProps up here, we have onChange, and let's say we do it like this now. Sorry, onClick rather, onClick is the one we want.  
  
[0:35] Now, what we have is React.MouseEventHandler, HTMLButtonElement or undefined. What we ideally want here is we want to make this required. The user has to pass an onClick.  
  
[0:46] Now, if we go, const Parent = this and return our Button, then we're going to have to pass in Children. We're also going to have to pass in a className. Yeah, that will do. We're also going to have to pass in onClick. There we go. That's the way to handle it. You just hover over this and see what it takes.  
  
[1:09] Let's just examine some of these for now. We have our MouseEventHandler here and we're passing it a HTMLButtonElement. If we command click into this, you'll see that it's not coming from React itself. Is it coming from React itself? Oh yeah, sort of is. HTMLBRElement...I see.  
  
[1:34] What's happening here is HTMLButtonElement, it comes into a couple of different spaces. It comes in from the DOM here, the DOM typings. This is where it picks up most of its juice here. We've got HTMLButtonElements. This is where it brings in all of the different properties that are here.  
  
[1:52] Now, if we pass in a different one here, HTMLDivElement, then it's going to yell at us. By the way, I'm not needing to import these HTMLButtonElement or HTMLDivElements. They're just globally available.  
  
[2:05] If I put the wrong thing in here, then it's going to yell at me, because Type MouseEventHandler, HTMLDivElement is not assignable to MouseEventHandler, HTMLButtonElement. You have to be quite specific. You can, I think, can you do HTMLElement instead? Yeah, and that works.  
  
[2:21] If you want to be more general, that's what you can do. I think you can even just remove this. You can just say React.MouseEventHandler, if you want to be more general and you envisage this, for instance, just being a div or a button here. There you go.  
  
[2:37] This gives you the ability then to when the user uses this onClick, they will get access to this (e) in here, which is the event. This is just a React.MouseEvent with the Element and that Element responds to this MouseEventHandler.  
  
[2:52] I can say, HTMLButtonElement. That's going to flood through into there now, which means that e.currentTarget, this will then correspond to that buttonElement in there.  
  
[3:05] If you don't care so much about the specificity of it being a button on currentTarget, and sometimes you will and sometimes you won't, then you don't really need to worry about it. CurrentTarget will end up just being an Element there instead of a HTMLButtonElement.  
  
[3:21] That's how you handle when you have this native event or native handler that you want to just extract the type out of, just hover over it, see what the property is, copy and paste that into the onClick. In general, you can remove some of these more specific elements and just default them to their basic elements. It just accepts anything and then you're good to go.  
  
[3:47] If we wanted to make this optional, of course, we could do this and then I wouldn't need to pass it at all. That is how you handle onClick handlers, onChange handlers, onAnything handlers in React.

Typing Event Handlers

[0:00] In this exercise, we have a component called "button." This button has an onClick property here, and we want this to exactly match the onClick property that's found on this button here, on the native button.  
  
[0:13] Your challenge is to try to work out what we can type this as and how we can add onClick to the props here in a way that makes sense and will match the type that button expects. 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

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

Three Helpful Tools for Writing JSX

Navigating JSX Types

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

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

Typing Event Handlers

Transcript