TypeScript Introduction

  • 1,611 views
Uploaded 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?! …

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?

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,611
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
50
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 = <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. /// <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. gist.github.com/3845543
  • 20. https://github.com/joyent/node/wiki/In stalling-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. <?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. ant