Click here to Skip to main content
14,608,056 members

Strongly Typed JavaScript (TypeScript) – No Excuse Now For Not Diving Deep into JavaScript!!

Rate this:
5.00 (2 votes)
Please Sign up or sign in to vote.
5.00 (2 votes)
31 Jul 2020CPOL
Strongly typed JavaScript (TypeScript)
This post gives an overview of what TypeScript is, how to use it and where to quickly learn it. You will also see some quick examples to showcase why every JavaScript application developer should use TypeScript.

The mainstay of .NET or for that matter, C# has been its strong type checking which we get at compile time. It's so much a part of C#, that we somewhat take it for granted. If we remove Type checking in C#/VS, we’ll be severely handicapped for sure. Type checking and Intellisense are the 2 most loved features in .NET/Visual Studio without which we (.NET developers) cannot live.

JavaScript has been around for ages, but only in the past 3-4 years has it gained real traction as an application programming language to reckon with. Before this, JavaScript was just considered a scripting language to do minor UI stuff in HTML. Many of you might know that JavaScript is actually an (almost) Object Oriented Language, BUT coding in JavaScript has always been difficult for people who are accustomed to write server code in C# or even Java. Reason being the syntax for doing even simple things like creating classes and interfaces are way different from what we have learnt in C#. It has a steep learning curve. Also, another undoing for JavaScript has been that there weren’t many Dev tools around which could bring in comprehensive Type checking to JavaScript.

This is where TypeScript comes in. I know how I keep on complaining that Microsoft is making life easy for developers by abstracting the intricacies of technology and how at the same time it is making beginner programmers oblivious to the “real” way things work in the WEB. And TypeScript is another shot at the same thing by Microsoft. TypeScript may abstract developers from the actual JavaScript syntax, but it’ll encourage developers to code more in JavaScript, which will in turn result in more beautiful and responsive designs.

TypeScript is an Microsoft open source project. I know to some people it may sound like an Oxymoron (Microsoft and Open source !! Surprised smile), BUT that’s how the Ship is being steered recently at Microsoft.

There have been a lot of open source projects Microsoft has published (like Entity Framework, ASP.NET MVC, etc.) recently, so it is something people should get used to.

So, What is TypeScript?

TypeScript is a superset of JavaScript actually, which eventually compiles to JavaScript, BUT the syntax for TypeScript is more along the lines of other OO languages like C#. Moreover, any JavaScript code is a valid TypeScript code. Also TypeScript brings along with it Intellisense and (good enough) type checking during development time.

How Do I Use TypeScript?

You could just download and install the TypeScript Plugin for VS 2012 from Microsoft and you can straight away start using TypeScript. TypeScript files are files with extension .ts, and they can be compiled to JavaScript (.js) files simply by calling the TypeScript compiler (tsc.exe) from command prompt.

Enough of Gyan, its time for some quick examples to showcase why every JavaScript application developer should use TypeScript. I’ll demonstrate this with a very simple example. Say we need to declare and use a class in JavaScript.

The code we’ll need to write in JavaScript would look like this:

var Person = (function () {
function Person(Name, Age) {
this.Name = Name;
this.Age = Age;
}
Person.prototype.SayHi = function () {
return "Hello, " + this.Name;
};
return Person;
})();

var person = new Person("Sam", 28);

console.log(person.SayHi());

As can be seen from the above code, it's not exactly how a C# programmer would go about creating and using classes.

If we write the same code in TypeScript, it would look something like below:

class Person {
Name: string;
Age : number;
constructor(Name: string, Age:number) {
this.Name = Name;
this.Age = Age;
}

SayHi() {
return "Hello, " + this.Name;
}
}

var person = new Person("Sam",28)

console.log(person.SayHi())

The above code when compiled using tsc.exe produces a JS file which has the exact code written previously.

Moreover, you also get Intellisense as well as Type Checking (familiar territory Smile) in Visual Studio while using TypeScript:

image

Where Can I Quickly Learn TypeScript?

http://www.typescriptlang.org/ is your GOTO site for anything related to TypeScript. It features some quick demos and a nice video tutorial for you to get started with TypeScript. It also has a detailed Language Specifications which is surprisingly very user friendly.

Also the website has a very cool Playground where you can try out some examples using TypeScript and it’ll generate the JavaScript side-by-side.

I would say no programming language (like JavaScript) is difficult to learn if the tools provided are good enough. Of course, you’ll have to be aware of the tools (like TypeScript) available at hand to accomplish the same.

If you have any further queries regarding using TypeScript, please give me a shout in the comments section.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Chinmoy Mohanty
Software Developer
United States United States
I am a Developer working across multiple Technologies like .NET, Scala, Angular and NodeJS.
Passionate about WEB technologies more than anything.
Fascinated about the idea of how the WEB world and the WinForm world are slowly merging into each other, with a very thin line to differentiate them.

I am an active blogger and I blog mostly about Technology. Also, I have presented at certain points in the past on technical topics.

My Blog


Life & Tech

Programming Community Profiles


Stack Overflow
GitHub

Presentations


Slideshare

Social Profiles


Facebook | Twitter | LinkedIn | Google+

Comments and Discussions

 
Praisethanks Pin
blxstar5-Aug-20 22:44
Memberblxstar5-Aug-20 22:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 17 Jul 2014

Tagged as

Stats

7.5K views
2 bookmarked