TypeScript has become an essential tool for building robust React applications. In this article, we'll explore how to set up a modern React application with TypeScript from scratch.

Why TypeScript?

TypeScript adds static type-checking to JavaScript, which helps catch errors early in the development process. This is particularly useful in large React applications where components can have complex prop structures.

Setting Up Your Project

Let's start by creating a new React application with TypeScript support:

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

This command creates a new React application with TypeScript configuration already set up. The template includes TypeScript definitions for React and other dependencies.

Creating Type-Safe Components

One of the main benefits of TypeScript is the ability to define the shape of your component props:

interface ButtonProps {
  text: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

const Button: React.FC = ({ 
  text, 
  onClick, 
  variant = 'primary' 
}) => {
  return (
    
      {text}
    
  );
};

With this approach, TypeScript will ensure that all required props are provided when using the Button component, and will show errors if the wrong types are passed.

Managing State with TypeScript

TypeScript also helps with state management in React. Here's an example using useState with proper typing:

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

const UserProfile: React.FC = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    // Fetch user data
    fetchUser()
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(error => {
        console.error(error);
        setLoading(false);
      });
  }, []);
  
  if (loading) return 
Loading...
;
  if (!user) return 
User not found
;
  
  return (
    

      
{user.name}
      
{user.email}
    
  );
};

Conclusion

TypeScript provides significant benefits when building React applications, especially as they grow in complexity. By catching type errors during development, you can avoid many common bugs and improve the overall quality of your code.

In future articles, we'll explore more advanced TypeScript patterns for React, including generics, utility types, and integration with state management libraries.