In this exercise, we're back with our old friend the `Button`.

But this time the requirements are slightly different.

We want this `Button` to behave like a normal HTML button.

Things like `onClick` and `type="button"` should be available and support auto-complete:

```typescript
export const Button = ({ className, ...rest }: {}) => {
  return (
    <button {...rest} className={`default-classname ${className}`}></button>
  );
};

const Parent = () => {
  return <Button onClick={() => {}} type="button"></Button>;
};
```

Currently this isn't working. Even though we're passing all of the props into `...rest`, we don't have auto-complete.

It would also be nice to extract our `className` and have it as something we could append extra classes to, while passing in a default `className`.

## Challenge

Your challenge is to figure out how to extract all of the property types from the native HTML button component, and then use that to type our custom `Button`.

This is a bit tricky, but there is a <a href="https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#componentprops" target="_blank" rel="noopener">React type helper</a> that is going to help you out. Of course, there's also a manual solution as well.

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

Here's the code we started with:

```typescript
export const Button = ({ className, ...rest }: {}) => {
  return (
    <button {...rest} className={`default-classname ${className}`}></button>
  );
};
```

The first thing we can do is hover over `button` to see its type definition:

```typescript
// hovering over button
(property) JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
```

We can then copy the definition and add it to the `Button` component:

```typescript
export const Button = ({
  className,
  ...rest
}: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>,>) => {
  ...
```

With this change, when we go to update the `Button` component inside of the `Parent`, we have autocomplete enabled and it is working as expected.

It's good that it works, but it's a lot to read.

We can remove the `React.DetailedHTMLProps` wrapper, but it's still verbose:

```typescript
export const Button = ({
  className,
  ...rest
}: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  ...
```

This could be simplified a little bit further by importing `ButtonHTMLAttributes` from React:

```typescript
import React, { ButtonHTMLAttributes } from 'react'

export const Button = ({
  className,
  ...rest
}: ButtonHTMLAttributes<HTMLButtonElement>) => {
  ...
```

## Using the `ComponentProps` Type Helper

A better solution is to use the `ComponentProps` type helper.

The `ComponentProps` helper is available on React itself, but it can also be imported separately:

```typescript
import React, { ComponentProps } from 'react'
```

Then we can can pass a native type to `ComponentProps` to grap all of its props:

```typescript
export const Button = ({ className, ...rest }: ComponentProps<"button">) => {
  ...
```

Add HTML Props to React Components

[0:00] Let's take a look at this. The way that we know that we can extract out or understand the types of these props is by looking at this button. What we've got here is a really, really long type definition here.  
  
[0:13] We can copy and paste this over. Let's have a look at this. We can stick all of that up there. This is going to work React.DetailedHTMLProps, React.ButtonHTMLElements, HTMLButtonElement, HTMLButtonElement. There's a lot going on there.  
  
[0:32] We've got our Button here. Now, we're going to get autocomplete on all of these properties. We've got button, reset, and submit in the type. We can pass it at access key, all of this stuff, and this is behaving like a regular button.  
  
[0:46] This is good, but why do we need all of this stuff here? React.DetailedHTMLProps is not really adding anything up here? It's adding a ref, I guess, but we can remove this wrapper here and we just end up with React.ButtonHTMLAttributes, HTMLButtonElements.  
  
[1:08] Still extremely verbose here. Wouldn't it be nice if we had a helper type that could help us out here? We can still pass everything that we need to inside here. Can we pass it a ref? I'm not sure we can. That's right, because we're not using forward ref or anything.  
  
[1:26] What's the actual best way to solve this? Well, it's with a type helper and that type helper is ComponentProps. Now, ComponentProps is available on React itself, but you can also import it separately. We can either do React.ComponentProps or just import ComponentProps.  
  
[1:42] What we do with ComponentProps is we can pass it a native type here, one of these native things, and we can grab all of the props from it. If we try to do it with the wrong thing, if we try to say ComponentProps, "div," then button is going to yell at us like, "Whoa, that's a big old type error."  
  
[2:00] Essentially, property 'align' is missing in 'HTMLbuttonElement', but required in 'HTMLDivElement'. You can see what's going wrong there. Of course, type button is not available on it either. ComponentProps, "button" lets you extract out beautifully the native types from these HTML elements. This is the canonically best way to do it.

Using HTML Props in React Components

[0:00] In this exercise, we're back with our old friend, the Button. Here, the requirements are slightly different, though. We want to have this button just behave in the prop sense like a normal HTML button. We want things like OnClick and button or type Button here to be available and auto-completable.  
  
[0:18] Currently, when we auto-complete on this button, even though we're passing all of the props into this rest thing here, it's not really working. It's not giving us the auto-complete there. Also, we want to extract our className, for instance, and have that as something that we append extra classes to but pass a default class name. That's why this component even exists, so that we can have that behavior.  
  
[0:44] Your job here is to figure out how to extract all of the property types from this button component or from the native one, and then use that to type our button itself. This is a little bit tricky, but there is a React type helper that is going to help you out.  
  
[1:03] There's two ways of doing it, either with the type helper or just by wrangling the types manually. I'll give you a link that will help you below. 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

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

Choose the Correct Event Handler Type

Typing Event Handlers

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

Using HTML Props in React Components

Transcript