Setup TypeScript Project

ToDo Application: Setup TypeScript Project

There are many ToDo or task management applications out there, written in many programming languages and for almost all the platforms. A ToDo application at its core is the simplest application one can think of. This makes it the right candidate for practicing or brushing up any language’s skills. Which is the same reason, we have picked up this as the center of this tutorial on building an application with TypeScript. This post is second in this series, where we will setup TypeScript project. In case you have not started from the beginning or very beginning (learn typescript), you can do so before continuing here.

Setup TypeScript Project

Before we start setting up our project and begin the development let’s see what we are going to build. Here is the screenshot of the minimal implementation of the application.

Sneak Peek
Application Sneak Peek

Here you are going to build a simple web application which has the capabilities of

  • adding new tasks in the list
  • storing in browsers local storage
  • show the task list with delete and complete actions
  • select tasks to edit them.

So let’s not indulge ourselves on that anymore but setup TypeScript project. I will explain the steps here one by one for each of the component of this project.

jQuery Typings

We will be using jQuery in this application for DOM manipulation and few other simple tasks. The jQuery script will be linked to the HTML after loading dynamically using require.js. Also, for TypeScript compiler and intellisense to recognise the jQuery functions, we are required to have the type definition file for jQuery in our folder and referenced in the TypeScript code files. We will be using definitelytyped repository to get these.

First of all let’s install the typings manager

npm install typings -g

Once you have installed the typings manager globally, its time to install the jQuery typings. For this you have to navigate to the project folder (in case you have not created a folder for your project, its right time to do so now). Open the folder in your favorite terminal and enter the below command.

typings install dt~jquery --save --global

This will create a few files and folders in your project folder as shown below.

Project Folder after installing jQuery Typings

Let’s not go into much details here but just understand that if we reference the index.d.ts from the typings folder into our TypeScript code we will be happy to go.

Bower Components

Next step is to get bower and using that, install jQuery, Bootstrap and Require.JS. Bower is a web package manager which can be used to manage third party library dependencies for your application. You can install bower using the command below (this is installed globally as we did for typings).

npm install bower -g

Once bower is installed, you have to enter the below command in the terminal, while being in your project root.

bower install jquery requirejs bootstrap

After the above command is finished successfully, you should see the below structure of your project folder

image folder structure
Folder structure after installing the bower components

Compiling TypeScript

I am assuming that you have already done the IDE setup as explained here in this post, So its time now to create a tsconfig.json file as per the snippet below.

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "amd",
        "removeComments": true,
        "outDir": "js",
        "alwaysStrict": true,
        "emitBOM": false,
        "target": "es5"
    }
}

This file tells the compiler that it should compile the TypeScript files as soon as they are saved and output the result into the js folder. Along with that the compiled output will be ES5 compatible and usable by amd module. Let’s create a folder named js and other named ts in our project folder. Create a file main.ts in the ts folder with some simple code in there, just to check if everything is working fine. Here is the outcome of my test.

Compiling TypeScript
Compiling TypeScript

Compiling LESS

I am assuming that you have setup your development environment as suggested in my previous post. We will be however using one more thing in this project and that is LESS as the pre-compiled CSS. LESS can be compiled into CSS so that it can be used by the browsers. We will adding one more package to our Atom editor so that as and when we edit and save the less file, it is compiled into the equivalent CSS.

Please go to your Atom Editor’s settings and navigate to Install tab. Now search for atom-compile-less package and install it. This package will compile your less files into the css files as soon as they are saved.

Create a folder named styles in the root of your project folder and create a new file named main.less in there with the below content (this is just to validate if the less is getting compiled).

a {
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

Here is something what you should see as the output.

LESS file sample
LESS Compiled into CSS

You will require to enable the auto compile option of this package in its settings page.

In case you are interested in minifying the generated css, there is an option to do so too with this atom package.

At this point, our main project setup is complete and we are ready to write our code for the application. Please let me know in case you have any troubles following this tutorial. I will really appreciate your feedback. It will encourage me to write more such posts and courses. I will take a leave from you now so that I can continue on the next post in this series.

Have a nice day!

Leave a Reply