TypeScript: Open Source Programming Language

Ever heard of TypeScript. Well it is an open source programming language developed and maintained by Microsoft. It is basically a superset of JavaScript which provides static typing and class based object oriented programming to JavaScript. So in other words you can say every JavaScript program is also a TypeScript program. Pretty explanatory…right ! You can learn a lot about TypeScript from http://www.typescriptlang.org/

What makes TypeScript different

Well there can be various possible reasons why TypeScript is different. For me I feel the following reasons to make this programming language different.

  • It is an open source programming language under Apache 2.0 license
  • For Visual Studio developers, you can download and install TypeScript from the following location TypeScript 1.3 for Visual Studio 2013
  • It follows both the JavaScript patterns Module Pattern (Using closures to hide names and to encapsulate private data) and Class Pattern (using Prototype chains to implement various ways on object oriented inheritance mechanism)
  • It provides compile time syntax and type checking.

What are the complexities of TypeScript

There are few glitches on using TypeScript. Following are the ones which I think might be critical for us developers.

  • You need install Web Essentials for Visual Studio to get split screen editor for TypeScript
  • It will not create a dynamic JavaScript *.js file on Save but you need to build it. Again you need Web Essentials in Visual Studio to create dynamic *.js file

How can I use TypeScript in Visual Studio

Once you have Web Essentials installed for your Visual Studio 2013,  then you will find new Project Templates for TypeScript. I am using HTML template for my demo.

image

Once the project is created you can see the below files generated in your Project explorer.

image

Can you see although there is no aap.js file present in the Project explorer, still we are referencing app.js file in our index.html page. Now what we need to know is that the file app.ts file generated is the TypeScript file which always have *.ts extension. This file is going to generate dynamically the *.js file once the project is compiled and build. Open the app.ts file and you can view the split window. There are two files *.js and *.js.map that gets generated once you compile and build your *.ts file. The *.js.map file contains the mapping information between the TypeScript (*.ts) file and corresponding JavaScript (*.js) file.

image

Let’s go ahead and build the solution and see what happens. Once you build, immediately you will see that the blank JavaScript viewer got some block of code. Unlike in CoffeeScript while you save your code block of CoffeeScript, JavaScript gets generated dynamically but here you need to build the project to generate JavaScript dynamically.

image

Alright let’s see what happens when we run the application. I am particularly interested to know what are the files got there through Chrome Network profiler. Here is what I found.

image

Ok, now I know how to use TypeScript in Visual Studio. Let’s have some programming knowledge on TypeScript which can be useful for us. I am going to cover a few just for understanding purpose. To get all the features and programming syntax of TypeScript, please go ahead with the URL I had shared before.

If you want to add a new TypeScript file, then Web Essentials will help you to do that. Right-click your project and then add the script file.

image

Programming in TypeScript

Here I am going to demonstrate some of the programming constructs of TypeScript although I am not going to the depth level of it and explain all the features. You can use the Playground of TypeScript to write you piece of code and view the generated JavaScript code block.

image

I have added a new TypeScript file named LanguageSpec.ts to my project. As we know on building the project the respective JavaScript file LanguageSpec.js and mapping file LanguageSpec.js.map will be created. I have referred my JavaScript file in Index.html page.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
http://lanugagespec.js
</head>
<body>

</body>
</html>

Now let’s get ahead on writing some TypeScript programming construct.

Interface: Implementation of an Interface in TypeScript is pretty concise having the shape the interface requires  without an explicit implements clause

interface User {
username: string;
email: string;
usertype: string;
}
function getUser(user: User) {
return "Welcome " + "<b>" + user.username + "</b><br />" +
"<b>Email:</b> " + user.email + "<br />" +
"<b>Type:</b> " + user.usertype + "<br />";
}
var userSpec = {
username: "jghosh",
email: "jghosh@idevexplorer.com",
usertype: "Administrator"
};


window.onload = () => {
var div = document.getElementById('content');
div.innerHTML = getUser(userSpec);
};

Class: TypeScript supports with ES6 proposal for class-based object-oriented programming.

//*******************Class Declaration*************************
class UserModel {
fullname: string;
constructor(public username,
public email,
public usertype,
public firstname,
public lastname) {
this.fullname = "Welcome " + "<b>" + firstname + " " + lastname + "</b><br />"
}
}
interface UserInterface {
username: string;
email: string;
usertype: string;
firstname: string;
lastname: string;
}
function getUserDetails(user: UserInterface) {
return "<br />Good to see you here " + "<b>" + user.firstname + " " + user.lastname + "</b><br />";
}


interface Label extends HTMLElement {
}
function CreateUserLabel(): Label {
return <Label> document.createElement("label");
}

var userobject = new UserModel("jghosh", "jghosh@idevexplorer.com", "Administrator", "Joydeep", "Ghosh");

window.onload = () => {
var div: HTMLElement = document.getElementById('content');
div.innerHTML = getUser(userSpec);

var userLabel = CreateUserLabel();
userLabel.innerHTML = getUserDetails(userobject);
div.appendChild(userLabel);

};

Modules: Modules provide flexibility to group related logic, encapsulate it, structure the code, etc. The functionality is visible only inside the module but can be visible from outside by providing the keyword “export”

//*******************Module Formation*************************

interface Link extends HTMLAnchorElement {
}
interface Div extends HTMLDivElement {
}

function CreateTypeScriptLink(): Link {
return <Link> document.createElement("a");
}

function CreateWelComeMessage(): Label {
return <Label> document.createElement("label");
}

function CreateDivElement(): Div {
return <Div> document.createElement("div");
}

module WelcomeMessage {
export class WelcomeMessageDetails {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
DefineMessage() {
var customLabel = CreateWelComeMessage();
customLabel.innerHTML = this.greeting;

var typescriptlink = CreateTypeScriptLink();
typescriptlink.href = "http://www.typescriptlang.org";
typescriptlink.text = "TypeScript";
customLabel.appendChild(typescriptlink);

return customLabel.innerHTML;
}
}
}

var greetingMessage = new WelcomeMessage.WelcomeMessageDetails(
"<br />Welcome to the group! You can get more details of TypeScript from the following link ");



window.onload = () => {
var div: HTMLElement = document.getElementById('content');
div.innerHTML = getUser(userSpec);

var userLabel = CreateUserLabel();
userLabel.innerHTML = getUserDetails(userobject);
div.appendChild(userLabel);

var button = document.createElement('button');
button.textContent = "Show Message";
button.onclick = function () {
var value = greetingMessage.DefineMessage();
//alert(value);
var dynamicdiv = CreateDivElement();
dynamicdiv.innerHTML = value;
div.appendChild(dynamicdiv);
};

div.appendChild(button);

};

Well there are much more to learn about TypeScript. You can download the sample code I did and have your own piece of code to play with TypeScript.

Download Source

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s