Typescript overview

Andrea Boschin

http://1drv.ms/1flJCDT

Typescript overview

Javascript

why?

Javascript

any browserany hostany os

Javascript

hard to learnhard to read

hard to maintain

Javascript

type unsafeprone to tricksnon-scoped

Typescriptstarts with Javascript, ends with

Javascript

è un superset tipizzato di Javascript quindi

il codice Javascript è già Typescript(on steroids)

Typescriptstarts with Javascript, ends with

Javascript

produce Javascript quindiany browser, any host, any os!

Typescriptstatic type checking

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

Cannot convert ‘string’ to ‘number’

Typescriptstructural typing

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

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

Declares a type inline

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

JavascriptInterface output

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

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

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

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

Typescriptcallbacks

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

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

Typescriptexternal libs

definition files

https://github.com/borisyankov/DefinitelyTyped

jqueryangular knockout

.d.ts

.d.ts

.d.ts

Typescriptmemo

VS debugger works! (thanks to «sourcemaps»)

Typescript compiler is developed with Typescript

Compiler can be hosted in ECMASCRIPT 3 browsers

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

Typescripttoolset

http://www.typescriptlang.org

visual studio 2012/2013plugin available

visual studio 2013 - update 2 - Feb 25integrated

other IDE?Sublime Text, EMACS, Vim

LAB

feedback

10

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

• [email protected]

• TWITTERhttp://twitter.com/aboschin

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

ANDREA BOSCHINMost Valuable Professional

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

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