It has now become a rite of passage for developers learning new programming languages and frameworks, so we will abide and build a todo (that is, task) management web application that we'll call TodoIt.

TodoIt will have the following features:

• Add a new todo item
• List existing todo items
• Filter the list of existing todo items
• Remove a single todo item
• Remove all todo items

First things first, let's create the project as follows:

1. Open your favorite shell.
2. Create a new folder called todoit-v1.
3. Go into the newly created folder.
4. Create the project using the npm init command.

When you execute the following npm init command, npm will request some input to properly configure the project:

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

Execute `npm help json` to get a more comprehensive description of these fields.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
...

The following are the different inputs that npm will request. Just press the Enter key multiple times as we will not need to change the defaults:

package name: ...

As we saw in the first chapter, npm (or yarn if you prefer that alternative package manager) will become one of your best friends. With it, you will be able to manage the dependencies of your projects, install and update them, and execute scripts as well.

When you work on a project, usually, you simply don't want to create a long document explaining how to download/install each and every dependency. Instead, you want to have a simple way to install everything at once.

As explained in the official documentation (https://docs.npmjs.com/getting-started/using-a-package.json), a package.json file does the following:

• Lists the packages that your project depends on
• Allows you to specify the versions...

Now that you're more familiar with npm, let's add TypeScript to our project. As discussed in the last section, we'll add it to the package.json file and then we will also add a script to invoke it easily.

First, add the devDependencies section and add TypeScript to those dependencies (since TypeScript is a tool and is only necessary at build time):

"devDependencies": {
    "typescript": "3.4.4"
},

Next, replace the scripts section with the following:

"scripts": { 
    "compile": "tsc" 
}, 

With this script, we will be able to easily invoke the TypeScript version...

Now that everything is set up with npm, we can turn our focus to TypeScript.

Typically, the first thing to do in any TypeScript project is to create the compiler configuration file. So, indeed, at this point, you need to be aware of the fact that the TypeScript compiler can be configured through a file called tsconfig.json. The presence of a tsconfig.json file in a folder tells TypeScript that the folder is the root of a TypeScript project.

Through tsconfig.json, you can precisely configure the compiler, adapting it to your project and its specific needs.

To get started, create a default configuration file using npm run compile -- --init.

You should now have a good starting point with both npm and TypeScript configured. If you're not sure or something went wrong, then you can start here with the initial code that we have provided with the book's sample code. You can find it in the Chapter02 folder (corresponding to the second chapter) and in the todoit-v1-initial folder.

Ready? Great, let's write our application and learn some more together!

Go to the project's folder and open VS...

Usually, you shouldn't get into a lot of trouble while coding the examples in this book. But, of course, in the typical day of any software developer, there will be many times where things go awry and where a good debugging session will help.

Let's see how you can debug web applications. This is a must-have skill for any developer out there, and there are many tools and solutions to help you figure out what your programs are doing.

The most basic debugging tool at your disposal is simply the console.log function, which you can use to log variables while your program executes. Although, it clearly isn't a panacea and far from a best practice, so you should use it sparingly for small checks. When your code reaches production, you don't want it to be cluttered with console.log statements. Debugging and logging are two separate...

Another interesting alternative to debug your code is to make use of the VS Code debugger.

As with Chrome, you can define breakpoints by clicking next to a line:

Once done, you can start debugging by going to Debug | Start Debugging or by pressing F5:

The first time that you do so, VS Code will create a .vscode/launch.json file for you. This file tells VS Code what to do when it starts a debugging session. In our case, we can leverage the fact that we have Browsersync running in the background and adapt the configuration to let VS Code open Chrome (or another browser) and go to http://localhost:3000 instead of the default 8080 port. Once adapted, the file should look as follows:

{ 
    // Use IntelliSense to learn about possible attributes. 
    // Hover to view descriptions of existing attributes. 
    // For more information, visit: https:...

One thing that you might have noticed while we were using the debugging in the web browser before is that we only had access to the JavaScript code (as opposed to the TypeScript code when debugging with VS Code directly). In our case, with TodoIt, it is okay because the program is very simple, and so it remains intuitive. But in larger applications, this will simply not be usable.

This is why a feature called source maps is really, really valuable. Source maps are mapping files that create the link between lines in the JavaScript sources and the corresponding ones in the original source code (TypeScript source code, in our case).

Source maps can either be stored in the JavaScript files themselves, in which case, they are called inline source maps or in the separate (that is, external) .map files.

We won't dive much more into the...

In this chapter, you have built your very first web application with TypeScript.

TodoIt is quite basic, but by building it you should now have a better understanding of how useful TypeScript is during development and how easy it is to configure its compiler through tsconfig.json. Along the way, you have learned about some additional TypeScript concepts, such as type declarations, type annotations, arrays handling, the null special type, the as cast operator, lambda expressions, and the different types of loops supported in TypeScript.

Also, you should now have a good understanding of npm, package.json, dependency management, and defining and executing scripts with npm.

We have explained what Browsersync is and how to integrate it into your project to get live reloading during development.

In addition, we have seen how to use VS Code to develop with TypeScript and how to...