Thanks to visit codestin.com
Credit goes to www.slideshare.net

var inx: number = 1,
   text: string = “Lorem”,
   isReady: bool = false,
   arr: string[],
   obj: ObjInterface = factory.getObj(),
   mixedVal: any;
var obj: { x: number, y: number },
   fn: ( x: number, y?: any ) => number,
   constr: new() => ObjInterface;
var treatItems = function( arr,
    callback ) {
   // do something
   return arr;
};
var treatItems = function(
   arr: string[],
   callback: (value: string,
              inx: number,
              arr: string[]) => string[]) {
       // do something
       return arr;
};
var treatItems = function( arr,
    callback ) {
   // do something
   return arr;
};
class Mamal
{
  private nickname: string;

    constructor( nickname: string = "Noname" ) {
      this.nickname = nickname;
    }

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

    constructor( nickname: string ) {
      super( nickname );
    }

    public getFamily():string {
      return this.family;
    }
}
// Generated JavaScript: helper

var __extends = this.__extends || function (d,
b) {
  function __() { this.constructor = d; }
  __.prototype = b.prototype;
  d.prototype = new __();
}
// 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);
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 })
interface Mover
{
  move(): void;
}
interface Shaker
{
  shake(): void;
}
interface MoverShaker extends Mover, Shaker
{
}
module graphic
{
       export class Point
       {
              x: number;
              y: number;
              constructor( x: number = 0, y: number = 0 )
              {
              };
       }
}
var point = new graphic.Point( 10, 10 );
// File main.ts:
import log = module ( "log” );
log.message( "hello" );

// File log.js:
export function message(s: string) {
   console.log(s);
}
(x) => { return Math.sin(x); }
(x) => Math.sin(x);
x => { return Math.sin(x); }
x => Math.sin(x);
var messenger = {
   message: "Hello World",
   start: function() {
     setTimeout( () =>
       { alert( this.message ); }, 3000 );
   }
};
messenger.start();
class Shape { ... }
class Circle extends Shape { ... }

function createShape( kind: string ): Shape {
      if ( kind === "circle" ) return new Circle(); ...
}

var circle = <Circle> createShape( "circle" );
interface JQuery
{
       text(content: string);
}
interface JQueryStatic {
       get(url: string, callback: (data: string) => any);
       (query: string): JQuery;
}
declare var $: JQueryStatic;
/// <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
    }
}
gist.github.com/3845543
https://github.com/joyent/node/wiki/In
    stalling-Node.js-via-package-
               manager
npm install -g typescript
tsc example.ts
tsc --target ES5 example.ts
https://github.com/niutech/typescript-
                compile
<?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>
ant
TypeScript Introduction

TypeScript Introduction

  • 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 extendsMamal { 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: importlog = 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.
  • 45.
    https://github.com/joyent/node/wiki/In stalling-Node.js-via-package- manager
  • 46.
    npm install -gtypescript
  • 47.
  • 48.
    tsc --target ES5example.ts
  • 49.
  • 51.
    <?xml version="1.0"?> <!DOCTYPE project> <projectname="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.