Introduzione a typescript
Download
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