Codexpal - Learn Programming Interactively

Lesson Content

React Todo App with TypeScript ⚛️

Build a production-ready React todo app with full TypeScript type safety. This is what real companies use!

TypeScript Interfaces

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoAppProps {
  initialTodos?: Todo[];
}

function TodoApp({ initialTodos = [] }: TodoAppProps) {
  const [todos, setTodos] = useState(initialTodos);
  
  const addTodo = (text: string): void => {
    setTodos([...todos, { id: Date.now(), text, completed: false }]);
  };
}

Example Code

Create typed React todo component

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

function createTodo(text: string): Todo {
  return {
    id: Date.now(),
    text,
    completed: false
  };
}

function toggleTodo(todo: Todo): Todo {
  return { ...todo, completed: !todo.completed };
}

const todo = createTodo('Learn TypeScript');
console.log('Created:', todo);
const toggled = toggleTodo(todo);
console.log('Toggled:', toggled);

Expected Output:

Todo created and toggled

Study Tips

•Read the theory content thoroughly before practicing
•Review the example code to understand key concepts
•Proceed to the Practice tab when you're ready to code