Have you heard about the TypeScript?
If ‘No’ then, TypeScript is a superset of JavaScript that combines type checking and static analysis, explicit interfaces, and best practices into a single language and compiler. It is an open source programming language developed by Microsoft. This was announced on October 1st in Soma Segar’s blog and Anders Hejlsberg, lead architect of C#, has worked with Steve Lucco and Luke Hoban on TypeScript development.
Why TypeScript?
JavaScript is just a scripting language and it was not really designed as a language for big Web apps, JavaScript doesn't provide classes, modules etc. for a real time application development. TypeScript extends JavaScript to do these all. Some of the main points are given below,
- TypeScript is an Open Source language developed by Microsoft (under the Apache 2.0 license).
- TypeScript is a super-set of JavaScript.
- TypeScript adds optional types, classes, and modules to JavaScript.
- TypeScript compiles to readable, standards-based JavaScript.
- TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS.
- TypeScript is designed for development of large applications and when compiled it produces JavaScript to ensure compatibility.
- TypeScript extends JavaScript syntax, so any existing JavaScript programs work with TypeScript without any changes.
- TypeScript file extension is .ts (usually) and TypeScript compiler will generate output as a .js file.
- TypeScript is syntactically very similar to JScript .NET.
- TypeScript is very easy to learn and understand.
Language features
- Classes
- Interfaces
- Modules
- Type annotations
- Compile time type checking
- Arrow functions (Similar to Lambda Expression in C#)
Difference between JavaScript and TypeScript
TypeScript is a superset of JavaScript. TypeScript extends JavaScript syntax, so any existing JavaScript programs work with TypeScript without any changes. TypeScript provides static typing through type annotations to enable type checking at compile-time. This is optional and can be ignored to use the regular dynamic typing of JavaScript. TypeScript can consume existing JavaScript scripts but only compiled TypeScript scripts can be consumed from JavaScript.
Editor Support
Currently TypeScript Template/Syntax highlighting is supported in Visual Studio 2012 by installing TypeScript plug in and also Syntax highlighting to the TypeScript (.ts) files are supported in text editors like
Sublime Text, Vim and Emacs.
In VS 2012 Editor If we open TypeScript file there we have options like Refactor, Go To Definition etc .
Note: TypeScript is not depend on any IDE's, you can use compiled output of TypeScript file in any application where JavaScript is supported.
How to get it
You can install TypeScript in two ways,
Note : Close all other applications to avoid installation problems.
If you are installing through the msi then you will get the below screen.
If you wanted to see TypeScript in action without installation then click here.
How to compile TypeScript
To consume TypeScript file in our application we need to compile it. When its compiled it produces a JavaScript (.js) file. You can compile TypeScript file using the TypeScript Compiler (tsc).
If you are using TypeScript in Visual Studio 2012 it will automatically compile the ts files when doing build action otherwise you can add a pre-build action command to compile all the TypeScript files to JavaScript.
The TypeScript compiler will be installed in the below location by default.
C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0
Or
C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0
To compile the TypeScript file we need to use the below command in command prompt,
tsc filename.ts
Once its compiled successfully then there will be a .js file generated with the same filename in same location. you can change this settings by passing the command line arguments.
If you want to automate the TypeScript compiling process then you might be interested in Sholo.TypeScript.Build , Web Essentials 2012.
TypeScript Project/File Templates
Once you have installed plug-in for Visual Studio 2012, you will get the below templates,
HTML Application with TypeScript
MVC – TypeScript Internet Application
TypeScript File
My first HTML Application with TypeScript.
Now I'm going to create a simple HTML Application with TypeScript
To create a new html application with typescript, go to File->New-Project
Once you click on the 'OK' button then then solution file will be created with the default template files like below,
We can see that the app.js is depend on app.ts. The default app.ts file contains class and constructor etc see the code below,
The TypeScript file will be (needs to be) compiled to the JavaScript (app.js), see the compiled output from TypeScript,
and we are referring the JavaScript (not the typescript) file in our web page.
When you build(or re-build) this application you can see that the TypeScript file is getting compiled to JavaScript file.
This auto compilation is happened because of the below entry in .??proj file
Wen you run this application the output prints the current date and time.
You can play with TypeScript online on Playground
Read More
Summary
In this article I have given an introduction to TypeScript. I hope you have enjoyed this article and got some value addition to your knowledge.
I have put my time and efforts on all of my articles, please don't forget to mark your votes, suggestions and feedback to improve the quality of this and upcoming articles.
Submit an article or tip
News 
Suggestion 
Bug 
Joke 
Rant 
Admin 