Mastering TypeScript with React: A Step-by-Step Guide

🙋🏻‍♀️ Introduction

TypeScript adds static typing to JavaScript, which helps catch potential bugs before they even run. When paired with React, TypeScript enhances your components by enforcing type safety. In this article, we'll walk through the essential concepts for using TypeScript with React.

⚛️ How to Use TypeScript with React?

First, you need to install TypeScript in a React project. If you're starting from scratch, create a new React app with TypeScript enabled:

npx create-react-app my-app --template typescript

For an existing project, you can add TypeScript by running:

npm install typescript @types/react @types/react-dom

Now, you can start using .tsx files instead of .js or .jsx, and your React components will benefit from TypeScript’s features.

Types for React Component Props

When you’re defining a component in React, you can specify the types for its props to make the usage of the component clearer and safer. Here’s a basic example:

type UserProps = {
  name: string;
  age: number;
};

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

In this example, UserCard expects two props: name (a string) and age (a number). If you try to pass incorrect types, TypeScript will show an error.

ReactNode Vs ReactElement

You might wonder when to use ReactNode or ReactElement for typing React components.

• ReactNode: Represents anything that can be rendered by React. This includes strings, numbers, JSX, arrays, and null.

• ReactElement: Refers to an actual React element, which is more specific and doesn’t cover strings or null.

Example:

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

ReactNode is used here because children can be any renderable element, not just React elements.

Type Vs Interface

When defining the shape of props or other objects, both type and interface can be used. So, what’s the difference?

• Type: Best for creating union types or more complex combinations.
• Interface: Often better when you plan to extend or implement additional types.

Here’s a comparison:

// Using type
type ButtonProps = {
  label: string;
  onClick: () => void;
};

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

While both are similar, interface can be extended more naturally:

interface IconButtonProps extends ButtonProps {
  icon: string;
}

How to Type Props with TypeScript?

To type props for a component, declare a type or interface and pass it as the type annotation for the component's props.

Example:

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

How to Type Functional Component Props?

To type a functional component's props, you can use React.FC<Props> or declare the props explicitly. While React.FC was commonly used, now many prefer explicit types.

Here’s an example using explicit types:

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

In this example, Badge has two props, text and color, both typed as strings.

⛓ React Hooks with TypeScript

React hooks can also be typed in TypeScript to ensure type safety for the state and effect logic in your components.

Here’s how to use useState and useEffect with TypeScript:

import { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

In this example, the useState hook is typed to ensure count is always a number, and useEffect logs the current count whenever it changes.

By following these best practices, you’ll be able to harness the full potential of TypeScript in your React applications, leading to more robust, maintainable code.

And before you go, if you’re also working with SQL, check out our Ultimate SQL Cheatsheet to improve your SQL skills with both basic and advanced queries!