TypeScript with React: Type-Safe Components

TypeScript makes React development safer. Here’s how to type your components properly.

Function Components

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

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
};

useState with Types

interface User { id: number; name: string; }

const [user, setUser] = useState<User | null>(null);
const [users, setUsers] = useState<User[]>([]);

Event Handlers

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

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

References

• React TypeScript Cheatsheet