---

Source: z2h.fyi/cheatsheets/typescript-react — Zero to Hero cheatsheets for developers.

TypeScript with React

Quick Overview

Combine TypeScript’s static typing with React’s component model to catch bugs early and improve IDE support.

Getting Started

• Install with npm i -D typescript @types/react @types/react-dom.
• Ensure tsconfig.json has "jsx": "react-jsx".

Core Concepts

Concept	Description
Props Interface	Define shape of component props.
State Types	Type the state object in useState.
FC vs. Function	Use React.FC<Props> for functional components.
Generics in Hooks	Type generic data fetching hooks.

Essential Commands / Syntax

• interface Props { title: string; count?: number; }
• const MyComp: React.FC<Props> = ({title, count = 0}) => {...}
• const [value, setValue] = useState<string>('');
• function useFetch<T>(url: string): { data: T | null; error: Error | null } { … }

Common Patterns

• Typed Form Handlers – create a generic handleChange<T> that updates form state.
• Component Library – export reusable typed components (Button, Card).
• Context API – type the context value with an interface.

Gotchas & Tips

• Avoid using any; prefer unknown or generic constraints.
• Remember that default props need explicit typing.
• Use as const for literal props to preserve exact types.

Next Steps

• Read the official React + TypeScript docs.
• Try the “Typed React” course on Frontend Masters.