TypeScript React Patterns v2.0.0
Type-safe React with TypeScript.
Overview
- Component typing (props interface, children, forwardRef, polymorphic, rest props)
- Hook typing (useState, useRef, useReducer, useCallback, useMemo, custom hooks)
- Event handling (form, click, keyboard events)
- Ref typing (DOM elements, callback refs, useImperativeHandle)
- Generic components (list, select, table, constraints)
- Context & state (typed provider, useReducer with discriminated unions)
- Utility types (ComponentProps, Pick/Omit, discriminated unions)
- 33 rules across 7 categories
Categories
1. Component Typing (Critical)
Props interface, children types, default props, forwardRef, polymorphic, FC vs function, display name, rest props.
2. Hook Typing (Critical)
useState, useRef, useReducer, useCallback, useMemo, useContext, custom hooks, generic hooks.
3. Event Handling (High)
Handler types, click events, form events, keyboard events.
4. Ref Typing (High)
DOM element refs, callback refs, useImperativeHandle.
5. Generic Components (Medium)
Generic list, select, table, constraints with extends/keyof.
6. Context & State (Medium)
Typed context creation, provider pattern, context with useReducer.
7. Utility Types (Low)
ComponentPropsWithoutRef, Pick/Omit/Partial, discriminated unions.
Usage
Type this React component properly
Fix TypeScript errors in my React code
Create a generic table component
Set up typed Context with useReducer