Front-end with TypeScript Tutorial – Step 1 to 3: Minimal TypeScript

Posted by Bogdán Bikics on October 27, 2016

Now that we know the basics of NPM, Gulp and TypeScript, let’s start our step-by-step tutorial. At the end you should have everything you need to get started with a TypeScript project. Even if you need a few extras at a later point, you will already be on the right path and will be able to figure things out relatively easy.

Before we start, I’d like to ask your forgiveness for the suboptimal folder hierarchy we will set up. In a real project I would go for a more complex hierarchy. For now, I kept it simple for two reasons. Firstly, so that I don’t have to refer to long paths in code snippets. Secondly, I hope that this will be more understandable for you, the reader. After finishing this tutorial you should be able to adapt your knowledge easily on any folder hierarchy.

Our tutorial goal

We are going to create a very basic Knockout application with Jasmine tests, all written in TypeScript. This tutorial will cover everything that is mentioned in the main title: NPM, Gulp, Browserify and TypeScript.

Step 1: Installing NPM

First you have to install Node.js. NPM is included in the Node.js JavaScript runtime. The command NPM will automatically be set on your operating system.

Step 2: Initializing your project / importing dependencies

Create a folder where you would like to have your project. I named mine “KnockoutTypescript”. Enter this folder.

Initialize your project with NPM. Again, you should be in the project root folder. In my case this is “KnockoutTypescript”:

npm init

It will ask for input about your project. Just give the project a name (in lowercase, like “knockout-typescript”) and skip the other questions with Enter.

The only thing that happened now is that it created a “package.json” file. Have a look at the file. It is quite straight-forward.

Now it’s time to pull in some dependencies. We will obviously need Knockout, so let’s install it!

npm install --save knockout

That was fast. Two things happened in your project:

  • A new folder named “node_modules” has been created (with the knockout folder inside). In the future all dependencies installed by NPM will be placed here.
  • The other thing what happened is that it added the “dependencies” block in your “package.json” file, with Knockout as the only dependency right now. Be aware that this only happens if you use the --save flag (or -S).

We are not going to use git/hg in this tutorial, but if we did (and in real life we do), the “node_modules” folder should be added to your git/hg ignore file. This folder can get huge over time.

When somebody clones your project, she just has to type:

npm install

This will arrange all the dependencies found in the “package.json”.

If you want to get rid of a module (like knockout), you can use the command

npm uninstall knockout --save

Step 3: Start with TypeScript

We have set some things up already, but what we really want is to work in TypeScript. This brings up two questions:

  • How do I introduce TypeScript? (obviously)
  • I installed KnockoutJS as a dependency… Should I get a Typescript version of Knockout?

Setting up TypeScript

First of all you will need a TypeScript Compiler (tsc):

npm install --global typescript

From now on you can compile TypeScript code to JavaScript with the tsc command.

Let’s try it out already and create our first TypeScript file. First, create a folder named “typescript” in your project folder. In this folder, create a file named “main.ts”.

Write some simple code, for example:

main.ts

let words: Array<string> = ['Hello', 'World'];
for (let word of words) {
    console.log(word);
}

Note that if you’re using an IDE with TypeScript support, it will provide code completion (unlike for JavaScript). Great!

Now in your project root folder run the following on your terminal:

tsc typescript/main.ts

In the “typescript” folder, now a “main.js” is generated.

Just for the sake of enjoying our results now and then, let’s create an “index.html” file in a freshly created “view” folder (under the main project folder). Something like this will do the trick:

index.html

<!doctype html>
<html>
<head>
    <script src="../typescript/main.js"></script>
</head>
<body>
A nice page
</body>
</html>

If you now run this .html in your browser, you will see that it prints out “Hello” and “World” in your browser’s console.

Coming up Next

Nice! But we want more… We agreed that we would be using Knockout in TypeScript. In my next post, Importing Libraries, I will introduce the Knockout definition file for your TypeScript compiler, with the help of Typings.

 

About the author: Bogdán Bikics

More Posts