TypeScript Basics for React Developers

// JavaScript (no types)
function greet(name) {
  return "Hello, " + name;
}

greet(42); // Works but wrong! Should be string

// TypeScript (with types)
function greet(name: string): string {
  return "Hello, " + name;
}

greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

// React Component with TypeScript
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean; // Optional prop
}

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

// TypeScript catches errors
<Button label="Click me" onClick={() => {}} /> // ✅ Correct
<Button label={123} onClick={() => {}} /> // ❌ Error: label must be string
<Button /> // ❌ Error: label and onClick are required

TypeScript adds type annotations to catch errors before runtime. In React, you type props using interfaces. Optional props use '?' and can have default values.

// Primitive types
let name: string = "Alice";
let age: number = 30;
let isActive: boolean = true;
let data: null = null;
let value: undefined = undefined;

// Type inference (TypeScript guesses the type)
let city = "New York"; // TypeScript knows this is string
// city = 123; // Error: can't assign number to string

// Union types (can be multiple types)
let id: string | number = "abc123";
id = 12345; // Also valid

// Arrays
let fruits: string[] = ["apple", "banana", "orange"];
let numbers: Array<number> = [1, 2, 3, 4, 5];

// Objects with interface
interface User {
  name: string;
  age: number;
  email?: string; // Optional property
}

let user: User = {
  name: "John",
  age: 25,
  // email is optional, so we can omit it
};

// Functions
function add(a: number, b: number): number {
  return a + b;
}

function logMessage(message: string): void {
  console.log(message);
  // No return value
}

function throwError(message: string): never {
  throw new Error(message);
  // Never returns (always throws)

TypeScript has many built-in types. Use type annotations explicitly or let TypeScript infer types. Union types allow multiple types. Interfaces define object shapes.

// Typing Function Components

// Props interface
interface CardProps {
  title: string;
  description?: string;
  children?: React.ReactNode;
  onClick?: () => void;
}

function Card({ title, description, children, onClick }: CardProps) {
  return (
    <div onClick={onClick}>
      <h2>{title}</h2>
      {description && <p>{description}</p>}
      {children}
    </div>
  );
}

// Typing state
function Counter() {
  const [count, setCount] = useState<number>(0);
  //                  ^^^^^ Explicit type (optional but good practice)
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// Typing event handlers
function Form() {
  const [email, setEmail] = useState<string>("");
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };
  
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(email);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

// Typing children
interface LayoutProps {
  children: React.ReactNode; // Can be any valid React child
}

function Layout({ children }: LayoutProps) {
  return <div className="layout">{children}</div>;
}

// Typing refs
function InputWithRef() {
  const inputRef = useRef<HTMLInputElement>(null);
  
  const focusInput = () => {
    inputRef.current?.focus(); // Optional chaining for safety
  };
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

Type React components with interfaces for props. Type state with useState generics. Type events with React event types. Use React.ReactNode for children. Type refs with the HTML element type.

// Optional and default props
interface ButtonProps {
  label: string;
  variant?: "primary" | "secondary" | "outline";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
}

function Button({
  label,
  variant = "primary", // Default value
  size = "md",
  disabled = false,
}: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
    >
      {label}
    </button>
  );
}

// Union types for variants
type Status = "loading" | "success" | "error";

interface StatusBadgeProps {
  status: Status;
}

function StatusBadge({ status }: StatusBadgeProps) {
  const colors = {
    loading: "gray",
    success: "green",
    error: "red",
  };
  
  return (
    <span className={`badge badge-${colors[status]}`}>
      {status}
    </span>
  );
}

// Typing custom hooks
function useCounter(initialValue: number = 0) {
  const [count, setCount] = useState<number>(initialValue);
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
}

// Using the hook
function App() {
  const { count, increment, decrement } = useCounter(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

// Typing API responses
interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  
  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then((res) => res.json())
      .then((data: User) => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);
  
  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Common patterns include optional props with defaults, union types for variants, typing custom hooks, and handling async data with proper types. TypeScript makes these patterns safer and more maintainable.