Senior Typescript Consultant

To create a demo todo list project using TypeScript, we'll use React as the frontend library. Follow these steps: 1. Setup the project: First, make sure you have Node.js installed on your system. Then, open your terminal and run the following command to create a new React project with TypeScript: ``` npx create-react-app todo-list --template typescript ``` This command will create a new folder called `todo-list` with a TypeScript-enabled React app. Navigate to this folder and start the development server: ``` cd todo-list npm start ``` This command will launch the development server and open the default React app in your browser. 2. Create the Todo list components: In the `src` folder, create two new files: `Todo.tsx` and `TodoList.tsx`. These files will represent the Todo item and Todo list components, respectively. 3. Implement the Todo component: Open `Todo.tsx` and add the following code: ```tsx import React from 'react'; interface TodoProps { todo: { id: number; text: string; completed: boolean; }; removeTodo: (id: number) => void; } const Todo: React.FC<TodoProps> = ({ todo, removeTodo }) => { const handleRemove = () => { removeTodo(todo.id); }; return ( <li> <input type="checkbox" checked={todo.completed} readOnly /> <span>{todo.text}</span> <button onClick={handleRemove}>Remove</button> </li> ); }; export default Todo; ``` This component accepts a `todo` object and a `removeTodo` function as props. The `handleRemove` function is called when the user clicks the "Remove" button, and it calls the `removeTodo` function passed from the parent component. 4. Implement the TodoList component: Open `TodoList.tsx` and add the following code: ```tsx import React, { useState } from 'react'; import Todo from './Todo'; interface TodoItem { id: number; text: string; completed: boolean; } const TodoList: React.FC = () => { const [todos, setTodos] = useState<TodoItem[]>([]); const [newTodo, setNewTodo] = useState<string>(''); const addTodo = (e: React.FormEvent) => { e.preventDefault(); if (newTodo.trim()) { setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]); setNewTodo(''); } }; const removeTodo = (id: number) => { setTodos(todos.filter((todo) => todo.id !== id)); }; return ( <div> <h1>Todo List</h1> <form onSubmit={addTodo}> <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} placeholder="Add new todo" /> <button type="submit">Add</button> </form> <ul> {todos.map((todo) => ( <Todo key={todo.id} todo={todo} removeTodo={removeTodo} /> ))} </ul> </div> ); }; export default TodoList; ``` This component imports the `Todo` component and maintains the state of the todo list. It provides the `addTodo` function to add new todos and the `removeTodo` function to remove todos from the list. 5. Update the main App component: Open `src/App.tsx`, remove the existing code, and replace it with the following: ```tsx import React from 'react'; import TodoList from './TodoList'; const App: React.FC = () => { return ( <div className="App"> <TodoList /> </div> ); }; export default App; ```