TypeScript

In Part 4 (Step 5: Using Browserify) we used Browserify to work better together with NPM imported modules, and to use our own code in a Node styled modular way. It’s time to automate all the build tasks we have so far with the help of Gulp.

After successfully writing our first working TypeScript application in part 2 (step 1-3), in this post we are going to have a look at how to use JS libraries (in this case Knockout.js) in TypeScript with Typings. We are also going to use Require.js to take care of dependencies.

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.

This series of posts is written with the purpose of helping people who are starting with a new front-end project, or to those who want to introduce TypeScript in their already existing JavaScript project. In This Post I am going to kick off by introducing all the basic tools involved, like Npm, Gulp and Browserify. In the upcoming posts, I will present a step-by-step tutorial to help you get started.

In Part 5 (Step 6: Gulp) we built up our fully working ecosystem with TypeScript. It enables us to use TypeScript, compile it automatically on every change, clean up, handle dependencies both for internal and external node modules. Now it is time to put the cherry on the top of the cake: let’s add Jasmine tests written in TypeScript!