---
title: TypeScript using WebStorm
url: https://blog.octoperf.com/typescript-using-webstorm/
date: '2015-09-08'
authors:
- gpereira
categories:
- Development
tags:
- Node.js
- Angular
- Typescript
description: A quick test of TypeScript using WebStorm and Node.js
---

# TypeScript using WebStorm

We use AngularJs at OctoPerf.com, for the frontend of our [load testing tool](https://octoperf.com). 
**As [AngularJs V2 quick start guide](https://angular.io/docs/js/latest/quickstart.html) uses TypeScript, I think it's a good motivation to give it a try.**
  
## Prerequisite
*Node.js* and *npm* must be installed to run this sample. **WebStorm is used to automatically transpile our *.ts* files (compile them to *.js* ones).**

We can also use the command line transpiler:

* `npm install -g typescript` to install it.
* `tsc --watch -m commonjs greeter.ts` to transpile it.


## WebStorm configuration

**First we need to configure WebStorm:**

1. In *File* open the *Settings...* panel (Ctrl + Alt +S shortcut on Ubuntu),
2. In *Languages & Frameworks* select *TypeScript*,
3. Select the option *Enable TypeScript Compiler*,
4. In *Command Line Options:* type *--module commonjs*,
5. And set the value *dev* (or *js* or whatever you like) for the *Use output path:* so we don't mix TypeScript and JavaScript files.

![TypeScript WebStorm](https://blog.octoperf.com/img/blog/webstorm-nodejs-typescript/typescript-webstorm.png "TypeScript WebStorm")

__Note:__

> If you're using *git* you can also add the line `dev/` to your *.gitignore* file. 

## The Greeter.ts sample

In webstorm, create greeting.ts file:
```javascript
import http = require("http");

class Greeter{
    greet(): string {
        return "Hello world";
    }
}

class NameGreeter extends Greeter{
    name:string;
    constructor (name: string){
        super();
        this.name = name;
    }
    greet(): string {
        return "Hello "+ this.name;
    }
}

http.createServer(function(request, response) {
    response.writeHead(200, {"Content-Type": "text/plain"});

    var greeter:Greeter;
    greeter = new Greeter;
    response.write(greeter.greet());

    response.write(' ... ');
    greeter = new NameGreeter('world');
    response.write(greeter.greet());

    response.end();
}).listen(8888);
```

The file *greeter.js* is automatically created by WebStorm:
```javascript
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var http = require("http");
var Greeter = (function () {
    function Greeter() {
    }
    Greeter.prototype.greet = function () {
        return "Hello world";
    };
    return Greeter;
})();
var NameGreeter = (function (_super) {
    __extends(NameGreeter, _super);
    function NameGreeter(name) {
        _super.call(this);
        this.name = name;
    }
    NameGreeter.prototype.greet = function () {
        return "Hello " + this.name;
    };
    return NameGreeter;
})(Greeter);
http.createServer(function (request, response) {
    response.writeHead(200, { "Content-Type": "text/plain" });
    var greeter;
    greeter = new Greeter;
    response.write(greeter.greet());
    response.write(' ... ');
    greeter = new NameGreeter('world');
    response.write(greeter.greet());
    response.end();
}).listen(8888);
//# sourceMappingURL=greeter.js.map
```

You can check the *TypeScript Console* to view the transpiler errors and status.

## Running the sample code

**To run the sample code simply execute the command `node dev/greeter.js`.**

You can then browse http://localhost:8888 to view the result.
It should display `Hello world ... Hello world`.

__Note:__

> When we modify the *greeter.ts* file, it is automatically converted to *dev/greeter.js*. But node.js does not refresh
> by default. 
> 
> **If you don't want to manually restart node after each modification, you can use *nodemon***: `sudo npm install -g nodemon`.
> Then run `nodemon dev/greeter.js` instead. 

## Conclusion

I kept getting a transpile error in my WebStorm console: `Error:(1, 23) TS2307: Cannot find external module 'http'.`
Even if everything went fine even with this error, I should investigate on how to help TypeScript handle external modules.

**This is a very basic TypeScript sample, there are still many things to try:**

* Interfaces,
* Generics,
* Mixins,
* Etc.