Setup TypeScript Project

Build ToDo Application with TypeScript: Prerequisites

TypeScript is a modern language for the web applications development today which improves the application development efforts and reduces a lot of headache. I have recently completed the Beginners TypeScript Tutorial, where I promised that I will be showcasing the practical usage of TypeScript. So, here with this post we will start our tutorial on how to build a todo application with typescript. Let me name it in advance … Better ToDo

Building an Application with TypeScript

If you have completed a basic tutorial on TypeScript and are wondering on how to put it all together to build an actual application using TypeScript, you are at the right place. During this tutorial you will be able to clear your mind from all that clutter you might have gathered during your learning and build a clear picture of the language.

In case you are coming from the domain of JavaScript, you might be habitual of changing the code and reloading the page. The code you have created is plain JavaScript and it doesn’t require any post processing once you are done with that. Just load it and its done. But in case of TypeScript, you are required to compile your code to get it converted into JavaScript and make it usable by the browsers.


For this tutorial before we start building our application with TypeScript, we need a few things on our table.

  1. Clarity on the basics of the TypeScript Language.
    Incase you are not following this blog and have not gone through the beginners typescript tutorial,  you can go through that here.
  2. Development Environment Setup.
    You can find the setup instruction here from the beginners typescript tutorial.
  3. Third party libraries like jQuery and Bootstrap.
    we will be getting these libraries as the initial set of our project

We will be using LESS as the precompiled language for the cascading style sheets here. This makes our code much more easy and manageable.

Take Out

At the end of this post you will be able to grasp a clear picture on the core concept of

teaser of the todo application
Application View in a Mobile Device

The other concept, which you will learn during this series is dynamically loading the script files. Although it might not be much helpful in this single page application, but you will be able to utilize the knowledge somewhere else.

One more thing I would like to point over here is that our main focus will be on the TypeScript. We will not be going in depth of the application UI design or learning jQuery or Bootstrap.

Creating Anchor

I will be continuing on this topic on my next  post. In the next post we will be setting up our project, download all dependencies and compile TypeScript. I will be posting the links to the next post below here. You can subscribe to the blog to get notification of the posts as and when they are available.

Please leave your questions below in case you have any. I will really appreciate your feedback, as they will help me build better content while motivating me to write more.

Meanwhile, you can go through other course on AngularJS with ASP.Net MVC, in case you are interested. Hope to see you again with my next post. Till then … have a nice day.

Leave a Reply