Introduction to TypeScript with React

Introduction

As applications grow, managing large codebases can become difficult. Bugs often occur due to incorrect data types or unexpected values. TypeScript helps solve this problem by adding static typing to JavaScript.

When used with React, TypeScript improves code quality, readability, and maintainability by catching errors during development instead of at runtime.

What Is TypeScript?

TypeScript is a superset of JavaScript that adds type checking. It allows developers to define variable types, function parameters, and component props.

TypeScript code is compiled into regular JavaScript, so it runs in the browser just like normal JS.

Why Use TypeScript with React?

Using TypeScript in React applications provides benefits such as:

• Early error detection during development

• Better code documentation through types

• Improved IDE support and auto-completion

• Safer refactoring in large applications

These benefits are especially useful in team projects.

Typing Props in a Component

In TypeScript, component props can be defined using an interface or type.

interface ButtonProps {
  label: string;
}

function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

This ensures the component receives the correct data type.

Typing State with useState

You can specify the data type of state.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState<number>(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

TypeScript ensures count is always a number.

Typing Event Handlers

Event types can also be defined.

function InputField() {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  return <input onChange={handleChange} />;
}

This provides better type safety when working with events.

When to Use TypeScript

TypeScript is especially useful when:

• Working on large projects

• Collaborating with multiple developers

• Maintaining long-term applications

For very small projects, plain JavaScript may be sufficient.

Common Mistakes to Avoid

• Using any type too often

• Ignoring type errors instead of fixing them

• Overcomplicating types unnecessarily

Summary

In this chapter, you learned how TypeScript enhances React development by adding static typing. You saw how to type props, state, and event handlers, and understood when TypeScript is most beneficial. TypeScript helps build safer, more maintainable React applications.