TypeScript Integration with React Examples

Introduction

Integrating TypeScript with React can greatly enhance your development experience by providing type safety and improving code maintainability. This allows developers to catch errors early and document their code more effectively. Here are three practical examples of TypeScript integration with React that demonstrate how to leverage TypeScript’s features in a React application.

Example 1: Creating a Typed Functional Component

Context

This example demonstrates how to create a functional component in React using TypeScript. Typed components help ensure that the props passed to the component are of the correct type, providing clarity and reducing runtime errors.

import React from 'react';

// Define the props interface
interface GreetingProps {
  name: string;
  age?: number; // Age is optional
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
};

export default Greeting;

Notes

• The GreetingProps interface defines the types for the props. The age prop is optional, as indicated by the question mark (?).
• Using React.FC (Function Component) ensures that the component adheres to the functional component type.

Example 2: Managing State with useState Hook

Context

In this example, we’ll create a simple counter component that uses the useState hook with TypeScript. This demonstrates how to maintain state in a functional component while ensuring type safety.

import React, { useState } from 'react';

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

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Notes

• The useState hook is typed with <number> to ensure that the state variable count is always a number.
• The component includes two buttons to increment and decrement the count.

Example 3: Fetching Data with Axios

Context

This example illustrates how to fetch data from an API using Axios in a React component with TypeScript. It shows how to handle asynchronous data fetching while defining types for the response data.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get<User[]>(
          'https://jsonplaceholder.typicode.com/users'
        );
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} - {user.email}</li>
      ))}
    </ul>
  );
};

export default UserList;

Notes

• The User interface defines the structure of the data being fetched from the API.
• The component uses the useEffect hook to fetch data when it mounts, ensuring efficient data handling.
• Loading state is managed to provide feedback to the user while data is being fetched.

These examples of TypeScript integration with React illustrate how to create type-safe components, manage state, and handle API calls effectively, enhancing the overall development experience.