Introduzione a typescript

1. Introduzione a typescript Marco Assandri 21 marzo 2013

2. Agenda • Negli anni scorsi … • Problematiche e soluzioni esistenti • TypeScript - presentazione generale • Tools • Tipizzazione • Inferenza • Classi • Funzioni • Ereditarietà • Moduli • Integrazione librerie esterne • Debug • Links

3. Negli anni scorsi … • ASP.NET Web-Forms (2002) • minore importanza al Javascript grazie ai controlli del framework • tendenza a spostare il lavoro sul server • 2004-2005 inizia la moda AJAX (tecnologia già presente in IE5) con ampio utilizzo in Gmail e Google Maps • Microsoft rilascia controlli lato server anche per AJAX • jQuery (Agosto 2006) • Risolve molti problemi cross-browser e fornisce un’interfaccia comune • Semplifica la programmazione lato client • Firebug (2006 mi pare) => Developer Toolbar per Chrome e IE • Favoriscono moltissimo lo sviluppo e il debug di JS, CSS e HTML • Attivabili con F12

4. Negli anni scorsi … • HTML 5 • Ancora maggiore enfasi e strumenti per spostare il lavoro sul client • Ecmascript 5 aggiunge nuove funzionalità a Javascript • Possibilità di realizzare applicazioni web complesse e performantihttp://www.cuttherope.ie/ • Windows RT e Node.js • Permettono di utilizzare Javascript lato server e per scrivere applicazioni per Windows Store

5. Problematiche • Javascript manca di alcune strutture a cui siamo abituati con C# • Tipizzazione • Interfacce • Classi • Namespace • Alcuni comportamenti del linguaggio sono diversi da quello che potremmo aspettarci in quanto sviluppatori .NET (this, assegnazione variabili, funzioni che rappresentano oggetti, closures, …) • Risulta indubbiamente complesso gestire applicazioni di grandi dimensioni.

6. Soluzioni tentate • Negli anni si sono sviluppate Best Practice per la strutturazione del codice Javascript che simulano le funzionalità mancanti • Prototype pattern • Module pattern • Revealingmodule pattern • Revealingprototype pattern • Script # • Permette la scrittura di codice in C# che viene compilato in Javascript • Scarsa documentazione • Difficoltà ad utilizzare librerie non supportate • Coffee Script • Necessità di imparare una nuova sintassi • Difficoltà ad utilizzare librerie non supportate

7. TypeScript “TypeScriptis a language for application-scale JavaScript development. TypeScriptis a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.” Definizionepresa da http://www.typescriptlang.org/

8. TypeScript • TypeScriptaggiunge funzionalità a JavaScript • possiamo prendere un codice Javascript esistente e inserirlo in un file TypeScript (.ts) e viene riconosciuto correttamente • Sostanzialmente aggiunge la tipizzazione statica e il modello di programmazione ad oggetti class-based • Le funzionalità aggiuntive sono implementate seguendo le specifiche ES6 • Il codice viene compilato in JavaScript (ES3 o ES5) e il compilatore trasforma le funzionalità aggiuntive seguendo i pattern più comuni • Il codice risulta più pulito, leggibile, con supporto di intellisense e errori a compile time

9. Tools • Per provarlohttp://www.typescriptlang.org/Playground/ • Per sviluppare seriamente • Visual Studio Update 1 • ASP.NET and Web Tools 2012.2 (consigliato) • Plugin per Visual Studio 2012http://www.microsoft.com/en-us/download/details.aspx?id=34790 • Web Essentials 2012 (consigliato) • DEMO • Altri (Sublime Text, EMACS, Vim, Node.js, …) • Self hosting (typescript.js)

10. Tipizzazione • Javascript è un linguaggio senza tipizzazione statica => errori rilevati a runtime • TypeScript permette la tipizzazione tramite una sintassi opzionale il : var a; // tipo any varb: number; // tipo number • => Intellisense migliorato e errori a compile time • Possibilità di usare tipi opzionali usando ? • DEMO

11. Typeinference • Typeinference: il compilatore riesce in molti casi a dedurre il tipo di variabile quando non viene dichiarato espressamente. • Possibile il casting tramite <nometipo>

12. Classi • È possibile creare classi con campi, proprietà, costruttori e funzioni classCar{     // Property (public by default)     engine: string;     // Constructor     // (accepts a value so you can initialize engine)    constructor(engine: string) { this.engine = engine; } } varhondaAccord = newCar('V6');

13. Funzioni • Arrow functions => : è un modo alternativo per definire le funzioni e risolve il problema dello scope del this • Pianificato in ES6 var myFunc1 = function (h: number, w: number) {return h * w;}; può essere scritto come var myFunc2 = (h: number, w: number) => h * w; Le seguenti sono equivalenti (x) => { returnMath.sin(x); } (x) => Math.sin(x) x => { returnMath.sin(x); } x => Math.sin(x)

14. Funzioni • Le funzioni all’interno delle classi possono essere implementate come prototype o come istanze classCar {    engine: string;   stop: () => string;     constructor (engine: string) {this.engine = engine;this.stop = () => "Stopped " + this.engine;    }     start() {return "Started " + this.engine;    } }

15. Ereditarietà • TypeScript semplifica l’ereditarietà usando extends che permette l’accesso ai membri pubblici e al costruttore. Il costruttore può essere ridefinito e per chiamare il costruttore della classe base usiamo super classAuto { engine: string;constructor(engine: string) {this.engine = engine;    } } classManlyTruckextendsAuto { bigTires: bool;constructor(engine: string, bigTires: bool) {super(engine);this.bigTires= bigTires;    } }

16. Interfacce • TypeScript permette di definire tipi complessi sotto forma di interfacce. interfaceICar{    engine: string;    color: string;} classCarimplementsICar {    constructor (public engine: string, public color: string) {     }} vartoyotaCamry : ICar;

17. Moduli • I moduli in TypeScript (paragonabili ai namespace in C#) permettono una migliore scrittura del codice favorendone il riuso, l’incapsulamento, lo separano dal global scope ed è supportato AMD e commonJS. • I moduli possono essere interni o esterni (utili per AMD).

18. Moduli interni • I moduli interni vengono creati tramite module • Il contenuto del modulo vive in esso ed è esterno dal global scope • I moduli possono essere nested. moduleShapes {classRectangle {         constructor (public height: number, public width: number) {        }     }     // This works!var rect1 = newRectangle(10, 4); } // This won't!!varrect2 = Shapes._________

19. Moduli interni • Per farlo funzionare si usa export moduleShapes {exportclassRectangle {constructor (publicheight: number, publicwidth: number) {        }    }}// Thisworks!varrect = Shapes.Rectangle(10, 4);

20. Moduli interni • I moduli possono essere estesi anche su file separati. • È possibile referenziare moduli su file diversi usando la sintassi /// <referencepath="nomefile.ts" />

21. Moduli esterni • Per facilitare la gestione delle dipendenze in progetti complessi si tende ad utilizzare AMD e require.js. TypeScript lo supporta tramite i moduli esterni. • Invece della keyword module si scrive direttamente ogni modulo in un file separato e tramite import e export si mettono in relazione

22. Integrazione librerie • Per utilizzare librerie esterne conviene utilizzare i definitionfiles (estensione .d.ts) per sfruttare al meglio la tipizzazione e l’intellisense. • I definitionfiles disponibili possono essere scaricati da https://github.com/borisyankov/DefinitelyTyped • In mancanza usare solo declare

23. Debugging • Oltre a debuggare il javascript generato è possibile inserire breakpoint direttamente in TypeScript • Passi da seguire: Visual Studio 2012 Abilitazione dei file di mapping su Web Essentials Utilizzo di Internet Explorer 9 o 10

24. Links • http://www.typescriptlang.org/ • http://www.johnpapa.net/typescriptpost1/