React Props & State Typing

Props Interface

interface CardProps {
  title: string;
  description?: string;
}

const Card: React.FC<CardProps> = ({ title, description }) => (
  <div>
    <h2>{title}</h2>
    {description && <p>{description}</p>}
  </div>
);

State with Union Types

type Status = "idle" | "loading" | "error";
const [status, setStatus] = useState<Status>("idle");

Context Typing

interface ThemeContextProps { dark: boolean; toggle(): void; }
const ThemeContext = React.createContext<ThemeContextProps | undefined>(undefined);