In this section, we describe a simple implementation of a to do list as an example of how to perform DOM manipulation with TypeScript without the help of any JavaScript library or framework.

Let's add a plainToDo.ts file to your project. In order to avoid the creation of global variables that might interfere with other JavaScript code, create a function to enclose the whole code. This is the so-called JavaScript Module Pattern, whose main purpose is avoiding unwanted interactions between JavaScript code modules (for more details, see https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript). Later on, in Chapter 6, Namespaces and Modules, we will show better options offered by TypeScript:

(function () {
    //put code here
})();

Then, replace the content of the /Home/Index.csHTML view with this:

@{
    ViewData["Title...