introduzione a typescript marco assandri 21 marzo 2013
TRANSCRIPT
![Page 1: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/1.jpg)
INTRODUZIONE A TYPESCRIPT
Marco Assandri
21 marzo 2013
![Page 2: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/2.jpg)
Agenda• Negli anni scorsi …• Problematiche e soluzioni esistenti• TypeScript - presentazione generale• Tools• Tipizzazione• Inferenza• Classi• Funzioni• Ereditarietà• Moduli• Integrazione librerie esterne• Debug• Links
![Page 3: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/3.jpg)
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
![Page 4: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/4.jpg)
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
![Page 5: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/5.jpg)
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.
![Page 6: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/6.jpg)
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
![Page 7: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/7.jpg)
TypeScript
“TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.”
Definizione presa da http://www.typescriptlang.org/
![Page 8: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/8.jpg)
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
![Page 9: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/9.jpg)
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)
![Page 10: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/10.jpg)
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
![Page 11: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/11.jpg)
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>
![Page 12: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/12.jpg)
Classi• È possibile creare classi con campi, proprietà, costruttori e funzioni
class 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');
![Page 13: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/13.jpg)
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)
![Page 14: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/14.jpg)
Funzioni• Le funzioni all’interno delle classi possono essere implementate come
prototype o come istanze
class Car { engine: string; stop: () => string;
constructor (engine: string) { this.engine = engine; this.stop = () => "Stopped " + this.engine; }
start() { return "Started " + this.engine; }
}
![Page 15: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/15.jpg)
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
class 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; }
}
![Page 16: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/16.jpg)
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;
![Page 17: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/17.jpg)
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).
![Page 18: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/18.jpg)
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 won't!!var rect2 = Shapes._________
![Page 19: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/19.jpg)
Moduli interni• Per farlo funzionare si usa export
module Shapes { export class Rectangle { constructor ( public height: number, public width: number) { } }}// This works!var rect = Shapes.Rectangle(10, 4);
![Page 20: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/20.jpg)
Moduli interni• I moduli possono essere estesi anche su file separati.• È possibile referenziare moduli su file diversi usando la
sintassi
/// <reference path="nomefile.ts" />
![Page 21: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/21.jpg)
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
![Page 22: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/22.jpg)
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
![Page 23: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/23.jpg)
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
![Page 24: INTRODUZIONE A TYPESCRIPT Marco Assandri 21 marzo 2013](https://reader036.vdocuments.site/reader036/viewer/2022081518/5542eb5c497959361e8ca25d/html5/thumbnails/24.jpg)
Links• http://www.typescriptlang.org/• http://www.johnpapa.net/typescriptpost1/