Select Page

In this quick start post series, I’d like to show you how to start developing a node.js application with Typescript and Visual Studio Code. We’ll start with a brief introduction to each of these technologies and then I’ll show you how to setup the VS Code for developing a node.js app with Typescript. After this quick start series, you will know how to develop a basic web API with node.js.

What is the node.js?

Node.js it’s a runtime platform for JavaScript code on the server side. It uses Google’s V8 engine in order to compile JavaScript code into a native machine code in real time.

The most characteristic thing of Node.js is that it uses asynchronous approach to all I/O operations and every node.js app runs as a single thread. I strongly recommend reading more about it: https://en.wikipedia.org/wiki/Node.js

Why use node.js with Typescript?

If you have any background in OOP languages like C# or Java, writing more advanced JavaScript app could be really painful when you’d like to split it into separated modules and follow a good programming rules as SOLID for example especially when you need to develop JavaScript app in ECMAScript 5 standard. Of course, JS has a native support for inheritance based on prototypes, you can also use a lot of patterns in order to split and maintain your code but it’s not as intuitive as in C#.

Using a Typescript especially in a complex application makes your life easier as a developer. Typescript is a strong type superset of JavaScript, so working with modules and classes is every easy and intuitive as in OOP language. Moreover, Typescript is compiled to JavaScript code, that allows you to detect all problems during the compilation. The best part of Typescript is that it allows you to using the latest JavaScript features like async functions and decorators and then compile everything to plain JavaScript (even to ECMAScript 3). You can also switch the target of ECMAScript to the latest version, and you will do that without rewriting all of your code.

I really encourage you to give Typescript a try. It could be used with any kind of JavaScript application. Angular2 and Ionic framework use it as the main language, you also may check how to integrate it with React & Webpack (https://www.typescriptlang.org/docs/handbook/react-&-webpack.html).

If you’re interested in reading more, I recommend checking the official documentation and the Playground website, and also open source typescript book

Visual Studio Code

VS Code is a great and lightweight multiplatform editor with a good support for developing any kind of JavaScript applications, but its great power comes when you develop the Typescript app. VS Code is developed by Microsoft and it gets better and better with every release.

Environment setup

We know the basics so let’s setup our environment. First of all, you need to install node.js. I recommend using version 4 or newer. We will also need the npm node.js package manager.

If you’re using Windows please make sure that you have installed npm in version 3 or newer in order to avoid problems with exceeded path length (260 characters).

Node.js first project

First of all, we need to create a package.jsson file. This file is the basic file of every node.js app. It describes the application and keeps information about app dependencies. In order to create it, we need to call in the console:

npm init

After that, you need to provide a name of the application and the entry point of it. This is the main file which should be started in order to run your application. Other options aren’t important at this moment, so you can leave them empty.

After that your package.json file should look similar to this:

A basic package.json file for node.js app

A basic package.json file for node.js app

Typescript setup

If you have installed Typescript you can skip this section. If not let’s install it:

npm install typescript –save

–save switch is very important here. It tells the npm manager to store a dependency in the package.json file.

Typescript first project

Every Typescript application needs a configuration file called tsconfig.json. In order to create it from scratch call tsc –init in the console.

Default tsconfig.json file for Typescript compiler

A default tsconfig.json file for Typescript compiler

For now, we can leave the default generated values, so our code will be compiled into ECMAScript 5 with CommonJs Javascript code.

Hello world app and VS Code setup

We are almost there. Let’s create our hello world app. Add a new file called app.ts in the VS Code (the name of the file should be the same as the entry point in the package.json file).

The first node.js & Typescript hello world app

The first node.js & Typescript hello world app

Press F5 to run it. Because we haven’t configured VS Code yet, it should ask you what kind of app you are developing. Please select the first option – node.js.

Environment setup in VS Code

Environment setup in VS Code

After that, VS Code will generate the launch.json file:

VS Code envinroment settings for node.js & Typescript

VS Code envinroment settings for node.js & Typescript

As you can see the default program path is: ${workspaceRoot}\\app.js. We don’t have the app.js file yet, so let’s configure VS Code to generate it for us. Press Ctrl+Shift+B. VS Code will show you that no task runner is configured:

VS Code - no task runner message

Click Configure Task Runner and select Typescript – tsconfig.json option after that you will see generated task.json file.

VS Code task runner settings for node.js & Typescript

VS Code task runner settings for node.js & Typescript

Now when you press the Ctrl+Shift+B combination again you will see generated app.js file. To run the application you can press F5 or Ctrl+F5 to debug.

VS Code debug mode

VS Code running application in the debug mode

That’s it! As you can see on the above picture VS Code supports also debugging node.js application. In the next post I’ll show you how to create a first module. Stay tuned!

shares