Analytics Vidhya
Published in

Analytics Vidhya

Todolist- Typescript

In this post,let’s build a simple TodoList using typescript.

Let’s make this build interesting as well as amazing by using object oriented approach.

Folder structure


Create two folders dist and src. Inside src folder create typescript file app.ts.

Above command creates a package.json file.

Lite-server is a lightweight development server that serves a web application, opens it in the browser, and refreshes the page when HTML or JavaScript changes are made to the source code

In package.json file

It’s time to create tsconfig json file.

Above command creates a tsconfig.json file. You need to include basic options in tsconfig file

“target”: “es6”,“module”: “commonjs”,“lib”: [“dom”,es6”,“dom.iterable”,“scripthost”],"outDir": "./dist",                      "rootDir": "./src",

While we run typescript file,compiler will look through typescript file in src folder and then converts it to JavaScript file which will be stored in dist folder.

To run typescript file:

tsc -w

Above command creates app.js file in dist folder

Basic index.html

HTML file contains form tag for submitting todoInput, ul and li tag for displaying todo list.

As a first step let’s create a TodoInput class.It’s functionalities includes getting user input,validate user input and add todo to a list.

Two variables are created which is initialized to predefined Typescript types. Typescript does not know the result of document.querySelector so it stores as null.As a result we cannot able to access its properties.In order to avoid this we use “!” to tell TypeScript that the element is present in HTML which will never results to null. ”as” is used for typecasting so that final value stored will be a HTML element.A submit method is created which handles user input.

In next steps, we will create a simple validation for userInput

Here I have implemented a simple validation by creating interface object in which text must be a string and minimum length must be a number which is optional field.A function named validate which returns true when condition satisfies otherwise returns false.

Inside TodoInput class a new method validation is created and validate function is called.If validate function returns false we show up a alert message and returns undefined otherwise it returns todoInput value

Above method returns a todoInput value.We need to store this value in global scope so that we can access it anywhere for editing and deleting.I think this process make sense.Let’s create a AppState class which persists data throughout the app.

todos variable is created which stores list of all todo items.We can also instantiate a object for AppState instead of using static methods so that we can a use it in other classes.A method addTodo is created which pushes todoItem to todos.

getter and setter are used in order to access as well as modify todo items.

Now its time to add todo item in todos array.In TodoInput , on submitHandler we add the following code

After submit handler we need to clear input.Final code for TodoInput class.

We have added todo items to todos(variable in AppState).Its time to display list of all todo items. Here we create two class TodoItem and TodoList.

In TodoList class we loop over todos array by instantiating TodoItem class.In TodoItem class we create a list and add text content to html.

Now we need to create list in TodoList and add functionalities like edit and remove todo in todos(variable in AppState class)

TodoItem constructor receives id,todoInput and todoItems from TodoList .Above code is pretty long but if we go through it,it does simple task.We are extracting child of template tag (contains li,edit and delete button) and appends it to ul tag.For every todo item we have created a attach and display method.In attach method we have create a li tag and appends it to ul tag.In display method we have added text(todo item) and then provided todoId as its id to edit and delete button.Using this id we can easily delete and edit todo items.(button id contains id of corresponding todo item)

Delete todo-When delete button is clicked, we can get todoId by selecting delete button and access its id.After getting todoId we get todos list(appState class) by using get method provided in AppState class.Todos array is filtered and it is set by using setter which changes todos(variable in AppState) array.

Edit todo-todoId is accessed and its value is set to input tag and corresponding todo item is deleted.

Now we run in to a problem.When we add a todo item to todos array(variable in AppState),todos array gets updated but UI does not render.This is because while we add todo we are not re-rendering todoList. In order to solve this problem we need to instantiate todoList in two places.One in addTodo method and another in setter method(because we are making changes(todos array) in set method for both editing and deleting)

That’s it.There is many better approach than this for implementing todoList that you can follow.

Github link




Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem

Recommended from Medium

Migrate Angular project from one stylesheet extension to another

Get Query Parameters from an Angular Route

Openwhisk Web actions with path parameters

Most Common Javascript Methods and Gotchas

How to Choose the Number of Threads for an Apache JMeter Test Plan

Create Quotations in Field Service of Odoo

Jumpstart Node Js

@copyright Toptal

ReactJS | Sending HTTP Requests Using JSX

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


WD(MERN) enthusiast

More from Medium

How to Import JSON file as a Module

How to Create a Toast Service Using Angular 13 and Bootstrap 5

Angular 13 toaster with Bootstrap 5 toast notifications

How to deploy a Vue.js App on Patr

Easy alternatives for Map and Set in a JavaScript-oriented front-end, back-end configuration