Nodejs with TypeScript gives weird errors

Question

I am using TypeScript 1.5.0-beta and I am using Visual Studio Code to create a simple Node Server using an example that Anders Hejlsberg showed at build.

///<reference path="typings/node/node.d.ts"/>

import { createServer } from "http"

export function simpleServer(port: number, message: string)
{
  createServer((req, res) =>
  {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
  }).listen(port, '127.0.0.1');

  console.log('Server running at http://127.0.0.1:1337/');
}

I have three issues

1) With this code, whenever I try to build the ts file either using Visual Studio Code or the command $ tsc server -m commonjs, it keeps giving weird errors like these

error TS1008: Unexpected token; 'module
, class, interface, enum, import or statement' expected

2) It also tries to build node.d.ts file that I am referencing and gives additional ":" expected error messages.

3) This is more of a Visual Studio Code question. How do we get VS Code to build all ts files in a project/folder and generate js files. I followed the instructions for the typescript setup for VS Code but I still have to individually build each ts file to gen the js code.

I know grunt is one way to do it but as far as I know VS Code should be able to build all ts files in a folder like Visual Studio does. Please correct me if I am wrong.

Thanks.

Answer 1

Ok, I was finally able to figure out what is going on. Since I had Visual Studio 2013 and TypeScript 1.4 installed, it created the files under C:/Program Files (x86)/Microsft SDKs/TypeScript/1.0. So, every time I use the tsc command, it was always defaulting to version 1.0.3.0 which works with TypeScript 1.4 and not 1.5.0-beta. When I install TypeScript 1.5.0-beta through node, it created the files for new version under C:\Users\Krishna V\AppData\Roaming\npm\tsc

So, for #1, to fix the compilation version issue, I changed the task.json file to use the full path for the command and windows options. So, it will look like this

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "C:\\Users\\Krishna^ V\\AppData\\Roaming\\npm\\tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "C:\\Users\\Krishna^ V\\AppData\\Roaming\\npm\\tsc"
    },

    // args is the HelloWorld program to compile.
    "args": [],

    "isShellCommand": true,

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

For #2, seems like its a know issues with Node.d.ts being out of sync with TypeScript 1.5.0-beta and there are already similar issues with react.d.ts opened in git for this.

For #3, tsconfig.json only works with TypeScript version 1.5.0-beta and since tsc was using the wrong version, it was never using tsconfig. Now that its using the right version, its using the tsconfig and hence it builds all the files mentioned in tsconfig. For example, either of these (one with ES5 and ES6)

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "sourceMap": true,
        "removeComments": true
    },
    "files": [
        "server.ts","config.ts","models/user.ts"
    ]
}

OR 

{
    "compilerOptions": {
        "target": "ES6",
        "sourceMap": true,
        "removeComments": true
    },
    "filesGlob": [
        "./**/*.ts"
    ]
}

In this case, it will compile the three files mentioned in first option or all ts files in option 2.

Answer 2

1 - Module Error

This will be resolved when you move to tsconfig.json under #3 below

2 - Reference error with :

The syntax for the reference should be

import http = require('http');

3 - Automated compilation of ts files to js

1. Configure tsconfig.json file with your settings
2. (optional) turn on auto save feature in Visual Studio Code
3. Configure a task in Visual Studio Code
4. Use the watch feature in the TypeScript compiler

Here is the tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "target": "ES5",
        "sourceMap": true,
        "outDir": "../dist"
    }
}

Here is a defined task .settings/tasks.json --p specifies that you want to compile via a tsconfig.json --w specifies that you want to recompile when files are saved You can refer to the compiler options here

{
    "version": "0.1.0",
    // The command is tsc.
    "command": "tsc",
    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",
    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },
    // args is the HelloWorld program to compile.
    "args": ["--p", "./PATH-TO-TSCONFIG-FOLDER", "--w"],
    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

Node + TypeScript = Awesome!

Answer 3

I can't help you with #3, as I haven't quite tried out VS Code yet. However, on #1 and #2, there are a couple things you need to do:

A.) Enable the CommonJS module type on the Typescript compiler. In Visual Studio, you would do this by going to Project --> Properties --> Typescript Build, and changing the "Module system" to "CommonJS". On the command prompt, you would do this by passing in the parameter "-module commonjs" to tsc.exe. Sorry, I don't know how to achieve this in VS Code.

B.) I think the sample code should look something like this. I'm not sure if Anders may have been giving a sneak preview of future syntax at the conference, but the following should work for you:

///<reference path="typings/node/node.d.ts"/>

import Http = require('http')

export function simpleServer(port: number, message: string)
{
    Http.createServer((req, res) =>
    {
        res.writeHead(200, { 'Content-Type': 'text/plain' });
        res.end('Hello World\n');
    }).listen(port, '127.0.0.1');

    console.log('Server running at http://127.0.0.1:1337/');
}