Click here to Skip to main content
Click here to Skip to main content

Getting Started With TypeScript ( Superset of JavaScript )

, 7 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Introduction of TypeScript with an HTML Application in Visual Studio 2012(TypeScript- JavaScript Development at Application Scale), TypeScript Project/File Templates, Editor Support, Compiling, Difference with JavaScript, Why TypeScript, Features

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 . 

Refactor Goto Definition , HTML Application with TypeScript - Shemeer  

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 

Playground TypeScript - Shemeer

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 votessuggestions and feedback to improve the quality of this and upcoming articles.  

License

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

Share

About the Author

Shemeer NS
Software Developer (Senior)
India India
Technology Specialist | CodeProject MVP | Visual Studio Gallery Contributor | Author | Geek | Netizen | Husband | ChessPlayer
 
Most of my articles are listed on top 5 of the respective 'Best articles of the month' and some of my articles are published on ASP.NET WebSite's Article of the Day section.
 
Check my contributions in Visual Studio Gallery and Code Project
 
Technical Blog: http://www.shemeerns.com
Facebook: http://facebook.com/shemeernsblog
Twitter : http://twitter.com/shemeerns
Google+ : http://google.com/+Shemeernsblog
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionAbout Typescript Architecture Pinmembermaya-1238-Oct-12 23:36 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.141022.1 | Last Updated 7 Oct 2012
Article Copyright 2012 by Shemeer NS
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid