Download - TypeScript Introduction

Transcript
Page 1: TypeScript Introduction
Page 2: TypeScript Introduction
Page 3: TypeScript Introduction
Page 4: TypeScript Introduction
Page 5: TypeScript Introduction
Page 6: TypeScript Introduction
Page 7: TypeScript Introduction
Page 8: TypeScript Introduction
Page 9: TypeScript Introduction
Page 10: TypeScript Introduction
Page 11: TypeScript Introduction
Page 12: TypeScript Introduction
Page 13: TypeScript Introduction
Page 14: TypeScript Introduction
Page 15: TypeScript Introduction
Page 16: TypeScript Introduction
Page 17: TypeScript Introduction

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

Page 18: TypeScript Introduction

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

Page 19: TypeScript Introduction

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

Page 20: TypeScript Introduction

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

Page 21: TypeScript Introduction

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

Page 22: TypeScript Introduction
Page 23: TypeScript Introduction

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

Page 24: TypeScript Introduction

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

Page 25: TypeScript Introduction

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

Page 26: TypeScript Introduction

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

Page 27: TypeScript Introduction
Page 28: TypeScript Introduction

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

Page 29: TypeScript Introduction

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

Page 30: TypeScript Introduction
Page 31: TypeScript Introduction

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

Page 32: TypeScript Introduction

// File main.ts:

import log = module ( "log” );

log.message( "hello" );

// File log.js:

export function message(s: string) {

console.log(s);

}

Page 33: TypeScript Introduction
Page 34: TypeScript Introduction

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

Page 35: TypeScript Introduction

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

Page 36: TypeScript Introduction
Page 37: TypeScript Introduction

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

Page 38: TypeScript Introduction
Page 39: TypeScript Introduction

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

Page 40: TypeScript Introduction
Page 41: TypeScript Introduction

/// <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 } }

Page 42: TypeScript Introduction

gist.github.com/3845543

Page 43: TypeScript Introduction
Page 44: TypeScript Introduction
Page 45: TypeScript Introduction

https://github.com/joyent/node/wiki/In

stalling-Node.js-via-package-

manager

Page 46: TypeScript Introduction

npm install -g typescript

Page 47: TypeScript Introduction

tsc example.ts

Page 48: TypeScript Introduction

tsc --target ES5 example.ts

Page 49: TypeScript Introduction

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

compile

Page 50: TypeScript Introduction
Page 51: TypeScript Introduction

<?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>

Page 52: TypeScript Introduction

ant

Page 53: TypeScript Introduction