Props are one of the most important things you need to understand, because you'll work with them every day when you're using React with TypeScript.

Here we have a `Button` component and these props are currently `unknown`:

```typescript
export const Button = (props: unknown) => {
  return <button className={props.className}></button>;
  // error under `props.className`
};
```

When we try to access className on `props.className`, we're getting an error.

The problem is that we want the `Button` component to always expect a `className`.

As seen in the `Parent` component, we are using `@ts-expect-error` for a `Button` component that does not include a `className`, but there is no error. However, there is an error under the instance that does include a `className`.

```typescript
const Parent = () => {
  return (
    <>
      {/* @ts-expect-error */}
      <Button></Button>
      // currently no error

      <Button className="my-class"></Button>
      // error under `className`      
    </>
  );
};
```

## Challenge

Your challenge is to ensure that `className` will be one of the `props`, and to make sure that it's always defined.

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

There are four main ways to solve this challenge.

## Use an Interface to Type Props

With an interface, we are basically saying that the props correspond to this interface.

By having `className` as a string in the interface, the parent component now has to expect a `className` string.

```typescript
interface Props {
  className: string;
}

export const Button = (props: Props) => {
  return <button className={props.className}></button>;
};
```

Autocomplete is supported when adding the `className` to the component.

## Use a Type

Objects, which is what `props` are, can be expressed through types or interfaces. It doesn't really matter which one you choose.

The solution looks the same, however I would typically name it something like `ButtonProps` and export it:

```typescript
export type ButtonProps = {
  className: string;
};

export const Button = (props: ButtonProps) => {
  return <button className={props.className}></button>;
};
```

It doesn't matter if you use `type` or `interface`. The important thing to know is that is we're extracting these types.

Exporting them gives us the option to use them in different places throughout our application if we need to extend or compose them.

## Define Types Inline

Another option is to define types inline:

```typescript
export const Button = (props: { className: string }) => {
  return <button className={props.className}></button>;
};
```

Again, this isn't much different than the other two approaches– the big change is that now we're not having to define an extra type.

This is a pretty common approach.

## Inline Typing with Destructuring

Even more common is something like this, which looks semantically pretty confusing:

```typescript
export const Button = ({ className }: { className: string }) => {
  return <button className={className}></button>;
};
```

On the left side of the colon is some destructuring from the props that works similarly to the below:

```typescript
export const Button = (props: { className: string }) => {
  ...
```

Another way to look at this would be to extract `Props` to a new type and add it to the button:

```typescript
type Props = { className: string }

export const Button = ({className}: Props) => {
  ...
```

However in most code bases I see the fully destructured version.

It can get tricky if you try to extract out the props later if you don't use an external type, but if you're not planning to compose together your prop types this solution will work great.

Four Approaches to Typing Props

[0:00] There are four main ways to achieve this. When we have an interface here, we're saying, "OK, these Props correspond to this interface," which means that we have className: string here.  
  
[0:12] This Parent now, it has to expect a className: string. You can see that when you autocomplete here that we get className as one of the attributes that's coming up. An interface there is perfectly fine.  
  
[0:23] The other way to do it is with a type. Type versus interface doesn't really matter. We can express object, which is what props are, through types or interfaces. Again, we've just got type Props up here. I would probably call this ButtonProps or something similar and I would export it.  
  
[0:40] It doesn't matter which one you use out of type or interface, but what we're doing here is we're extracting these types outside of the function definition. When we export them as well, we can potentially use them in different places throughout our application, if we need to extend them or compose them or something.  
  
[0:56] The next thing you can do is you can define your types in line here. This makes no difference with the other two approaches, but now we're not having to define an extra type, and we just plonk them in there. This is what I find in most code bases, this approach.  
  
[1:10] What's even more common is this approach, which looks semantically pretty confusing. Where on the left-side of this colon here, we have some destructuring. These are the props here. This is like doing const = props, like this and having your className in the middle there. What they're doing here is they're destructuring right at the point where they're instantiated.  
  
[1:36] On the right-hand side, you've then got the inline definition. What we could do here is we could extract this out, type Props = this and have this there. Honestly, this is what I see in most code bases these days. It's this pretty thrown together definitions like this. These are perfectly fine. There's nothing wrong with this.  
  
[1:55] This might end up being a little bit tricky when you try to extract out the props later and you might regret not having it in an external type like this. Then, again, you might not. To be honest, if you're not planning to compose together your prop types or anything like that this is perfectly fine. As you can see, all of these four solutions pass our tests.

Ensure Props are Present and Defined

[0:00] In this exercise, we're going to learn about props because props is one of the most important things you'll need to be doing every day when you're using React with TypeScript.  
  
[0:09] Here we have a Button component, and these props are currently unknown. When we try to access className on props.className, we're getting an error here. The thing that we want here is we want our Button to always expect a className, so this should be an error.  
  
[0:26] I'm using ts-expect-error here to basically say that the next line below it should be erroring, but it's currently erroring because it isn't erroring. Does that make sense? We're expecting an error here, but we're not getting one.  
  
[0:39] This Button className, it's yelling at us because className does not exist on type IntrinsicAttributes, so how do we change this component up here to make sure that className is one of the props and to make sure it's always defined? 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

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

Ensure Props are Present and Defined

Transcript