Hello TypeScript – Getting Started




A first look at TypeScript and what it takes to get started with the newest language on the block from Microsoft using Visual Studio 2012.

What is TypeScript?

October 1, 2012 will probably be remembered in the history of Software Development when Microsoft Technical Fellow and father of C# Anders Hejlsberg announce TypeScript, a new Type conformant JavaScript. A language that compiles down to plain JavaScript but on its own has all the hallmarks of a language with first class tooling support in Visual Studio. If you have an hour to spare, go through Anders introduction, you’ll love it. If not, go through this article and you’ll get the gist. Bottomline, don’t start ranting too soon. TypeScript has a lot to offer.

Getting Started

Microsoft has made it really easy to get started with TypeScript. You have an online web-based code editor cum compiler. They also have a Visual Studio 2012 plugin that works on the Professional and above editions. Since a lot has been made about the benefits of ‘tooling’ while introducing TypeScript, we will download and install the TypeScript plugin.

Note: TypeScript is available in Sublime Text, Vi, Emacs editor

Once the Plugin is installed, start Visual Studio, find the Html Application with TypeScript. Strangely enough it goes under the Visual C# category hence it took a minute to find.

hello-typescript-world-new-solution

The default application looks as follows

default-code-generated

The app.ts file is the Typescript file and the app.js is the compiled output file. Fact is app.js is compiled from TypeScript on each compile. If you run the app as is, it will open up a browser and show a page with a ticking timer

clip_image001

Digging a little


With the default app running now let’s look at the TS code and JS code it compiles to, side-by-side

cdode-side-by-side

Amazingly for this little snippet, the number of lines of TS code and the number of JS code is identical!

Now let’s try to understand the TS code a little.
- As C# or VB.NET developers, we are familiar with the class keyword. So we are creating a class called Greeter to start off with.
- Next we are declaring three variables, element, span and timerToken. Here the type definition is a little different from C# as in the Type is annotated after the variable name separated by a colon(:) instead of the C# style [typeName] [variableName] (e.g. String myName;).
- So the variable element is of type HTMLElement
- The variable span is of type HTMLElement
- The variable timerToken is of type number

Here the most significant thing is if you try to assign a string to the timerToken, you immediately get type mismatch feedback as seen below:

type-safety

- Next noteworthy thing is ‘scoping’ of this keyword. As you can see inside a class this refers to the scope inside the class only. So when you say this. in typescript only the variables in the scope of the class light up. As you see in the JavaScript counterpart, this is being saved in _this and used further.
- Next we have ‘Lambda’ expressions for anonymous functions. A little superfluous but they the  C# geek inside me loves it.

lambda-expressions

Other Goodies

NameSpaces


Other goodies include support for ‘namespaces’ using the module keyword. The below example is from the ‘Modules’ walkthrough on http://www.typescriptlang.org/Playground/.

modules

Inheritance

As of now, simple Inheritance is supported in TypeScript. The following example again shows the sample from the TypeScript site.

inheritance

As seen above, in JavaScript, inheritance is implemented using ‘composition’ where the base ‘class’ is passed as a variable in the constructor.

Signing Off

The one thing I didn’t find yet was typecasting. For example I can’t typecast a Button retrieved using
document.getElementById(…) from a HTMLElement into a HTMLButtonElement.

lack-of-typecasting

As a budding language, I am sure the constructs will appear.

In the coming days, we will work more on TypeScript and develop a more complete application using TypeScript to understand it better.

That was a very quick a brief introduction to TypeScript. Microsoft’s newest language. Did it get you excited?

I believe it presents a very nice middle ground for typed language developers who have worked in C# and VB.NET but have been on the fence regarding JavaScript. What do you think?

Happy TypeScripting!!!

Download the source code here (click on Zip to download as .zip)

Will you give this article a +1 ? Thanks in advance




comments

18 Responses to "Hello TypeScript – Getting Started"
  1. ronmurp said...
    October 3, 2012 at 2:13 AM

    Why the change in syntax for the variables, when C# syntax could have been used?

  2. sumitmaitra said...
    October 3, 2012 at 2:22 AM

    Not exactly sure how language specs work, but could it be for ECMA compliance? Anders said they are aligning to it and will continue as the spec progresses till adoption.

    Not sure though!

    Anyone else thinks that syntax is a little 'Delphi'ish ? Anders older baby ;-)

  3. Anonymous said...
    October 3, 2012 at 7:28 AM

    Yes I tool feel the syntax is influenced by Delphi

  4. Joshua Poehls said...
    October 4, 2012 at 5:48 AM
    This comment has been removed by the author.
  5. Joshua Poehls said...
    October 4, 2012 at 5:50 AM
    This comment has been removed by the author.
  6. Joshua Poehls said...
    October 4, 2012 at 5:50 AM
    This comment has been removed by the author.
  7. Joshua Poehls said...
    October 4, 2012 at 5:51 AM

    You can do the typecast from HTMLElement to HTMLButtonElement like this:

    var button = <HTMLButtonElement>document.createElement('button');

  8. Mark said...
    October 4, 2012 at 3:48 PM

    @ronmurp totally agree with you.

    Why use "module" not "namespace" ?

    Why do this ?

    class snake extends animal

    instead of

    class snake : animal

    its just different enough to be completely annoying and id rather know Jscript inside out and how to get the most out of it than learn yet another language syntax that compiles into JS anyway.

    saying that, I'll be keeping an eye on it ! ;)

  9. Mitul Suthar said...
    October 5, 2012 at 5:44 AM

    Just a note: The plugin works on Visual Studio 2012 Express for web as per the download page details http://www.microsoft.com/en-us/download/confirmation.aspx?id=34790

  10. Anonymous said...
    October 5, 2012 at 8:32 AM

    Thanks for the info Mitul Suthar.

  11. gc said...
    October 5, 2012 at 5:13 PM

    My Top 10 reasons why TypeScript will be widely adopted: http://www.pursuitofgreatdesign.com/2012/10/top-10-reasons-why-typescript-will-be.html

  12. Ume Markel said...
    October 7, 2012 at 9:11 PM

    Doesn't make any sense. Who will use TypeScript? A newbie? For a long term experienced developer, JavaScript should not be a problem. There is no "class" concept in JavaScript, so what is the purpose for using a strong type language to "wrap" JavaScript?

    To be honest, It will mislead developers and will be anther silverlight then hit to wall.

  13. Wynne Neal said...
    October 8, 2012 at 12:54 AM

    I like this new wrapping on JavaScript.Freshers will like to learn this new concept.new technique can lead new idea into the mind of developers.

  14. Anonymous said...
    October 8, 2012 at 11:43 PM

    One worked on NodeJS, CoffeeScript can find the similarities. Its seems like coffeescript code with c# syntax(with strongType) and using nodejs keywords.

  15. James Hancock said...
    October 12, 2012 at 7:09 AM

    How does one create a .ts file and have it compile automatically in an existing mvc.net 4 project? I can't get it to add or handle .ts after installation.

    thanks!

  16. sumitmaitra said...
    October 12, 2012 at 7:22 AM

    HI James,
    You have to hack around a little for it to work with MVC 4. MVC 3 gets a TypeScript site template of it's own as of now.

    In the project file add the following















    For more details refer to Shiju Vergese's article here http://weblogs.asp.net/shijuvarghese/archive/2012/10/02/using-typescript-in-asp-net-mvc-projects.aspx

  17. sumitmaitra said...
    October 12, 2012 at 7:28 AM

    Oops that didn't go very well...

    <ItemGroup>

    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />

    </ItemGroup>

    <Target Name="BeforeBuild">

    <Exec Command="&quot;$(PROGRAMFILES)\

    Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot;

    @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />

    </Target>

  18. codeBelt said...
    December 4, 2012 at 7:10 AM

    Nice post! I've been playing with TypeScript. Check out my TypeScript Tutorials

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions