React with TypeScript

What is with TypeScript in React?

TypeScript adds static types to React. Props get an interface, hooks are usually inferred, and the compiler catches missing props, wrong types and typos before the code runs.

Why with TypeScript matters

Most React runtime errors are shape errors — a field that is undefined, a string where an object was expected. TypeScript moves that whole class of bug into the editor.

with TypeScript example

interface JobCardProps {
  title: string;
  stipend?: number;
  tags: string[];
  onSave: (id: string) => void;
  children?: React.ReactNode;
}

export function JobCard({ title, stipend = 0, tags, onSave }: JobCardProps) {
  const [saved, setSaved] = useState<boolean>(false);
  const inputRef = useRef<HTMLInputElement>(null);

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

Key points to remember

• Start a project with the react-ts template rather than converting later.
• Annotate useState only when the initial value does not describe the full type.
• Avoid any — it silently disables checking for everything downstream.

Types you will use constantly

Common mistakes with with TypeScript

• Typing a ref as HTMLElement when you need input-specific properties like value.
• Reaching for React.FC, which adds little and complicates generics.