TypeScript Guide for React Developers

TypeScript adds powerful type checking to JavaScript, making your React applications more robust and maintainable.

Why TypeScript?

Benefits

• Type Safety: Catch errors before runtime
• Better IDE Support: Excellent autocomplete and refactoring
• Self-Documenting: Types serve as documentation
• Fewer Bugs: Prevent entire classes of errors

Basic Types

Primitives

const name: string = "Alice";
const age: number = 30;
const active: boolean = true;
const notDefined: undefined = undefined;
const nothingLike: null = null;

Interfaces

interface User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com"
};

React with TypeScript

Typing Components

interface Props {
  title: string;
  count: number;
  onIncrement: (value: number) => void;
}

function Counter({ title, count, onIncrement }: Props) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Count: {count}</p>
      <button onClick={() => onIncrement(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Event Typing

import { ChangeEvent, FormEvent } from 'react';

function LoginForm() {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.currentTarget.value);
  };

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Handle submission
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
      <button type="submit">Login</button>
    </form>
  );
}

Advanced Types

Generics

function getProperty<T>(obj: T, key: keyof T): unknown {
  return obj[key];
}

interface Book {
  title: string;
  pages: number;
}

const book: Book = { title: "TypeScript Guide", pages: 400 };
const title = getProperty(book, "title"); // ✅ Type safe

Union Types

type Status = "loading" | "success" | "error";

function getStatusMessage(status: Status): string {
  switch (status) {
    case "loading":
      return "Loading...";
    case "success":
      return "Success!";
    case "error":
      return "Error occurred";
  }
}

Best Practices

1. Enable strict mode in tsconfig.json
2. Use interfaces for object shapes
3. Avoid any type at all costs
4. Use discriminated unions for complex types
5. Leverage type inference when possible

TypeScript might seem verbose at first, but it pays dividends in code quality and maintainability!