VS Code Setup - TypeScript, Angular 1.x

This is going to be a quick take on TypeScript.

TypeScript Introduction

• Open source project by Microsoft
• Follows ES6 syntax, even ES7 if possible
• Adds typing to vars (which has its own advantages)
• The compiler for TS is tsc – ts compiler. It is transpiler which Transpiles code into JS.

Environment Setup

Package Installation

sudo apt-get install npm

sudo apt-get install nodejs-legacy

sudo npm install -g typescript

VS Code Installation

Click here to download & install Visual Studio Code

Preparing VS Code for TS

Follow the link to prepare VS Code for TS. This involves -

defining tsconfig.json

creating tasks.json

Note:   If ctrl+shift+B doesn't invoke the task then check – is tsc working from commandline.

How I did setup?

Created project_dir/src/student.ts with following code.

module main{

    class Subject{

        name:string;
        marks:number;

        constructor(name:string){
            this.name=name;
        }

        print():string{
            return this.name;
        }
    }

    class Student{

        name:string;
        subjects:Array;

        constructor(name:string){
            this.name=name;
        }

        print():string{
            return this.name        
        }

        getSubjects():Array{
            return this.subjects;
        }

        addSubject(name:string):void{
            this.subjects.push(new Subject(name));
        }
    }

    let stud1:Student = new Student("John");
    console.log(stud1.print())
}

Press Ctrl+Shift+B. This will make a strip appear on top of editor area. Click on Configure Task Runner.

Select TypeScript - tsconfig.json

This will add tasks.json.

Create src/tsconfig.json (I altered it a bit. See github repo)

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

Go to View in menu bar and click on output. Then press ctrl+shift+B. I got following error.

error TS5057: Cannot find a tsconfig.json file at the specified directory: '.'
 Go to tasks.json and update the args line to following.

"args": ["-p", "./src"],

Then press ctrl+shift+B. You will find student.js and student.js.map files created
 

Debugging a TS file

Place a debug point in app.ts file, press F5 and select environment Node.js . This will create  launch.json file. Edit the content to make it similar to the following.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app/student.ts",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,            
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/src/app"
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}/src/app",
            "remoteRoot": null
        }
    ]
}

Save it and press F5. The debugger will start.

Configuring local server

To serve AngularJS code, I need *.html files to be served from a local server. Click here to view the reference thread.

$ sudo npm install -g live-server

From VSCode, do a right click on index.html, open in console and execute

$ live-server

Downloading TSD files for Angular

$ typings search --name angular
$ typings install  dt~angular --save --global

when I did search for angular, it showed SOURCE=dt, therefore while installing dt~ prepended to angular.

Also install jquery.
$ typings search --name jquery
$ typings install  dt~jquery --save --global

This creates index.d.ts file containing reference to all type script definition files. Rename this to tsd.d.ts and its reference in app.ts

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

Add empty file jsonconfig.json at same level as typings.json

Finally  I developed first demo app and pushed to github repo.