INTRODUZIONE A
TYPESCRIPT
Marco Assandri
21 marzo 2013
Agenda
• Negli anni scorsi …
• Problematiche e soluzioni esistenti
• TypeScript - presentazione generale
• Tools
• Tipizzazione
• Inferenza
• Classi
• Funzioni
• Ereditarietà
• Moduli
• Integrazione librerie esterne
• Debug
• Links
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
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
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.
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
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/
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
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)
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
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>
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');
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)
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;
}
}
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;
}
}
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;
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).
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._________
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);
Moduli interni
• I moduli possono essere estesi anche su file separati.
• È possibile referenziare moduli su file diversi usando la
sintassi
/// <reference path="nomefile.ts" />
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
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
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
Links
• http://www.typescriptlang.org/
• http://www.johnpapa.net/typescriptpost1/