typescript overview

23
Andrea Boschin http:// 1drv.ms/1flJCDT Typescript overview

Upload: codeblock

Post on 15-Jan-2015

1.405 views

Category:

Technology


1 download

DESCRIPTION

Slides presented during the Community LAB (Typescript in the real world)

TRANSCRIPT

Page 1: Typescript overview

Andrea Boschin

http://1drv.ms/1flJCDT

Typescript overview

Page 2: Typescript overview

Javascript

why?

Page 3: Typescript overview

Javascript

any browserany hostany os

Page 4: Typescript overview

Javascript

hard to learnhard to read

hard to maintain

Page 5: Typescript overview

Javascript

type unsafeprone to tricksnon-scoped

Page 6: Typescript overview

Typescriptstarts with Javascript, ends with

Javascript

è un superset tipizzato di Javascript quindi

il codice Javascript è già Typescript(on steroids)

Page 7: Typescript overview

Typescriptstarts with Javascript, ends with

Javascript

produce Javascript quindiany browser, any host, any os!

Page 8: Typescript overview

Typescriptstatic type checking

var a: string = 'Andrea';var b: number = 10;var c: number = a + b;

Cannot convert ‘string’ to ‘number’

Page 9: Typescript overview

Typescriptstructural typing

var speaker: { firstName: string; lastName: string; };

speaker ={ firstName: 'Andrea', lastName: 'Boschin'};

Declares a type inline

Page 10: Typescript overview

Typescriptinterfaces

interface IPerson{ firstName: string; lastName: string; birthDate: Date;}

var developer: IPerson = { firstName: 'Andrea', lastName: 'Boschin', birthDate: new Date(1968, 10, 27) };

Declares an interface

Page 11: Typescript overview

JavascriptInterface output

var developer = { firstName: 'Andrea', lastName: 'Boschin', birthDate: new Date(1968, 10, 27)};

Page 12: Typescript overview

Typescriptclasses

class Person{ firstName: string; lastName: string; birthDate: Date;

getAge(): number { return new Date().getFullYear() - this.birthDate.getFullYear(); }}

var speaker: Person = new Person();speaker.firstName = 'Andrea';speaker.lastName = 'Boschin';speaker.birthDate = new Date(1968, 10, 27);console.log(speaker.getAge());

Page 13: Typescript overview

Javascriptclass output

var Person = (function () { function Person() { } Person.prototype.getAge = function () { return new Date().getFullYear() - this.birthDate.getFullYear(); }; return Person;})();

var speaker = new Person();speaker.firstName = 'Andrea';speaker.lastName = 'Boschin';speaker.birthDate = new Date(1968, 10, 27);console.log(speaker.getAge());

Page 14: Typescript overview

Typescriptmodules

module model{ export class Person { /* person implementation */ }

export module collections { export class PersonList { /* collection implementation */ } }}

var me: model.Person = new model.Person();

var people: model.collections.PersonList = new model.collections.PersonList();

Page 15: Typescript overview

Typescriptcallbacks

class Service{ public getItems(success: (result: any[]) => void): void { success(["a", "b", "c"]); }}

function(result: any[]): void {}

Page 16: Typescript overview

Typescriptexternal libs

definition files

https://github.com/borisyankov/DefinitelyTyped

jqueryangular knockout

.d.ts

.d.ts

.d.ts

Page 17: Typescript overview

Typescriptmemo

VS debugger works! (thanks to «sourcemaps»)

Typescript compiler is developed with Typescript

Compiler can be hosted in ECMASCRIPT 3 browsers

Page 18: Typescript overview

Typescriptwhy

support for ECMAScript 6 in ECMAScript 3 browsers open Source and available to download on codeplex tooling support, for type safety, inference and refactoring static types and compilation catches mistakes earlier structural interfaces & typing works well with existing projects

Anders Hejlsberg is involved.

enables programming in the large

Page 19: Typescript overview

Typescripttoolset

http://www.typescriptlang.org

visual studio 2012/2013plugin available

visual studio 2013 - update 2 - Feb 25integrated

other IDE?Sublime Text, EMACS, Vim

Page 20: Typescript overview

LAB

Page 21: Typescript overview

feedback

10

o feedback su:• http://xedotnet.org/feedback

[email protected]

• TWITTERhttp://twitter.com/aboschin

• FACEBOOKhttp://www.facebook.com/thesmallgrove

ANDREA BOSCHINMost Valuable Professional

Page 22: Typescript overview

Prossimo Meeting

11 aprile 2014 – Virtual Meeting

21:00 – Pragmatic JavascriptSpeaker: D.Morosinotto

Un viaggio nel "mondo Javascript": partendo dalle basi (tipi di dati, oggetti literal, array associativi, prototype e this...) vedremo come sia possibile implementare dei Pattern OOP (Closure, Revealing Modulo, Mixin...) Forse scopriremo che JS può fare qualcosa di più che gestire qualche click e modificare degli elementi del DOM con JQuery, a voi l'ardua sentenza...

Page 23: Typescript overview

Prossimo Meeting

4 aprile 2014 – Community Meeting: Visual Studio

20:00 - Sviluppare applicazioni web (completamente) on-line con Visual Studio «Monaco»Speaker: M.ParenzanWindows Azure e Team Foundation Server hanno cominciato a cambiare in una maniera incredibile il modo di gestire i progetti software e tutta l'attività professionale dello sviluppatore. Ora il passaggio ulteriore: un Visual Studio che gira nel browser... 21:30 - Utilizzare Git con TFSSpeaker: D.VernoleIn questa sessione vedremo come sia possibile utilizzare GIT come repository dei sorgenti in TFS 2013 in alternativa a Visual Source Control