Learn TypeScript by building a todo app

In 2011, Backbone.js was one of the most popular JavaScript libraries (React came out in 2013; Vue in 2014). When people were learning Backbone.js, many (including myself) learned it by building a todo app. The official documentation included an example todo app built in Backbone.js, and many learned by reading its beautifully annotated source code.

Official Backbone.js example todo app

As far as I know, learning a JavaScript library by building a todo app was a new idea at the time and was popularized by Backbone.js (and other libraries that followed). It inspired TodoMVC, which showcases todo apps built using different JS libraries. Today, many tutorials, such as Redux’s official tutorial, involve building a todo app.

But what about TypeScript tutorials? When it comes to TypeScript, there aren’t many tutorials that involve building a todo app. I think there are missed opportunities here. Building a todo app is a great way to learn something in frontend engineering, and many JS programmers already know how to build one. There should be more TypeScript tutorials featuring a todo app.

In this tutorial, I’ll teach some of the interesting parts of TypeScript through an example todo app shown below. It’s interactive: Try checking and unchecking the checkboxes.

We’ll learn TypeScript using this todo app: First todo Second todo ↑ Check and uncheck the checkboxes!

Here are some details before we begin:

This tutorial doesn’t rely on any specific frontend library, so it doesn’t matter whether you know React, Vue, or some other libraries. You’ll be able to follow as long as you have basic JS knowledge. No prior TypeScript knowledge is necessary.

To save time, I’m not going to talk about how to set up a TypeScript project—you should read other tutorials for that. For React, check out React+TypeScript Cheatsheets.

Also to save time, I’m only going to cover the most essential concepts in TypeScript. My goal is not to be exhaustive but to make you want to learn more.

There are 3 sections total in this article. Here are the topics covered in each section:

Section 1: Types, Read-only Properties, and Mapped Types

Types, Read-only Properties, and Mapped Types Section 2: Array Types, Literal Types, and Intersection Types

Array Types, Literal Types, and Intersection Types Section 3: Union Types and Optional Properties

Let’s get started!