introduzione a typescript
Download
Skip this Video
Download Presentation
Introduzione a typescript

Loading in 2 Seconds...

play fullscreen
1 / 24

Introduzione a typescript - PowerPoint PPT Presentation


  • 134 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Introduzione a typescript' - lulu


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduzione a typescript

Introduzione a typescript

Marco Assandri

21 marzo 2013

agenda
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
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 scorsi1
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
problematiche
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
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
typescript
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/

typescript1
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
tool s
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)
tipizzazione
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
type inference
Typeinference
  • Typeinference: il compilatore riesce in molti casi a dedurre il tipo di variabile quando non viene dichiarato espressamente.
  • Possibile il casting tramite <nometipo>
classi
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\');

funzioni
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)

funzioni1
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;    }

}

ereditariet
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;    }

}

interfacce
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;

moduli
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
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._________

moduli interni1
Moduli interni
  • Per farlo funzionare si usa export

moduleShapes {exportclassRectangle {constructor (publicheight: number, publicwidth: number) {        }    }}// Thisworks!varrect = Shapes.Rectangle(10, 4);

moduli interni2
Moduli interni
  • I moduli possono essere estesi anche su file separati.
  • È possibile referenziare moduli su file diversi usando la sintassi

/// <referencepath="nomefile.ts" />

moduli esterni
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
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
debugging
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
Links
  • http://www.typescriptlang.org/
  • http://www.johnpapa.net/typescriptpost1/
ad