A quick test of TypeScript using WebStorm and Node.js nodejs , angularjs , typescript https://octoperf.com/blog/2015/09/08/webstorm-nodejs-typescript/ OctoPerf ZI Les Paluds, 276 Avenue du Douard, 13400 Aubagne, France +334 42 84 12 59 contact@octoperf.com Development 571 2021-01-04

TypeScript using WebStorm

OctoPerf is JMeter on steroids!
Schedule a Demo

We use AngularJs at OctoPerf.com, for the frontend of our load testing tool. As AngularJs V2 quick start guide 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
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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.
TypeScript using WebStorm
Tags:
Share:

Be the first to comment

Thank you

Your comment has been submitted and will be published once it has been approved.

OK

OOPS!

Your post has failed. Please return to the page and try again. Thank You!

OK

Want to become a super load tester?
OctoPerf Superman