of 26 /26
Introduzione a TypeScript Marco Assandri [email protected] www.dotnettoscana.org #jsfull

DotNetToscana - Sessione TypeScript

Embed Size (px)

Text of DotNetToscana - Sessione TypeScript

2. Thanks to our sponsor 3. AgendaNegli anni scorsi Problematiche e soluzioni esistentiTypeScript - presentazione generaleToolsTipizzazioneInferenzaClassiFunzioniEreditarietModuliIntegrazione librerie esterneDebugLinks 4. Negli anni scorsi ASP.NET Web-Forms (2002) minore importanza al Javascript grazie ai controlli del framework tendenza a spostare il lavoro sul server2004-2005 inizia la moda AJAX (tecnologia gi presente in IE5) con ampio utilizzo in Gmail eGoogle Maps Microsoft rilascia controlli lato server anche per AJAXjQuery (Agosto 2006) Risolve molti problemi cross-browser e fornisce uninterfaccia comune Semplifica la programmazione lato clientFirebug (2006 mi pare) => Developer Toolbar per Chrome e IE Favoriscono moltissimo lo sviluppo e il debug di JS, CSS e HTML Attivabili con F12 5. 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 perWindows Store 6. ProblematicheJavascript manca di alcune strutture a cui siamo abituati con C# Tipizzazione Interfacce Classi NamespaceAlcuni comportamenti del linguaggio sono diversi da quello che potremmoaspettarci in quanto sviluppatori .NET (this, assegnazione variabili, funzioni cherappresentano oggetti, closures, )Risulta indubbiamente complesso gestire applicazioni di grandi dimensioni. 7. Soluzioni tentateNegli anni si sono sviluppate Best Practice per la strutturazione del codice Javascript chesimulano le funzionalit mancanti Prototype pattern Module pattern Revealing module pattern Revealing prototype patternScript # Permette la scrittura di codice in C# che viene compilato in Javascript Scarsa documentazione Difficolt ad utilizzare librerie non supportateCoffee Script Necessit di imparare una nuova sintassi soggetto a cambiamenti di sintassi, problemi nel debugging e nella comprensione deglierrori di compilazione 8. TypeScriptTypeScript is a language for application-scale JavaScript development.TypeScript is a typed superset of JavaScript that compiles to plainJavaScript.Any browser. Any host. Any OS. Open Source.Definizione presa da http://www.typescriptlang.org/ 9. TypeScript TypeScript aggiunge funzionalit a JavaScript (sostanzialmente aggiunge latipizzazione 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 lefunzionalit aggiuntive seguendo i pattern pi comuni Il codice risulta pi pulito, leggibile, con supporto di intellisense e errori a compiletime possiamo prendere un codice Javascript esistente e inserirlo in un file TypeScript(.ts) e viene riconosciuto correttamente 10. Tools- Per provarlo http://www.typescriptlang.org/Playground/- Per sviluppare seriamenteVisual Studio Update 2 (include ASP.NET and Web Tools 2012.2)Plugin per Visual Studio 2012http://www.microsoft.com/en-us/download/details.aspx?id=34790Web Essentials 2012 (consigliato)(DEMO)- Altri (Sublime Text, EMACS, Vim, Node.js, )- Self hosting (typescript.js) 11. Tipizzazione Javascript un linguaggio senza tipizzazione statica => errori rilevati a runtime TypeScript permette la tipizzazione tramite una sintassi opzionale il :var a; // tipo anyvar b: number; // tipo number => Intellisense migliorato e errori a compile time Possibilit di usare tipi opzionali usando ? (DEMO) 12. Type inference Type inference: il compilatore riesce in molti casi a dedurre il tipo di variabilequando non viene dichiarato espressamente. Possibile il casting tramite var par = document.getElementById(p1); 13. Classi possibile creare classi con campi, propriet, costruttori e funzioniclass Car {// Property (public by default)engine: string;// Constructor// (accepts a value so you can initialize engine)constructor(engine: string) {this.engine = engine;}}var hondaAccord = new Car(V6); 14. Funzioni Arrow functions => : un modo alternativo per definire le funzioni e risolve il problema dello scopedel this Pianificato in ES6var myFunc1 = function (h: number, w: number) {return h * w;};pu essere scritto comevar myFunc2 = (h: number, w: number) => h * w;Le seguenti sono equivalenti(x) => { return Math.sin(x); }(x) => Math.sin(x)x => { return Math.sin(x); }x => Math.sin(x) 15. FunzioniLe funzioni allinterno delle classi possono essere implementate come prototype o come istanzeclass Car {engine: string;stop: () => string;constructor (engine: string) {this.engine = engine;this.stop = () => "Stopped " + this.engine;}start() {return "Started " + this.engine;}} 16. EreditarietTypeScript semplifica lereditariet usando extends che permette laccesso ai membri pubblici e al costruttore. Ilcostruttore pu essere ridefinito e per chiamare il costruttore della classe base usiamo superclass Auto {engine: string;constructor(engine: string) {this.engine = engine;}}class ManlyTruck extends Auto {bigTires: bool;constructor(engine: string, bigTires: bool) {super(engine);this.bigTires = bigTires;}} 17. InterfacceTypeScript permette di definire tipi complessi sotto forma di interfacce.interface ICar{engine: string;color: string;}class Car implements ICar {constructor (public engine: string, public color: string) {}}var toyotaCamry : ICar; 18. Moduli I moduli in TypeScript (paragonabili ai namespace in C#) permettono una migliorescrittura del codice favorendone il riuso, lincapsulamento, lo separano dal globalscope ed supportato AMD e commonJS. I moduli possono essere interni o esterni (utili per AMD). 19. 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.module Shapes {class Rectangle {constructor (public height: number,public width: number) {}}// This works!var rect1 = new Rectangle(10, 4);}// This wont!!var rect2 = Shapes._________ 20. Moduli interni Per farlo funzionare si usa exportmodule Shapes {export class Rectangle {constructor (public height: number,public width: number) {}}}// This works!var rect = Shapes.Rectangle(10, 4); 21. Moduli interni I moduli possono essere estesi anche su file separati. possibile referenziare moduli su file diversi usando la sintassi/// 22. Moduli esterni Per facilitare la gestione delle dipendenze in progetti complessi si tende adutilizzare AMD e require.js. TypeScript lo supporta tramite i moduli esterni. Invece della keyword module si scrive direttamente ogni modulo in un fileseparato e tramite import e export si mettono in relazione 23. Integrazione librerie Per utilizzare librerie esterne conviene utilizzare i definition files (estensione .d.ts)per sfruttare al meglio la tipizzazione e lintellisense. I definition files disponibili possono essere scaricati dahttps://github.com/borisyankov/DefinitelyTyped In mancanza usare solo declare 24. Debugging Oltre a debuggare il javascript generato possibile inserire breakpointdirettamente in TypeScript Passi da seguire:Visual Studio 2012Abilitazione dei file di mapping su Web EssentialsUtilizzo di Internet Explorer 9 o 10 25. Linkshttp://www.typescriptlang.org/http://www.johnpapa.net/typescriptpost1/ 26. Tutto il materiale di questa sessione suGrazie!#jsfullhttp://www.dotnettoscana.org/javascript-full-immersion.aspx