INTRODUZIONE ATYPESCRIPT                 Marco Assandri                 21 marzo 2013
Agenda• Negli anni scorsi …• Problematiche e soluzioni esistenti• TypeScript - presentazione generale• Tools• Tipizzazione...
Negli anni scorsi …• ASP.NET Web-Forms (2002)  • minore importanza al Javascript grazie ai controlli del framework  • tend...
Negli anni scorsi …• HTML 5  • Ancora maggiore enfasi e strumenti per spostare il lavoro sul client  • Ecmascript 5 aggiun...
Problematiche• Javascript manca di alcune strutture a cui siamo abituati con C#  • Tipizzazione  • Interfacce  • Classi  •...
Soluzioni tentate• Negli anni si sono sviluppate Best Practice per la strutturazione del codice Javascript che simulano le...
TypeScript“TypeScript is a language for application-scaleJavaScript development.TypeScript is a typed superset of JavaScri...
TypeScript• TypeScript aggiunge funzionalità a JavaScript• possiamo prendere un codice Javascript esistente e    inserirlo...
Tools• Per provarlo  http://www.typescriptlang.org/Playground/• Per sviluppare seriamente  • Visual Studio Update 1  • ASP...
Tipizzazione• Javascript è un linguaggio senza tipizzazione statica =>  errori rilevati a runtime• TypeScript permette la ...
Type inference• Type inference: il compilatore riesce in molti casi a  dedurre il tipo di variabile quando non viene dichi...
Classi• È possibile creare classi con campi, proprietà, costruttori e    funzioniclass Car {  // Property (public by defau...
Funzioni• Arrow functions => : è un modo alternativo per definire le  funzioni e risolve il problema dello scope del this•...
Funzioni• Le funzioni all’interno delle classi possono essere implementate come    prototype o come istanzeclass Car {  en...
Ereditarietà• TypeScript semplifica l’ereditarietà usando extends che permette l’accesso ai membri    pubblici e al costru...
Interfacce• TypeScript permette di definire tipi complessi sotto forma di interfacce.interface ICar{   engine: string;   c...
Moduli• I moduli in TypeScript (paragonabili ai namespace in C#)  permettono una migliore scrittura del codice favorendone...
Moduli interni• I moduli interni vengono creati tramite module• Il contenuto del modulo vive in esso ed è esterno dal glob...
Moduli interni• Per farlo funzionare si usa exportmodule Shapes {   export class Rectangle {      constructor (        pub...
Moduli interni• I moduli possono essere estesi anche su file separati.• È possibile referenziare moduli su file diversi us...
Moduli esterni• Per facilitare la gestione delle dipendenze in progetti  complessi si tende ad utilizzare AMD e require.js...
Integrazione librerie• Per utilizzare librerie esterne conviene utilizzare i  definition files (estensione .d.ts) per sfru...
Debugging• Oltre a debuggare il javascript generato è possibile  inserire breakpoint direttamente in TypeScript• Passi da ...
Links• http://www.typescriptlang.org/• http://www.johnpapa.net/typescriptpost1/
Upcoming SlideShare
Loading in …5
×

Introduzione a TypeScript

359 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
359
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduzione a TypeScript

  1. 1. INTRODUZIONE ATYPESCRIPT Marco Assandri 21 marzo 2013
  2. 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. 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. 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 performanti http://www.cuttherope.ie/• Windows RT e Node.js • Permettono di utilizzare Javascript lato server e per scrivere applicazioni per Windows Store
  5. 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. 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 • Revealing module pattern • Revealing prototype 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. 7. TypeScript“TypeScript is a language for application-scaleJavaScript development.TypeScript is a typed superset of JavaScript thatcompiles to plain JavaScript.Any browser. Any host. Any OS. Open Source.”Definizione presa da http://www.typescriptlang.org/
  8. 8. TypeScript• TypeScript aggiunge 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. 9. Tools• Per provarlo http://www.typescriptlang.org/Playground/• Per sviluppare seriamente • Visual Studio Update 1 • ASP.NET and Web Tools 2012.2 (consigliato) • Plugin per Visual Studio 2012 http://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. 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 var b: number; // tipo number• => Intellisense migliorato e errori a compile time• Possibilità di usare tipi opzionali usando ?• DEMO
  11. 11. Type inference• Type inference: il compilatore riesce in molti casi a dedurre il tipo di variabile quando non viene dichiarato espressamente.• Possibile il casting tramite <nometipo>
  12. 12. 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);
  13. 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) => { return Math.sin(x); } (x) => Math.sin(x) x => { return Math.sin(x); } x => Math.sin(x)
  14. 14. Funzioni• Le funzioni all’interno 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; }}
  15. 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 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; }}
  16. 16. Interfacce• TypeScript 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;
  17. 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. 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.module Shapes { class Rectangle { constructor ( public height: number, public width: number) { } } // This works! var rect1 = new Rectangle(10, 4);}// This wont!!var rect2 = Shapes._________
  19. 19. 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);
  20. 20. Moduli interni• I moduli possono essere estesi anche su file separati.• È possibile referenziare moduli su file diversi usando la sintassi/// <reference path="nomefile.ts" />
  21. 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. 22. Integrazione librerie• Per utilizzare librerie esterne conviene utilizzare i definition files (estensione .d.ts) per sfruttare al meglio la tipizzazione e l’intellisense.• I definition files disponibili possono essere scaricati da https://github.com/borisyankov/DefinitelyTyped• In mancanza usare solo declare
  23. 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. 24. Links• http://www.typescriptlang.org/• http://www.johnpapa.net/typescriptpost1/

×