📘 React Class Components: Legacy Type Safety

🎯 Introduction

Welcome to the world of React Class Components with TypeScript! 🎉 While functional components have taken the spotlight in recent years, understanding class components is still crucial for maintaining legacy code and working with older React applications.

You’ll discover how TypeScript transforms class components from error-prone JavaScript into bulletproof, type-safe building blocks 🛡️. Whether you’re maintaining existing applications 🔧, working with third-party libraries 📚, or simply want to understand React’s evolution, mastering class component typing is essential!

By the end of this tutorial, you’ll feel confident typing class components like a pro! Let’s dive into the legacy magic! 🏊‍♂️

📚 Understanding React Class Components

🤔 What are React Class Components?

React Class Components are like traditional JavaScript classes that extend React.Component 🏗️. Think of them as blueprints for creating reusable UI components that can hold state and respond to lifecycle events.

In TypeScript terms, class components provide excellent type safety for:

• ✨ Props validation and autocomplete
• 🚀 State management with strict types
• 🛡️ Method signatures and return types
• 📖 Clear component contracts

💡 Why Use TypeScript with Class Components?

Here’s why developers love TypeScript with class components:

1. Type Safety 🔒: Catch prop and state errors at compile-time
2. Better IDE Support 💻: Amazing autocomplete and refactoring
3. Legacy Code Maintenance 📖: Easier to understand and modify old code
4. Team Collaboration 🔧: Clear contracts between team members

Real-world example: Imagine maintaining a large e-commerce dashboard 🛒. With TypeScript, you can safely refactor product listing components without breaking anything!

🔧 Basic Syntax and Usage

📝 Simple Class Component

Let’s start with a friendly example:

import React, { Component } from 'react';

// 🎯 Define our props interface
interface GreetingProps {
  name: string;        // 👤 User's name
  age?: number;        // 🎂 Optional age
  emoji?: string;      // 😊 Fun emoji
}

// 🎨 Define our state interface
interface GreetingState {
  isVisible: boolean;  // 👁️ Visibility toggle
  clickCount: number;  // 🔢 Track clicks
}

// 🏗️ Our typed class component
class Greeting extends Component<GreetingProps, GreetingState> {
  // 🎬 Initialize state
  state: GreetingState = {
    isVisible: true,
    clickCount: 0
  };

  // 🎯 Handle button click
  handleClick = (): void => {
    this.setState(prevState => ({
      clickCount: prevState.clickCount + 1,
      isVisible: !prevState.isVisible
    }));
  };

  // 🎨 Render method
  render(): JSX.Element {
    const { name, age, emoji = '👋' } = this.props;
    const { isVisible, clickCount } = this.state;

    return (
      <div className="greeting-card">
        {isVisible && (
          <h1>{emoji} Hello, {name}!</h1>
        )}
        {age && <p>🎂 Age: {age}</p>}
        <button onClick={this.handleClick}>
          {isVisible ? 'Hide' : 'Show'} Greeting
        </button>
        <p>🔢 Clicks: {clickCount}</p>
      </div>
    );
  }
}

💡 Explanation: Notice how we define separate interfaces for props and state, then pass them as type parameters to Component<Props, State>!

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Component with default props
interface ButtonProps {
  text: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
  disabled?: boolean;
}

class Button extends Component<ButtonProps> {
  // 🎨 Default props (typed!)
  static defaultProps: Partial<ButtonProps> = {
    variant: 'primary',
    disabled: false
  };

  render(): JSX.Element {
    const { text, variant, onClick, disabled } = this.props;
    
    return (
      <button 
        className={`btn btn-${variant}`}
        onClick={onClick}
        disabled={disabled}
      >
        {text}
      </button>
    );
  }
}

// 🔄 Pattern 2: Event handlers with proper typing
interface FormProps {
  onSubmit: (data: FormData) => void;
}

interface FormData {
  username: string;
  email: string;
}

class LoginForm extends Component<FormProps, FormData> {
  state: FormData = {
    username: '',
    email: ''
  };

  // 🎯 Typed event handler
  handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = event.target;
    this.setState({ [name]: value } as Pick<FormData, keyof FormData>);
  };

  // 📤 Form submission
  handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    this.props.onSubmit(this.state);
  };
}

💡 Practical Examples

🛒 Example 1: Shopping Cart Component

Let’s build something real:

// 🛍️ Define our product and cart interfaces
interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
  emoji: string; // Every product needs an emoji! 
}

interface CartItem extends Product {
  quantity: number;
}

interface CartProps {
  products: Product[];
  onCheckout: (items: CartItem[]) => void;
}

interface CartState {
  items: CartItem[];
  isOpen: boolean;
  total: number;
}

// 🛒 Shopping cart class component
class ShoppingCart extends Component<CartProps, CartState> {
  state: CartState = {
    items: [],
    isOpen: false,
    total: 0
  };

  // ➕ Add item to cart
  addToCart = (product: Product): void => {
    this.setState(prevState => {
      const existingItem = prevState.items.find(item => item.id === product.id);
      
      let updatedItems: CartItem[];
      if (existingItem) {
        // 🔄 Update quantity if item exists
        updatedItems = prevState.items.map(item =>
          item.id === product.id 
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      } else {
        // ✨ Add new item
        updatedItems = [...prevState.items, { ...product, quantity: 1 }];
      }

      // 💰 Calculate new total
      const total = updatedItems.reduce((sum, item) => 
        sum + (item.price * item.quantity), 0
      );

      console.log(`🛒 Added ${product.emoji} ${product.name} to cart!`);
      
      return { items: updatedItems, total };
    });
  };

  // 🗑️ Remove item from cart
  removeFromCart = (productId: string): void => {
    this.setState(prevState => {
      const updatedItems = prevState.items.filter(item => item.id !== productId);
      const total = updatedItems.reduce((sum, item) => 
        sum + (item.price * item.quantity), 0
      );
      
      return { items: updatedItems, total };
    });
  };

  // 🎯 Toggle cart visibility
  toggleCart = (): void => {
    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
  };

  // 💳 Handle checkout
  handleCheckout = (): void => {
    this.props.onCheckout(this.state.items);
    this.setState({ items: [], total: 0, isOpen: false });
  };

  // 🎨 Render cart items
  renderCartItems(): JSX.Element[] {
    return this.state.items.map(item => (
      <div key={item.id} className="cart-item">
        <span>{item.emoji} {item.name}</span>
        <span>Qty: {item.quantity}</span>
        <span>${(item.price * item.quantity).toFixed(2)}</span>
        <button onClick={() => this.removeFromCart(item.id)}>
          🗑️ Remove
        </button>
      </div>
    ));
  }

  // 🏗️ Main render method
  render(): JSX.Element {
    const { products } = this.props;
    const { isOpen, items, total } = this.state;

    return (
      <div className="shopping-cart">
        <button onClick={this.toggleCart} className="cart-toggle">
          🛒 Cart ({items.length}) - ${total.toFixed(2)}
        </button>

        {isOpen && (
          <div className="cart-dropdown">
            <h3>🛍️ Your Cart</h3>
            {items.length === 0 ? (
              <p>😔 Your cart is empty</p>
            ) : (
              <>
                {this.renderCartItems()}
                <div className="cart-total">
                  <strong>💰 Total: ${total.toFixed(2)}</strong>
                </div>
                <button onClick={this.handleCheckout} className="checkout-btn">
                  💳 Checkout
                </button>
              </>
            )}
          </div>
        )}

        <div className="products">
          <h2>🏪 Products</h2>
          {products.map(product => (
            <div key={product.id} className="product-card">
              <h3>{product.emoji} {product.name}</h3>
              <p>${product.price}</p>
              <button onClick={() => this.addToCart(product)}>
                ➕ Add to Cart
              </button>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

🎯 Try it yourself: Add quantity controls and a wishlist feature!

🎮 Example 2: Game Score Dashboard

Let’s make it fun:

// 🏆 Game interfaces
interface Player {
  id: string;
  name: string;
  avatar: string;
  level: number;
}

interface GameScore {
  playerId: string;
  score: number;
  timestamp: Date;
  achievements: string[];
}

interface LeaderboardProps {
  players: Player[];
  maxScores?: number;
}

interface LeaderboardState {
  scores: GameScore[];
  selectedPlayer: string | null;
  sortBy: 'score' | 'timestamp';
  isLoading: boolean;
}

// 🎮 Game leaderboard component
class GameLeaderboard extends Component<LeaderboardProps, LeaderboardState> {
  // 🎨 Default props
  static defaultProps: Partial<LeaderboardProps> = {
    maxScores: 10
  };

  state: LeaderboardState = {
    scores: [],
    selectedPlayer: null,
    sortBy: 'score',
    isLoading: false
  };

  // 🎬 Component lifecycle
  componentDidMount(): void {
    this.loadScores();
  }

  // 📊 Load scores (simulated API call)
  loadScores = async (): Promise<void> => {
    this.setState({ isLoading: true });
    
    // 🎯 Simulate API delay
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    const mockScores: GameScore[] = this.props.players.map(player => ({
      playerId: player.id,
      score: Math.floor(Math.random() * 10000),
      timestamp: new Date(),
      achievements: ['🌟 First Steps', '🏆 High Scorer']
    }));

    this.setState({ scores: mockScores, isLoading: false });
  };

  // 🔄 Sort scores
  sortScores = (scores: GameScore[]): GameScore[] => {
    return [...scores].sort((a, b) => {
      if (this.state.sortBy === 'score') {
        return b.score - a.score; // 📈 Highest first
      }
      return b.timestamp.getTime() - a.timestamp.getTime(); // 🕐 Latest first
    });
  };

  // 🎯 Handle player selection
  selectPlayer = (playerId: string): void => {
    this.setState(prevState => ({
      selectedPlayer: prevState.selectedPlayer === playerId ? null : playerId
    }));
  };

  // 📊 Get player details
  getPlayerDetails = (playerId: string): Player | undefined => {
    return this.props.players.find(player => player.id === playerId);
  };

  // 🎨 Render player score
  renderPlayerScore = (score: GameScore, index: number): JSX.Element => {
    const player = this.getPlayerDetails(score.playerId);
    if (!player) return <div key={score.playerId}>❌ Player not found</div>;

    const isSelected = this.state.selectedPlayer === score.playerId;
    const medalEmoji = index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : '🏅';

    return (
      <div 
        key={score.playerId}
        className={`score-row ${isSelected ? 'selected' : ''}`}
        onClick={() => this.selectPlayer(score.playerId)}
      >
        <div className="rank">{medalEmoji} #{index + 1}</div>
        <div className="player-info">
          <img src={player.avatar} alt={player.name} className="avatar" />
          <span>{player.name}</span>
        </div>
        <div className="score">🎯 {score.score.toLocaleString()}</div>
        <div className="level">🎊 Level {player.level}</div>
        
        {isSelected && (
          <div className="achievements">
            <h4>🏆 Achievements:</h4>
            {score.achievements.map((achievement, i) => (
              <span key={i} className="achievement">{achievement}</span>
            ))}
          </div>
        )}
      </div>
    );
  };

  // 🏗️ Main render
  render(): JSX.Element {
    const { maxScores } = this.props;
    const { scores, sortBy, isLoading } = this.state;

    if (isLoading) {
      return <div className="loading">⏳ Loading leaderboard...</div>;
    }

    const sortedScores = this.sortScores(scores).slice(0, maxScores);

    return (
      <div className="game-leaderboard">
        <h1>🏆 Game Leaderboard</h1>
        
        <div className="controls">
          <button 
            onClick={() => this.setState({ sortBy: 'score' })}
            className={sortBy === 'score' ? 'active' : ''}
          >
            📊 Sort by Score
          </button>
          <button 
            onClick={() => this.setState({ sortBy: 'timestamp' })}
            className={sortBy === 'timestamp' ? 'active' : ''}
          >
            🕐 Sort by Time
          </button>
          <button onClick={this.loadScores}>
            🔄 Refresh
          </button>
        </div>

        <div className="scores-list">
          {sortedScores.map((score, index) => 
            this.renderPlayerScore(score, index)
          )}
        </div>

        {scores.length === 0 && (
          <div className="empty-state">
            🎮 No scores yet! Start playing to see the leaderboard!
          </div>
        )}
      </div>
    );
  }
}

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Higher-Order Components (HOCs)

When you’re ready to level up, try this advanced pattern:

// 🎯 HOC for adding loading state
interface WithLoadingProps {
  isLoading: boolean;
}

function withLoading<P extends object>(
  WrappedComponent: React.ComponentType<P>
): React.ComponentType<P & WithLoadingProps> {
  
  return class WithLoadingComponent extends Component<P & WithLoadingProps> {
    render(): JSX.Element {
      const { isLoading, ...otherProps } = this.props;
      
      if (isLoading) {
        return <div className="loading">⏳ Loading...</div>;
      }
      
      return <WrappedComponent {...otherProps as P} />;
    }
  };
}

// 🪄 Using the HOC
interface UserListProps {
  users: User[];
}

class UserList extends Component<UserListProps> {
  render(): JSX.Element {
    return (
      <div>
        {this.props.users.map(user => (
          <div key={user.id}>👤 {user.name}</div>
        ))}
      </div>
    );
  }
}

// ✨ Enhanced component with loading
const UserListWithLoading = withLoading(UserList);

🏗️ Advanced Topic 2: Render Props Pattern

For the brave developers:

// 🚀 Render props for data fetching
interface DataFetcherProps<T> {
  url: string;
  children: (data: T | null, loading: boolean, error: string | null) => JSX.Element;
}

interface DataFetcherState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

class DataFetcher<T> extends Component<DataFetcherProps<T>, DataFetcherState<T>> {
  state: DataFetcherState<T> = {
    data: null,
    loading: false,
    error: null
  };

  async componentDidMount(): Promise<void> {
    this.fetchData();
  }

  fetchData = async (): Promise<void> => {
    this.setState({ loading: true, error: null });
    
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data, loading: false });
    } catch (error) {
      this.setState({ 
        error: error instanceof Error ? error.message : 'Unknown error',
        loading: false 
      });
    }
  };

  render(): JSX.Element {
    const { data, loading, error } = this.state;
    return this.props.children(data, loading, error);
  }
}

// 🎯 Usage with type safety
interface User {
  id: number;
  name: string;
  email: string;
}

const UserProfile: React.FC = () => (
  <DataFetcher<User[]> url="/api/users">
    {(users, loading, error) => {
      if (loading) return <div>⏳ Loading users...</div>;
      if (error) return <div>❌ Error: {error}</div>;
      if (!users) return <div>🤷‍♂️ No users found</div>;
      
      return (
        <div>
          {users.map(user => (
            <div key={user.id}>👤 {user.name} - {user.email}</div>
          ))}
        </div>
      );
    }}
  </DataFetcher>
);

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Incorrect State Updates

// ❌ Wrong way - mutating state directly!
class BadCounter extends Component<{}, { count: number }> {
  state = { count: 0 };

  increment = (): void => {
    this.state.count++; // 💥 Never mutate state directly!
    this.forceUpdate(); // 😰 This is a code smell!
  };
}

// ✅ Correct way - use setState!
class GoodCounter extends Component<{}, { count: number }> {
  state = { count: 0 };

  increment = (): void => {
    this.setState(prevState => ({
      count: prevState.count + 1 // ✨ Immutable update
    }));
  };
}

🤯 Pitfall 2: Not Binding Event Handlers

// ❌ Dangerous - 'this' context will be lost!
class BadButton extends Component<{ onClick: () => void }> {
  handleClick() { // 💥 Not bound properly!
    console.log(this); // undefined in strict mode!
    this.props.onClick(); // 💥 Error!
  }

  render(): JSX.Element {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

// ✅ Safe - proper binding methods!
class GoodButton extends Component<{ onClick: () => void }> {
  // 🎯 Method 1: Arrow function (recommended)
  handleClick = (): void => {
    console.log(this); // ✅ Correctly bound!
    this.props.onClick();
  };

  // 🎯 Method 2: Bind in constructor
  constructor(props: { onClick: () => void }) {
    super(props);
    this.handleClick2 = this.handleClick2.bind(this);
  }

  handleClick2(): void {
    this.props.onClick();
  }

  render(): JSX.Element {
    return (
      <div>
        <button onClick={this.handleClick}>✅ Arrow Function</button>
        <button onClick={this.handleClick2}>✅ Bound in Constructor</button>
      </div>
    );
  }
}

🔄 Pitfall 3: Memory Leaks with Timers

// ❌ Memory leak - timer not cleaned up!
class BadTimer extends Component<{}, { time: number }> {
  state = { time: 0 };

  componentDidMount(): void {
    setInterval(() => {
      this.setState({ time: Date.now() }); // 💥 Keeps running after unmount!
    }, 1000);
  }
}

// ✅ Proper cleanup!
class GoodTimer extends Component<{}, { time: number }> {
  private timerRef: number | null = null;
  
  state = { time: 0 };

  componentDidMount(): void {
    this.timerRef = window.setInterval(() => {
      this.setState({ time: Date.now() });
    }, 1000);
  }

  componentWillUnmount(): void {
    if (this.timerRef) {
      clearInterval(this.timerRef); // 🧹 Clean up!
      this.timerRef = null;
    }
  }

  render(): JSX.Element {
    return <div>⏰ Time: {new Date(this.state.time).toLocaleTimeString()}</div>;
  }
}

🛠️ Best Practices

1. 🎯 Define Clear Interfaces: Always type your props and state interfaces
2. 📝 Use Arrow Functions: Avoid binding issues with arrow function methods
3. 🛡️ Clean Up Resources: Always cleanup timers, subscriptions, and event listeners
4. 🎨 Extract Complex Logic: Move complex state logic to separate methods
5. ✨ Use Default Props: Provide sensible defaults with proper typing
6. 🔄 Avoid Direct State Mutation: Always use setState for immutable updates
7. 💡 Keep Render Pure: Render method should be side-effect free

🧪 Hands-On Exercise

🎯 Challenge: Build a Type-Safe Todo App Class Component

Create a complete todo application using class components:

📋 Requirements:

• ✅ Add, edit, and delete todos
• 🏷️ Categories (work, personal, shopping)
• 📅 Due dates with overdue indicators
• 🎯 Priority levels (low, medium, high)
• 📊 Progress statistics
• 💾 Local storage persistence
• 🎨 Each todo needs an emoji based on category!

🚀 Bonus Points:

• Add drag-and-drop reordering
• Implement undo/redo functionality
• Create export to JSON feature
• Add keyboard shortcuts

💡 Solution

// 🎯 Our type-safe todo app interfaces!
interface Todo {
  id: string;
  title: string;
  description?: string;
  completed: boolean;
  category: 'work' | 'personal' | 'shopping';
  priority: 'low' | 'medium' | 'high';
  dueDate?: Date;
  createdAt: Date;
  updatedAt: Date;
}

interface TodoAppProps {
  storageKey?: string;
}

interface TodoAppState {
  todos: Todo[];
  filter: 'all' | 'active' | 'completed';
  categoryFilter: Todo['category'] | 'all';
  searchTerm: string;
  editingId: string | null;
  showCompleted: boolean;
}

class TodoApp extends Component<TodoAppProps, TodoAppState> {
  static defaultProps: TodoAppProps = {
    storageKey: 'typescript-todos'
  };

  state: TodoAppState = {
    todos: [],
    filter: 'all',
    categoryFilter: 'all',
    searchTerm: '',
    editingId: null,
    showCompleted: true
  };

  // 🎬 Load todos from localStorage
  componentDidMount(): void {
    this.loadTodos();
  }

  // 💾 Save todos whenever they change
  componentDidUpdate(prevProps: TodoAppProps, prevState: TodoAppState): void {
    if (prevState.todos !== this.state.todos) {
      this.saveTodos();
    }
  }

  // 📂 Load from storage
  loadTodos = (): void => {
    try {
      const stored = localStorage.getItem(this.props.storageKey!);
      if (stored) {
        const todos = JSON.parse(stored).map((todo: any) => ({
          ...todo,
          createdAt: new Date(todo.createdAt),
          updatedAt: new Date(todo.updatedAt),
          dueDate: todo.dueDate ? new Date(todo.dueDate) : undefined
        }));
        this.setState({ todos });
      }
    } catch (error) {
      console.error('Failed to load todos:', error);
    }
  };

  // 💾 Save to storage
  saveTodos = (): void => {
    try {
      localStorage.setItem(
        this.props.storageKey!, 
        JSON.stringify(this.state.todos)
      );
    } catch (error) {
      console.error('Failed to save todos:', error);
    }
  };

  // ✨ Generate emoji based on category
  getCategoryEmoji = (category: Todo['category']): string => {
    const emojis = {
      work: '💼',
      personal: '🏠',
      shopping: '🛒'
    };
    return emojis[category];
  };

  // 🎯 Get priority color
  getPriorityColor = (priority: Todo['priority']): string => {
    const colors = {
      low: '#22c55e',
      medium: '#f59e0b',
      high: '#ef4444'
    };
    return colors[priority];
  };

  // ➕ Add new todo
  addTodo = (todoData: Omit<Todo, 'id' | 'createdAt' | 'updatedAt'>): void => {
    const newTodo: Todo = {
      ...todoData,
      id: Date.now().toString(),
      createdAt: new Date(),
      updatedAt: new Date()
    };

    this.setState(prevState => ({
      todos: [...prevState.todos, newTodo]
    }));
  };

  // ✏️ Update todo
  updateTodo = (id: string, updates: Partial<Todo>): void => {
    this.setState(prevState => ({
      todos: prevState.todos.map(todo =>
        todo.id === id 
          ? { ...todo, ...updates, updatedAt: new Date() }
          : todo
      ),
      editingId: null
    }));
  };

  // 🗑️ Delete todo
  deleteTodo = (id: string): void => {
    this.setState(prevState => ({
      todos: prevState.todos.filter(todo => todo.id !== id)
    }));
  };

  // ✅ Toggle completion
  toggleComplete = (id: string): void => {
    this.setState(prevState => ({
      todos: prevState.todos.map(todo =>
        todo.id === id 
          ? { ...todo, completed: !todo.completed, updatedAt: new Date() }
          : todo
      )
    }));
  };

  // 🔍 Filter todos
  getFilteredTodos = (): Todo[] => {
    const { todos, filter, categoryFilter, searchTerm } = this.state;
    
    return todos.filter(todo => {
      // Filter by completion status
      if (filter === 'active' && todo.completed) return false;
      if (filter === 'completed' && !todo.completed) return false;
      
      // Filter by category
      if (categoryFilter !== 'all' && todo.category !== categoryFilter) return false;
      
      // Filter by search term
      if (searchTerm && !todo.title.toLowerCase().includes(searchTerm.toLowerCase())) {
        return false;
      }
      
      return true;
    });
  };

  // 📊 Get statistics
  getStats = () => {
    const { todos } = this.state;
    const completed = todos.filter(t => t.completed).length;
    const overdue = todos.filter(t => 
      t.dueDate && t.dueDate < new Date() && !t.completed
    ).length;
    
    return {
      total: todos.length,
      completed,
      active: todos.length - completed,
      overdue,
      completionRate: todos.length > 0 ? Math.round((completed / todos.length) * 100) : 0
    };
  };

  // 🎨 Render todo item
  renderTodo = (todo: Todo): JSX.Element => {
    const { editingId } = this.state;
    const isOverdue = todo.dueDate && todo.dueDate < new Date() && !todo.completed;
    
    return (
      <div 
        key={todo.id}
        className={`todo-item ${todo.completed ? 'completed' : ''} ${isOverdue ? 'overdue' : ''}`}
      >
        <div className="todo-main">
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => this.toggleComplete(todo.id)}
          />
          
          <div className="todo-content">
            <div className="todo-header">
              <span className="category-emoji">
                {this.getCategoryEmoji(todo.category)}
              </span>
              <h3>{todo.title}</h3>
              <span 
                className="priority-badge"
                style={{ backgroundColor: this.getPriorityColor(todo.priority) }}
              >
                {todo.priority}
              </span>
            </div>
            
            {todo.description && (
              <p className="todo-description">{todo.description}</p>
            )}
            
            {todo.dueDate && (
              <div className="todo-due-date">
                🗓️ Due: {todo.dueDate.toLocaleDateString()}
                {isOverdue && <span className="overdue-badge">⚠️ Overdue</span>}
              </div>
            )}
          </div>
          
          <div className="todo-actions">
            <button onClick={() => this.setState({ editingId: todo.id })}>
              ✏️ Edit
            </button>
            <button onClick={() => this.deleteTodo(todo.id)}>
              🗑️ Delete
            </button>
          </div>
        </div>
      </div>
    );
  };

  // 🏗️ Main render
  render(): JSX.Element {
    const { filter, categoryFilter, searchTerm } = this.state;
    const filteredTodos = this.getFilteredTodos();
    const stats = this.getStats();

    return (
      <div className="todo-app">
        <header className="app-header">
          <h1>📝 TypeScript Todo App</h1>
          
          {/* 📊 Statistics */}
          <div className="stats">
            <div className="stat">
              <span className="stat-value">{stats.total}</span>
              <span className="stat-label">Total</span>
            </div>
            <div className="stat">
              <span className="stat-value">{stats.active}</span>
              <span className="stat-label">Active</span>
            </div>
            <div className="stat">
              <span className="stat-value">{stats.completed}</span>
              <span className="stat-label">Completed</span>
            </div>
            <div className="stat">
              <span className="stat-value">{stats.completionRate}%</span>
              <span className="stat-label">Done</span>
            </div>
            {stats.overdue > 0 && (
              <div className="stat overdue">
                <span className="stat-value">{stats.overdue}</span>
                <span className="stat-label">Overdue</span>
              </div>
            )}
          </div>
        </header>

        {/* 🔍 Filters */}
        <div className="filters">
          <div className="filter-group">
            <button 
              className={filter === 'all' ? 'active' : ''}
              onClick={() => this.setState({ filter: 'all' })}
            >
              📋 All
            </button>
            <button 
              className={filter === 'active' ? 'active' : ''}
              onClick={() => this.setState({ filter: 'active' })}
            >
              ⏳ Active
            </button>
            <button 
              className={filter === 'completed' ? 'active' : ''}
              onClick={() => this.setState({ filter: 'completed' })}
            >
              ✅ Completed
            </button>
          </div>

          <select 
            value={categoryFilter}
            onChange={(e) => this.setState({ 
              categoryFilter: e.target.value as Todo['category'] | 'all' 
            })}
          >
            <option value="all">🏷️ All Categories</option>
            <option value="work">💼 Work</option>
            <option value="personal">🏠 Personal</option>
            <option value="shopping">🛒 Shopping</option>
          </select>

          <input
            type="text"
            placeholder="🔍 Search todos..."
            value={searchTerm}
            onChange={(e) => this.setState({ searchTerm: e.target.value })}
          />
        </div>

        {/* 📝 Todo List */}
        <div className="todos-container">
          {filteredTodos.length === 0 ? (
            <div className="empty-state">
              {this.state.todos.length === 0 ? (
                <p>🎉 No todos yet! Add your first task above.</p>
              ) : (
                <p>🔍 No todos match your current filters.</p>
              )}
            </div>
          ) : (
            filteredTodos.map(this.renderTodo)
          )}
        </div>
      </div>
    );
  }
}

// 🎮 Usage example
const App: React.FC = () => {
  return <TodoApp storageKey="my-awesome-todos" />;
};

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

• ✅ Create type-safe class components with confidence 💪
• ✅ Define proper prop and state interfaces that prevent bugs 🛡️
• ✅ Handle events with correct typing like a pro 🎯
• ✅ Manage component lifecycle safely 🔄
• ✅ Avoid common pitfalls that trip up beginners ⚠️
• ✅ Apply best practices in legacy codebases 🏗️
• ✅ Debug class component issues efficiently 🐛

Remember: Class components might be “legacy,” but they’re still powerful tools in your TypeScript arsenal! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered React Class Components with TypeScript!

Here’s what to do next:

1. 💻 Practice with the todo app exercise above
2. 🏗️ Refactor an existing class component project
3. 📚 Move on to our next tutorial: React Hooks: Type-Safe Functional Components
4. 🌟 Share your class component knowledge with your team!
5. 🔄 Try converting a class component to a functional component for comparison

Remember: Understanding class components makes you a more complete React developer. Even in the age of hooks, this knowledge is invaluable for maintaining legacy applications! 🚀

Happy coding! 🎉🚀✨