TypeScript Introduction

download TypeScript Introduction

of 53

  • date post

    15-Jan-2015
  • Category

    Technology

  • view

    1.629
  • download

    4

Embed Size (px)

description

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?

Transcript of TypeScript Introduction

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

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