Typescript

Typescript is a free open source Programming Language developed by Microsoft. I suppose the best feature of it is that it makes structuring of Javascript much easier.

You can get it for Visual Studio 2012

http://visualstudiogallery.msdn.microsoft.com/fa041d2d-5d77-494b-b0ba-8b4550792b4d

or 2013

http://www.microsoft.com/en-us/download/details.aspx?id=42666

Playing with Typescript

If you’re just starting out with Typescript and seriously want to learn, the best place to start is their tutorial Page

http://www.typescriptlang.org/Tutorial

If you want a quick run-through, then yup. You may want to stick around.

Being a language in its own right, it follows its own syntax. Not too difficult to follow, though as it resembles Javascript very well. After all, does get compiled to Javascript. Let’s start!

Create your TS file

Create a webpage and add a new Typescript file. You can do this either by going to File > New Project and then creating a new project based on the Typescript Template

image

Or by adding a new Typescript file manually from your Project

image

For our purpose, I’ll be adding the Typescript file from an already existing project. Let’s populate our .ts file. Let’s use the sample from the tutorial.

class Student {

    fullname: string;

    constructor(public firstname, public middleinitial, public lastname) {

        this.fullname = firstname + " " + middleinitial + " " + lastname;

    }

}

 

interface Person {

    firstname: string;

    lastname: string;

}

 

function greeter(person: Person) {

    return "Hello, " + person.firstname + " " + person.lastname;

}

It’s a basic script that makes a Student class that processes stuff. You will also find that it makes use of a Person interface. In Typescript, as long as an interface has the same structure as the implementation, then you can say that they are compatible with one another.

Build a JS file from your TS file

We now build our Javascript. We do this by issuing tsc.

tsc JohnScript.ts

After installing Typescript tools, you should already have the tsc path linked to your Visual Studio Command Prompt. If for any reason it’s not yet connected, just go to C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0\ and issue tsc.exe from there. Or, you know, reinstall. After running, you should be able to see a new .js file generated. This is the actual script that we will be referencing.

Reference your TS

We then reference our .ts from our main page. We don’t reference the physical file, though: We reference the .js file that was generated.

<head runat="server">

    <title>John</title>

</head>

    <script src="JohnScript.js"></script>

    <script>

        function Loaded() {

            var user = new Student("Jane", "M.", "User");

            document.body.innerHTML = greeter(user);

        }

    </script>

<body onload="Loaded()">

</body>

Run!

We run our page then lo and behold: Our Typescript is running.

image