React TypeScript Tutorial - 3 - Typing Props

Introduction

In this tutorial, we will explore how to type props in React using TypeScript. Understanding how to properly type props is essential for creating robust applications and helps ensure that components receive the correct data types. This guide will walk you through the steps needed to effectively type props in your React components.

Step 1: Create a New React Component

To begin, you'll want to create a new functional component that will utilize props.

1. Set up your React environment if you haven't done so already.

2. Create a new file for your component, for example, MyComponent.tsx.

3. Define your functional component:

   import React from 'react';
   
   const MyComponent: React.FC = () => {
       return <div>Hello, World!</div>;
   };
   
   export default MyComponent;
   

Step 2: Define Prop Types

Next, you'll define the types for the props that your component will receive.

1. Create an interface that outlines the shape of the props. For example, if your component receives a name prop:

   interface MyComponentProps {
       name: string;
       age?: number; // age is optional
   }
   

2. Update your component to accept the props by modifying the function signature:

   const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
       return <div>Hello, {name}. You are {age ? age : "unknown"} years old!</div>;
   };
   

Step 3: Use Your Component with Props

Now that your component is ready to accept props, you can use it in your application.

1. Import your component into the parent component:

   import MyComponent from './MyComponent';
   

2. Use the component and pass the required props:

   const App: React.FC = () => {
       return (
           <div>
               <MyComponent name="Alice" age={30} />
               <MyComponent name="Bob" />
           </div>
       );
   };
   

Step 4: Handle Default Props (Optional)

If you want to provide default values for your props, you can do so by using default parameters.

1. Modify your component to set default values:

   const MyComponent: React.FC<MyComponentProps> = ({ name, age = 25 }) => {
       return <div>Hello, {name}. You are {age} years old!</div>;
   };
   

Conclusion

In this tutorial, we covered how to type props in React components using TypeScript. You learned how to create a functional component, define prop types with an interface, and utilize those props within your component. Properly typing your props not only improves code readability but also enhances type safety, making your applications less prone to runtime errors.

Next steps include exploring more complex types, such as arrays or objects, and understanding how to manage props in more extensive applications.