Advanced React Development

Chapter 10: React and TypeScript

10.1 TypeScript with React

TypeScript adds static type checking to React, catching errors at compile time and improving developer experience.

// Typed component props
interface ButtonProps {
    label: string;
    onClick: () => void;
    disabled?: boolean;
    variant?: 'primary' | 'secondary';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
    return (
        <button
            onClick={onClick}
            disabled={disabled}
            className={`btn btn-${variant}`}
        >
            {label}
        </button>
    );
}

10.2 Typing Hooks

// useState with types
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

// useRef with types
const inputRef = useRef<HTMLInputElement>(null);

// useReducer with types
interface State {
    count: number;
}

type Action = 
    | { type: 'increment' }
    | { type: 'decrement' }
    | { type: 'reset' };

function reducer(state: State, action: Action): State {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
    }
}

10.3 Typing Context

interface ThemeContextType {
    theme: 'light' | 'dark';
    toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

function useTheme() {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error('useTheme must be used within ThemeProvider');
    }
    return context;
}

10.4 Generic Components

interface ListProps<T> {
    items: T[];
    renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{renderItem(item)}</li>
            ))}
        </ul>
    );
}

// Usage
<List
    items={[{ id: 1, name: 'John' }]}
    renderItem={(user) => <span>{user.name}</span>}
/>