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)




17 comments:

ronmurp said...

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

Anonymous said...

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 ;-)

Anonymous said...

Yes I tool feel the syntax is influenced by Delphi

Anonymous said...
This comment has been removed by the author.
Anonymous said...
This comment has been removed by the author.
Anonymous said...
This comment has been removed by the author.
Anonymous said...

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

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

Mark said...

@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 ! ;)

Mitul Suthar said...

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

Anonymous said...

Thanks for the info Mitul Suthar.

Unknown said...

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.

Wynne Neal said...

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.

Anonymous said...

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

James Hancock said...

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!

Anonymous said...

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

Anonymous said...

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>

codeBelt said...

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