TypeScript and React: Typing Props and State Correctly

TypeScript has become an essential tool for building robust React applications, offering type safety that helps catch errors during development rather than in production. One of the most critical areas where TypeScript shines in React is in properly typing component props and state. This guide will walk you through best practices for typing these fundamental React concepts.

Introduction

When working with React and TypeScript, properly typing your component props and state can significantly improve your development experience. Type checking helps prevent common bugs, provides better IDE support, and serves as documentation for your components. Whether you're migrating a JavaScript project to TypeScript or starting fresh, understanding how to type props and state correctly is crucial.

Typing Component Props

Props are the primary way components communicate in React. With TypeScript, we can define exactly what props a component expects and their types.

Basic Prop Types

For functional components, we typically use either an interface or type alias to define props:

interface ButtonProps {
  text: string;
  disabled?: boolean;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ text, disabled = false, onClick }) => {
  return (
    <button disabled={disabled} onClick={onClick}>
      {text}
    </button>
  );
};

Key points:

• Use interface or type to define prop shapes
• Make optional props explicit with ?
• Provide default values for optional props in the function parameters
• Consider using React.FC type for functional components (though this is somewhat opinionated)

Advanced Prop Patterns

For more complex scenarios, TypeScript offers powerful features:

type Theme = 'light' | 'dark';

interface CardProps {
  children: React.ReactNode;
  theme?: Theme;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
  style?: React.CSSProperties;
}

const Card: React.FC<CardProps> = ({
  children,
  theme = 'light',
  size = 'md',
  className = '',
  style = {},
}) => {
  // Component implementation
};

This example demonstrates:

• Union types for constrained values ('light' | 'dark')
• Built-in React types like React.ReactNode and React.CSSProperties
• Comprehensive prop typing with sensible defaults

Typing Component State

State management in React components benefits greatly from TypeScript's type system. Whether you're using useState, useReducer, or class component state, proper typing is essential.

Typing useState

The useState hook can be explicitly typed in several ways:

// Inferring type from initial value
const [count, setCount] = useState(0); // Type inferred as number

// Explicitly typing when initial value is null
interface User {
  id: string;
  name: string;
  email: string;
}

const [user, setUser] = useState<User | null>(null);

// Complex state with multiple properties
interface FormState {
  username: string;
  password: string;
  rememberMe: boolean;
}

const [form, setForm] = useState<FormState>({
  username: '',
  password: '',
  rememberMe: false,
});

Typing useReducer

For more complex state logic, useReducer benefits greatly from TypeScript:

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

interface CounterState {
  count: number;
}

const initialState: CounterState = { count: 0 };

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

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  // Component implementation
};

This pattern provides:

• Type safety for all possible actions
• Clear state shape definition
• Compile-time checking of action types and payloads

Handling Children and Event Props

Two common areas that often need special attention are typing children and event handlers.

Typing Children

React provides several types for working with children:

interface LayoutProps {
  header: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactElement;
}

const Layout: React.FC<LayoutProps> = ({ header, children, footer }) => {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      {footer && <footer>{footer}</footer>}
    </div>
  );
};

Typing Event Handlers

Properly typing event handlers prevents common mistakes:

interface InputProps {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
}

const Input: React.FC<InputProps> = ({ value, onChange, onBlur }) => {
  return (
    <input
      type="text"
      value={value}
      onChange={onChange}
      onBlur={onBlur}
    />
  );
};

React provides specific event types for each HTML element, ensuring you access the correct properties on event objects.

Conclusion

Properly typing props and state in React with TypeScript leads to more maintainable, error-resistant code. By leveraging TypeScript's type system, you can:

1. Catch errors during development rather than in production
2. Improve code documentation through explicit type definitions
3. Enhance developer experience with better IDE support
4. Create more predictable component APIs

Start with simple interfaces for props and basic state typing, then gradually adopt more advanced patterns as needed. Remember that TypeScript in React is meant to help you, not hinder you - if you find yourself fighting the type system, it might be a sign that your component design could be simplified.

As you become more comfortable with TypeScript and React, you'll discover even more ways to leverage the type system, such as utility types (Partial, Pick, Omit) for props, or more sophisticated state management patterns. The investment in learning these typing techniques pays dividends in application quality and developer productivity.