Using TypeScript on Express

Prerequisites:

• Install Node.js
  
  • To see installed version
    

    $ node -v

• Install Visual Studio Code
• To alias Visual Studio Code to code, just add the following to your ~/.bash_profile
  

  code () {
      VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $*
  }
  

Express using plain vanilla JavaScript:

• Install Express using this instruction: http://expressjs.com/starter/installing.html
• Go to the directory where you place your express project, then type code .
• MacBook-Pro:myapp jack$ code .
• Create and run app.js using this instruction: http://expressjs.com/starter/hello-world.html
• Though the console says http://0.0.0.0:3000, open the app using http://localhost:3000

Express using TypeScript

• Prerequisites
• Install TypeScript compiler. Requires sudo.
• $ sudo npm install -g typescript 
• To see installed TypeScript version:
• $ tsc -v
• Install TypeScript Definition manager. Requires sudo.
• $ sudo npm install -g tsd
• To see installed TypeScript Definition manager's version:
• $ tsd -V
• TypeScript configuration
• Create a new file then save(so intellisense will kick in if you want to manually type the content below) blank tsconfig.json file under MYAPP folder (the folder from Express installation).  Content:

 
{
 "compilerOptions": {
  "target": "ES5",
  "module": "commonjs",
  "sourceMap": true
 }
}

• Build by pressing Command+Shift+B
• You'll see message: No task runner configured. Then click Configure Task Runner.
• Remove this entry:
• "args": ["HelloWorld.ts"],
• Converting JavaScript to TypeScript
• Rename app.js to app.ts. As soon you as you renamed it to ts file, Visual Studio Code will show a message that the require function is not found. To fix, change the var express to import express. 
• As soon as you change var express to import express, TypeScript will show another error that says it cannot find the external module 'express'.
• To fix that, install TypeScript definition for express
• $ tsd install express --save
• Build by pressing Command+Shift+B. The error pertaining to module express shall be gone. However, at the time of this writing, you'll see four errors related to node.d.ts use of ES6 data structure, DataView, Map, Set, WeakMap, we will fix these errors later.
• Another thing to note, as soon you edit your code, you'll see again the error pertaining to missing module express. You can fix that by building the project, however as soon as you edit your code again, the errors will be back. To make the error really disappear, just quit Visual Studio Code then open your project again. This is just a glitch in Visual Studio Code.
• You can now test the intellisense goodness TypeScript and Visual Studio Code brings. For a start, type app then press the dot, all the available methods of express will be shown.
• Test a TypeScript syntax, lambda for example:
• Change this:

app.get('/', function (req, res) {
    res.send('Hello World!');
});

• Into this:

app.get('/', (req, res) => res.send('Hello World!'));

• Build by pressing Command+Shift+B again, then relaunch node app.js from the terminal; not app.ts. Refresh the browser, you'll see Hello Lambda World!
• At the time of this writing, the typescript definition for node has four errors, the errors is related to ECMAScript 6's data structures (DataView, Map, Set, WeakMap), the easiest solution is get the previous TypeScript definition for node. Solution found on stackoverflow.
• Open tsd.json, change the commit id of node.d.ts

"node/node.d.ts": {
   "commit": "7bab855ae33d79e86da1eb6c73a7f7eab2676ddb"
}

• Delete the typings directory, and re-install the TypeScript definitions
• $ tsd reinstall -s
• Build by pressing Command+Shift+B. The four errors shall be gone.
• However, due to Visual Studio Code glitch, as soon as you edit your code, it will show back the errors. You can make those errors disappear, just build by pressing Command+Shift+B, however that is temporary, as soon as you edit your code, the errors will be back. To make it disappear permanently, just quit and re-open Visual Studio Code. One thing I noticed, even we don't quit and re-open Visual Studio Code, the errors will appear permanently just by waiting for a minute. It's better to quit and re-open Visual Studio Code :-)

app.ts

import express = require('express');
var app = express();

app.get('/', (req, res) => res.send('Hello Lambda World!'));


var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

Happy Coding!