How to set up React with TypeScript from scratch

· Category: React

Short answer

You can scaffold a React TypeScript project with Vite or Create React App, then type components, props, events, and hooks for compile-time safety.

Steps

  1. Run npm create vite@latest my-app -- --template react-ts.
  2. Define props as interfaces or type aliases.
  3. Type event handlers with React.MouseEvent, React.ChangeEvent, etc.
  4. Use generics for custom hooks and polymorphic components.

Example

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

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

Tips

  • Enable strict mode in tsconfig.json for maximum safety.
  • Use React.Node for children and React.ElementType for polymorphic as props.
  • Avoid any; prefer unknown with type narrowing.