Developing a To-Do List App with TypeScript


In this guide, we'll develop a basic To-Do List application using TypeScript. While this example is simplified and lacks advanced features, it serves as a starting point for understanding how to structure and build a web application.


Our simple To-Do List app will include the following features:

  • Task Creation: Users can add new tasks to the list.
  • Task Display: The list of tasks is displayed on the page.
  • Task Completion: Users can mark tasks as completed.
  • Task Deletion: Users can delete tasks from the list.

Setting Up the Project

To create our To-Do List app, follow these steps:

1. Create a Project Folder

Create a folder for your project and open it in your code editor. You can name the folder as per your preference.

2. Initialize a Node.js Project

Open your terminal or command prompt, navigate to your project folder, and run the following command to create a package.json file for your project:

npm init -y

3. Install TypeScript

Install TypeScript, which will be the foundation of our To-Do List app:

npm install typescript --save-dev

4. Configure TypeScript

Create a tsconfig.json file in your project folder and configure it for TypeScript:

"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"outDir": "./dist"
"include": [

Creating the To-Do List App

We'll structure our To-Do List app with three main components: HTML, TypeScript, and CSS. Here's a simplified code example:

1. Create TypeScript Files

Create the following TypeScript files in your project's src folder:


// TypeScript code (app.ts)
const inputTask = document.getElementById('inputTask') as HTMLInputElement;
const addTaskButton = document.getElementById('addTaskButton');
const taskList = document.getElementById('taskList');
addTaskButton.addEventListener('click', () => {
const taskText = inputTask.value.trim();
if (taskText === '') return;
const taskElement = document.createElement('li');
taskElement.textContent = taskText;
taskElement.addEventListener('click', () => {
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => {
inputTask.value = '';

2. Create HTML and CSS Files

Create an HTML file (index.html) and a CSS file (styles.css) in your project's root folder:


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List App</title>
<link rel="stylesheet" href="styles.css">
<div class="containern">
<h1>To-Do List</h1>
<input id="inputTask" type="text" placeholder="Enter a new task">
<button id="addTaskButton">Add Task</button>
<ul id="taskList"></ul>
<script src="./dist/app.js"></script>


/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
.container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
h1 {
color: #007acc;
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
button {
background-color: #007acc;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
ul {
list-style: none;
padding: 0;
.task {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
.completed {
text-decoration: line-through;
color: #ccc;
.delete-button {
background-color: #ff4136;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
margin-left: 10px;

3. Run the Application

Open your terminal and run the TypeScript compiler to transpile your TypeScript code:


Open the index.html file in your web browser. You can add, complete, and delete tasks in your To-Do List app.


Creating a To-Do List app is a great way to learn the basics of web development with TypeScript. This simplified example serves as a foundation for building more complex applications. You can expand and enhance your To-Do List app with additional features, database integration, and user authentication as you continue to explore TypeScript and web development.