Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript Introduction

5,271 views

Published on

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?

Published in: Technology
  • Be the first to comment

TypeScript Introduction

  1. 1. var inx: number = 1, text: string = “Lorem”, isReady: bool = false, arr: string[], obj: ObjInterface = factory.getObj(), mixedVal: any;
  2. 2. var obj: { x: number, y: number }, fn: ( x: number, y?: any ) => number, constr: new() => ObjInterface;
  3. 3. var treatItems = function( arr, callback ) { // do something return arr;};
  4. 4. var treatItems = function( arr: string[], callback: (value: string, inx: number, arr: string[]) => string[]) { // do something return arr;};
  5. 5. var treatItems = function( arr, callback ) { // do something return arr;};
  6. 6. class Mamal{ private nickname: string; constructor( nickname: string = "Noname" ) { this.nickname = nickname; } public getNickname():string { return this.nickname; }}
  7. 7. class Cat extends Mamal{ private family: string = "Felidae"; constructor( nickname: string ) { super( nickname ); } public getFamily():string { return this.family; }}
  8. 8. // Generated JavaScript: helpervar __extends = this.__extends || function (d,b) { function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __();}
  9. 9. // Generated JavaScript: classesvar 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);
  10. 10. 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 })
  11. 11. interface Mover{ move(): void;}interface Shaker{ shake(): void;}interface MoverShaker extends Mover, Shaker{}
  12. 12. module graphic{ export class Point { x: number; y: number; constructor( x: number = 0, y: number = 0 ) { }; }}var point = new graphic.Point( 10, 10 );
  13. 13. // File main.ts:import log = module ( "log” );log.message( "hello" );// File log.js:export function message(s: string) { console.log(s);}
  14. 14. (x) => { return Math.sin(x); }(x) => Math.sin(x);x => { return Math.sin(x); }x => Math.sin(x);
  15. 15. var messenger = { message: "Hello World", start: function() { setTimeout( () => { alert( this.message ); }, 3000 ); }};messenger.start();
  16. 16. class Shape { ... }class Circle extends Shape { ... }function createShape( kind: string ): Shape { if ( kind === "circle" ) return new Circle(); ...}var circle = <Circle> createShape( "circle" );
  17. 17. interface JQuery{ text(content: string);}interface JQueryStatic { get(url: string, callback: (data: string) => any); (query: string): JQuery;}declare var $: JQueryStatic;
  18. 18. /// <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 }}
  19. 19. gist.github.com/3845543
  20. 20. https://github.com/joyent/node/wiki/In stalling-Node.js-via-package- manager
  21. 21. npm install -g typescript
  22. 22. tsc example.ts
  23. 23. tsc --target ES5 example.ts
  24. 24. https://github.com/niutech/typescript- compile
  25. 25. <?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>
  26. 26. ant

×