This is the second part in a series of tutorials on getting started with TypeScript in a Node.js setting. Part 2 goes through installing these tools and setting up a starting project.

The following steps are required for a minimal setup:

I will be going through each of them in turn. Note that installing Node.js and gulp will require administrator privileges, requiring the use of sudo in front of the commands that install them.

Installing Node.js and npm

Node.js can be dowloaded at www.nodejs.org. Just download the appropriate version for your OS, install it, and test the installation by running the following command in your terminal:

node -v

If the installation went well, you should get a string such as 8.0.0 indicating the version of Node.js that is installed on your system.

npm is the package manager for Node.js. Among other things, it is used for downloading libraries written for Node.js by others. These libraries are extremely useful, making npm is a critical component of Node.js. npm is bundled with Node.js, so if you installed Node.js as described above, you can check the version of npm similar to how you checked the version of Node.js:

npm -v

Again, you should get a string such as 4.5.0 indicating the version of npm that is installed on your system. However, npm is updated independently of Node.js, and npm is usually a bit behind on updates. For this reason, it’s a good idea to update npm to the latest version. Luckily, npm itself is used for such updates, so just run this command to update:

npm update -g npm

If you check the version of npm after the update, it should be higher than the one before (in my case it is 5.0.0).

Initializing the project

In Node.js, we can use npm to easily start a skeleton project. Using your terminal, create a directory for your project, navigate to it, and run the following command:

npm init

You will be asked a set of questions about your project, and at the end, a package.json file will be generated.

In this case, the project is called wsmh. The following screenshot demonstrates how npm init was used in this case:

In addition to the package.json file, two more directories need to be created, app and src. src will contain the TypeScript source code, while app will contain the compiled JavaScript code. These are not part of any specification or requirement, but I use this convention since it allows me to organize my code more clearly.

At the end of this section, your directory should look like the following:

At this point, the project is not ready, since there are no source files.

Installing TypeScript

Installing TypeScript is very easy using npm. The command to install TypeScript is:

npm install --save-dev typescript

This command downloads and saves TypeScript to your new node_modules directory, and adds an entry for TypeScript to your package.json file under devDependencies.

In general, npm modules are installed using npm install. For example, to install the foo module, just run:

npm install foo

The --save-dev modifier is used if the installed module will be used during the development or build process, such as testing, minification, resource initialization, database maintenance, and so on. Since TypeScript is used by the developer to compile the code, and not by the project itself, TypeScript is installed using --save-dev.

As an aside, because the project dependencies are listed in the package.json file, it’s not necessary to actually carry the files around when deploying the project or checking it in in source control. If a project is missing the dependencies, they can be easily installed by simply running the following command:

npm install

This will install all dependencies listed in the package.json file.

Installing gulp and setting up the build script

Gulp is a popular tool for automating tasks related to your project, such as setting up databases, backing up the database to a file and restoring the database from a file, running automated tests, deploying the project to a remote server, minifying CSS, compressing and optimizing images, and many more. In our case, we will be setting up Gulp to compile our TypeScript into JavaScript with a single command.

First, Gulp must be installed globally in your system, by using the following command. It requires admin access, so add sudo in Linux/MacOS if needed:

npm install -g gulp

To check if the installation was successful, run the following command on your terminal:

gulp -v

You should get a result similar to this:

Next, we need to install Gulp locally in the project, as well as gulp-typescript, a Gulp plugin that facilitates the TypeScript compilation workflow in Gulp. We can install them both with this single command:

npm install --save-dev gulp gulp-typescript

Now that the development dependencies have been installed, it’s time to set up the build script. Create a file called gulpfile.js in the root directory of your project. Place this code in that file:

const gulp = require("gulp");
const ts = require("gulp-typescript");

gulp.task('ts', function() {
return gulp.src("src/**/*.ts")
    .pipe(ts({
        lib:["es6"],
        noImplicitAny:false,
        noEmitOnError:true,
        removeComments: true,
        sourceMap:false,
        target:"es5"
    }))
    .pipe(gulp.dest("app/"));
});

This code defines a gulp task with the name ts, which will be executed when you run the gulp ts command in your terminal. The purpose of this task is to find all TypeScript files in the src/ directory, compile them to JavaScript one by one, and output the resulting files in the app/ directory.

Setting up our index.ts and index.js files

Finally, we can get started in writing the TypeScript code. Create a file called index.ts, and place it on the scr/ directory. Put the following code to test our setup:

var first:number = 5;
var second:number = 9;
var sum:number = first + second;
console.log(sum);

After you save this file, run the gulp ts command on your terminal. The TypeScript file we just wrote will be compiled into the app/index.js file, and we are finally ready to run it.

Run the node app/index.js command, and you will get the output of 14 on the console. Congratulations! You have just finished the TypeScript compilation process.

Bonus: Setting up the Sublime Text build script

This step is not required if you do not use Sublime Text, but I am adding it here since it is quite useful. As you know, TypeScript code needs to be compiled from scratch each time it is modified. However, it is quite a hassle to switch to your terminal and run the gulp ts command every time you want to compile.

Luckily, Sublime Text offers a way to run external commands with a keyboard shortcut, allowing you to compile while keeping your editor open and not break your flow.

To set up an external build system, on your menu bar, go to Tools->Build System->New Build System…

You will be shown a new tab with an editable text file. Add the following code to that text file:

{
	"shell_cmd": "gulp ts"
}

Save this file as gulp ts.sublime-build, and then select gulp ts as the build system:

Now, you can press Ctrl-B, (Command-B in a Mac), and the build system will run, and all your TypeScript files will be compiled into JavaScript. Now that’s efficiency!