Not so long ago Microsoft announced a new language trageting on front-end developers. Everybody's reaction was like: Why?!! Is it just Microsoft darting back to Google?! So, why a new language? JavaScript has its bad parts. Mostly you can avoid them or workaraund. You can emulate class-based OOP style, modules, scoping and even run-time typing. But that is doomed to be clumsy. That's not in the language design. Google has pointed out these flaws, provided a new language and failed. Will the story of TypeScript be any different?

17. var inx: number = 1,
text: string = “Lorem”,
isReady: bool = false,
arr: string[],
obj: ObjInterface = factory.getObj(),
mixedVal: any;

18. var obj: { x: number, y: number },
fn: ( x: number, y?: any ) => number,
constr: new() => ObjInterface;

19. var treatItems = function( arr,
callback ) {
// do something
return arr;
};

20. var treatItems = function(
arr: string[],
callback: (value: string,
inx: number,
arr: string[]) => string[]) {
// do something
return arr;
};

21. var treatItems = function( arr,
callback ) {
// do something
return arr;
};

23. class Mamal
{
private nickname: string;
constructor( nickname: string = "Noname" ) {
this.nickname = nickname;
}
public getNickname():string {
return this.nickname;
}
}

24. class Cat extends Mamal
{
private family: string = "Felidae";
constructor( nickname: string ) {
super( nickname );
}
public getFamily():string {
return this.family;
}
}

25. // Generated JavaScript: helper
var __extends = this.__extends || function (d,
b) {
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
}

26. // Generated JavaScript: classes
var Mamal = (function () { … })();
var Cat = (function (_super) {
__extends(Cat, _super);
function Cat(nickname) {
_super.call(this, nickname);
this.family = "Felidae";
}
Cat.prototype.getFamily = function () {
return this.family;
};
return Cat;
})(Mamal);

28. interface Point {
x: number;
y: number;
}
function getDistance( pointA: Point, pointB: Point ) {
return Math.sqrt(
Math.pow( pointB.x - pointA.x, 2 ) +
Math.pow( pointB.y - pointA.y, 2 )
);
}
var result = getDistance(
{ x: - 2, y: - 3 }, { x: - 4, y: 4 })

29. interface Mover
{
move(): void;
}
interface Shaker
{
shake(): void;
}
interface MoverShaker extends Mover, Shaker
{
}

31. module graphic
{
export class Point
{
x: number;
y: number;
constructor( x: number = 0, y: number = 0 )
{
};
}
}
var point = new graphic.Point( 10, 10 );

32. // File main.ts:
import log = module ( "log” );
log.message( "hello" );
// File log.js:
export function message(s: string) {
console.log(s);
}

34. (x) => { return Math.sin(x); }
(x) => Math.sin(x);
x => { return Math.sin(x); }
x => Math.sin(x);

35. var messenger = {
message: "Hello World",
start: function() {
setTimeout( () =>
{ alert( this.message ); }, 3000 );
}
};
messenger.start();

37. class Shape { ... }
class Circle extends Shape { ... }
function createShape( kind: string ): Shape {
if ( kind === "circle" ) return new Circle(); ...
}
var circle = <Circle> createShape( "circle" );

39. interface JQuery
{
text(content: string);
}
interface JQueryStatic {
get(url: string, callback: (data: string) => any);
(query: string): JQuery;
}
declare var $: JQueryStatic;

41. /// <reference path="jquery.d.ts" />
module Parallax
{
export class ParallaxContainer
{
private content: HTMLElement;
constructor( scrollableContent: HTMLElement ) {
$( scrollableContent ).scroll(( event: JQueryEventObject ) => {
this.onContainerScroll( event );
});
}
private onContainerScroll( e: JQueryEventObject ) : void {
// do something
}
}

42. gist.github.com/3845543

45. https://github.com/joyent/node/wiki/In
stalling-Node.js-via-package-
manager

46. npm install -g typescript

47. tsc example.ts

48. tsc --target ES5 example.ts

49. https://github.com/niutech/typescript-
compile

51. <?xml version="1.0"?>
<!DOCTYPE project>
<project name="tsc" basedir="." default="build">
<target name="build">
<!-- Compile all .ts files -->
<apply executable="tsc" parallel="true">
<srcfile/>
<fileset dir="." includes="**/*.ts"/>
</apply>
<!-- Lint all required CSS, JS files -->
<!-- Concatenate all required CSS, JS files -->
<!-- Compress built CSS, JS files -->
</target>
</project>

52. ant