TypeScript with React

TypeScript with React: Typed Components, Props, Hooks, & Events

TypeScript seamlessly integrates with React, allowing developers to type component Props, State, Context, Hooks, and DOM Event Handlers.

Typed React Component Architecture

import React, { useState, ChangeEvent, FormEvent } from "react";

// Props Contract
interface UserCardProps {
  id: string;
  name: string;
  role: "Admin" | "User" | "Guest";
  onRoleChange: (newRole: "Admin" | "User" | "Guest") => void;
}

export const UserCard: React.FC<UserCardProps> = ({ id, name, role, onRoleChange }) => {
  // Generic State Annotation
  const [isEditing, setIsEditing] = useState<boolean>(false);
  const [selectedRole, setSelectedRole] = useState<"Admin" | "User" | "Guest">(role);

  const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
    setSelectedRole(event.target.value as "Admin" | "User" | "Guest");
  };

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();
    onRoleChange(selectedRole);
    setIsEditing(false);
  };

  return (
    <div className="user-card">
      <h3>{name} (ID: {id})</h3>
      <p>Current Role: {role}</p>

      {isEditing ? (
        <form onSubmit={handleSubmit}>
          <select value={selectedRole} onChange={handleSelectChange}>
            <option value="Admin">Admin</option>
            <option value="User">User</option>
            <option value="Guest">Guest</option>
          </select>
          <button type="submit">Save</button>
        </form>
      ) : (
        <button onClick={() => setIsEditing(true)}>Edit Role</button>
      )}
    </div>
  );
};

Best Practices & Gotchas

• Type Form Events explicitly: Use React.ChangeEvent<HTMLInputElement> and React.FormEvent<HTMLFormElement> for event handlers.
• Type useRef for DOM Elements: const inputRef = useRef<HTMLInputElement>(null);.
• Prefer React.ReactNode for Children: When component accepts child elements, use children?: React.ReactNode.

Self-Check Challenge

How do you type state in React when a value starts as null but will later hold a User object? (Answer: useState<User | null>(null))