TS with React

TypeScript with React

React and TypeScript are considered a match made in heaven by modern developers.

Using TypeScript in React drastically reduces the number of runtime rendering errors.

It provides strict typing for your component props, state, and event handlers.

This structural safety improves SEO by ensuring stable, predictable page loads.

1. Typing Component Props

Props are the primary way data flows down through your React component tree.

By defining an interface for your props, you guarantee components receive correct data.

Your IDE will automatically provide auto-completion for these properties.

It completely eliminates the need for the older PropTypes library.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function CustomButton({ label, onClick, disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

2. Typing the useState Hook

The useState hook can often infer its own type based on the initial value.

However, for complex objects or null initializations, you must provide a generic type.

This prevents you from accidentally setting state to an invalid data structure.

Predictable state transitions lead to much smoother user experiences.

import { useState } from 'react';

interface User { name: string; age: number; }
function Profile() {
  // Explicitly typing the state to accept a User object or null
  const [user, setUser] = useState<User | null>(null);
  return <div>{user ? user.name : "Loading..."}</div>;
}

3. Typing Event Handlers

Handling DOM events like clicks and form submissions requires specific React event types.

React provides built-in types like MouseEvent and ChangeEvent for this purpose.

Typing events correctly ensures you access the exact properties available on the event target.

This significantly speeds up form development and input validation.

import { ChangeEvent, useState } from 'react';

function SearchInput() {
  const [query, setQuery] = useState("");
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };
  return <input type="text" value={query} onChange={handleChange} />;
}

4. Final Thoughts

TypeScript completely transforms the way you write and maintain React code.

It takes slightly more time upfront, but saves countless debugging hours later.

Next, we will look at setting up essential tooling and infrastructure!