gistlib - programm a todo application in typescript

To build a todo application in TypeScript, we will be using Node.js, React, and Redux. Here are the steps to create the application:

Set up the project

We need to create a new Node.js project and install all the required dependencies. We can use the following commands to set up the project:


index.ts
mkdir todo-app
cd todo-app
npm init -y
npm install typescript react react-dom @types/react @types/react-dom redux react-redux @types/react-redux
145 chars
5 lines

Define the data model

We will define the data model for our todo application using TypeScript. We need to create a file called Todo.ts in the src directory with the following code:


index.ts
export interface Todo {
  id: number;
  title: string;
  completed: boolean;
}
79 chars
6 lines

Create the Redux store

We will use Redux to manage the state of our application. We need to create a file called store.ts in the src directory with the following code:


index.ts
import { createStore } from 'redux';
import { Todo } from './Todo';

interface AppState {
  todos: Todo[];
}

const initialState: AppState = {
  todos: [],
};

function rootReducer(state = initialState, action: any) {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: state.todos.length + 1,
            title: action.payload.title,
            completed: false,
          },
        ],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) => {
          if (todo.id === action.payload.id) {
            return { ...todo, completed: !todo.completed };
          }
          return todo;
        }),
      };
    default:
      return state;
  }
}

export default createStore(rootReducer);
840 chars
42 lines

Create the React components

We will create two React components, TodoList and TodoForm, to render the todo list and the form to add new todos. We need to create a file called App.tsx in the src directory with the following code:


index.ts
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './actions';
import { Todo } from './Todo';

function App() {
  const dispatch = useDispatch();
  const todos = useSelector((state: any) => state.todos);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const newTodo = (document.getElementById(
      'newTodo'
    ) as HTMLInputElement).value;
    if (newTodo) {
      dispatch(addTodo({ title: newTodo }));
      (document.getElementById('newTodo') as HTMLInputElement).value = '';
    }
  }

  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        {todos.map((todo: Todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => dispatch(toggleTodo({ id: todo.id }))}
            />
            {todo.title}
          </li>
        ))}
      </ul>
      <form onSubmit={handleSubmit}>
        <input type="text" id="newTodo" />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
}

export default App;
1148 chars
45 lines

Define the actions

We need to define the actions for adding and toggling todos. We need to create a file called actions.ts in the src directory with the following code:


index.ts
export const addTodo = (payload: { title: string }) => ({
  type: 'ADD_TODO',
  payload,
});

export const toggleTodo = (payload: { id: number }) => ({
  type: 'TOGGLE_TODO',
  payload,
});
190 chars
10 lines

Compile and run the application

We can compile the TypeScript code using the following command:


index.ts
npx tsc
8 chars
2 lines

We can then run the application using the following command:


index.ts
node ./dist/index.js
21 chars
2 lines

We can now visit http://localhost:3000 in the browser to see the todo application in action.

programm a todo application in typescript

similar typescript code snippets

related categories