Il presente articolo è stato tradotto automaticamente.

JavaScript

TypeScript: un modo per far acquisire familiarità agli sviluppatori .NET con JavaScript

Shayne Boyer

 

Senza dubbio avete un enorme investimento in ambito Microsoft .NET, ed è una piattaforma veramente notevole con abbondanti strumenti disponibili. Se si combinano le vostre conoscenze di c# o Visual Basic .NET con XAML, il mercato per la tua abilità esistente potrebbe sembrare quasi illimitato. Oggi, tuttavia, è necessario considerare una lingua che è stata consolidata per un certo tempo ed ha, negli ultimi pochi anni, veramente decollato come la piattaforma di applicazione caught up. Sto parlando di JavaScript, naturalmente. La crescita e la capacità di applicazioni JavaScript è enorme. Node. js, un'intera piattaforma per lo sviluppo di applicazioni scalabili di JavaScript, è diventato enormemente popolare, ed è anche implementabile su Windows Azure. Inoltre, JavaScript può essere utilizzato con HTML5 per lo sviluppo di giochi, applicazioni mobili e persino Windows Store apps.

Come sviluppatore .NET, non si possono ignorare le funzionalità di JavaScript, né la sua diffusione nel mercato. Quando faccio questa affermazione ai colleghi, sento spesso gemiti su come è difficile lavorare con JavaScript, non non c'è alcuna non tipizzazione forte, strutture di classe. Io combattere tali argomenti rispondendo che JavaScript è un linguaggio funzionale e ci sono modelli per compiere ciò che si vuole.

Questo è dove il dattiloscritto viene. Dattiloscritto non è una nuova lingua. È un superset di JavaScript — un potente, digitato superset, ciò significa che tutti i JavaScript è valido dattiloscritto, e ciò che è prodotto dal compilatore è JavaScript. Dattiloscritto è un progetto open source, e tutte le informazioni relative al progetto può essere trovate alla typescriptlang.org. Al momento della stesura di questo articolo, dattiloscritto era in anteprima versione 0.8.1.

In questo articolo tratterò i concetti di base del dattiloscritto sotto forma di classi, moduli e tipi, per mostrare come uno sviluppatore .NET può diventare più confortevole con un progetto di JavaScript.

Classi

Se si lavora con linguaggi come c# o Visual Basic .NET, le classi sono un concetto familiare a voi. In JavaScript, classi ed ereditarietà sono compiute attraverso modelli come chiusure e prototipi. Dattiloscritto introduce la sintassi di tipo classico che siete abituati a e il compilatore produce il codice JavaScript che compie l'intento. Prendere il seguente frammento di JavaScript:

var car;
car.wheels = 4;
car.doors = 4;

Questo sembra semplice e lineare. Tuttavia, gli sviluppatori .NET sono stati riluttanti a entrare veramente in JavaScript a causa del suo approccio sciolto alla definizione dell'oggetto. L'oggetto auto può avere proprietà aggiuntive aggiunta più tardi senza imposizione e senza sapere che tipo di dati ciascuno rappresenta e così generare eccezioni in fase di runtime. Come la definizione del modello di classe dattiloscritto cambiare questo, e come si ereditano ed estendere auto? Si consideri l'esempio in Figura 1.

Figura 1 oggetti in dattiloscritto e JavaScript

Dattiloscritto	JavaScript
Classe Auto {ruote;porte;}auto var = new Auto();Car.Wheels = 2;Car.Doors = 4;	var Auto = (function () {funzione Auto())ritorno automatico;})();auto var = new Auto();Car.Wheels = 2;Car.Doors = 4;

Sulla sinistra è un oggetto di classe ben definita chiamato auto, con le ruote di proprietà e le porte. Sulla destra, il JavaScript generato dal compilatore dattiloscritto è quasi lo stesso. L'unica differenza è la variabile automatica.

Nell'editor del dattiloscritto, Impossibile aggiungere una proprietà aggiuntiva senza ottenere un messaggio di avviso. Non può semplicemente iniziare utilizzando un'istruzione ad esempio car.trunk = 1. Il compilatore si lamenta, "Proprietà tronco non è presente su Auto," che è una manna dal cielo per chiunque abbia mai avuto per rintracciare questo gotcha a causa della flessibilità di JavaScript — o, a seconda del vostro punto di vista, la "pigrizia" di JavaScript.

Costruttori, anche se disponibili in JavaScript, sono migliorati con il dattiloscritto utensileria ancora applicando la creazione dell'oggetto durante la fase di compilazione, e non permettendo l'oggetto senza il passaggio corretto degli elementi e i tipi nella chiamata.

Non solo si può aggiungere il costruttore per la classe, ma è possibile rendere i parametri facoltativi, impostare un valore predefinito o scelta rapida la dichiarazione di proprietà. Diamo un'occhiata a tre esempi che mostrano solo quanto potente dattiloscritto può essere.

Figura 2 illustrato nel primo esempio, un semplice costruttore in cui la classe viene inizializzata passando i parametri ruote e porte (rappresentata da w e d). Il prodotto JavaScript (a destra) è quasi equivalente, ma come la dinamica e la necessità di espandere l'applicazione, sempre che non sarà il caso.

Costruttore semplice figura 2

Dattiloscritto	JavaScript
Classe Auto {ruote;porte;Costruttore (w, d) {this.Wheels = w;this.Doors = d;  }}auto var = new Auto (2, 4);	var Auto = (function () {funzione Auto (w, d) {this.Wheels = w;this.Doors = d;  }ritorno automatico;})();auto var = new Auto (2, 4);

 

In Figura 3, ho modificato il codice in Figura 2, a 4 inadempiente il parametro ruote (w) e rendendo facoltativo il parametro porte (d) inserendo un punto interrogativo a destra di esso. Si noti, come nell'esempio precedente, che il modello dell'impostazione della proprietà istanza agli argomenti è una pratica comune che utilizza la parola chiave "this".

Costruttore semplice figura 3, modificato

Dattiloscritto	JavaScript
Classe Auto {ruote;porte;Costruttore (w = 4, d?){this.Wheels = w;this.Doors = d;  }}auto var = new Auto();	var Auto = (function () {funzione Auto (w, d) {this.Wheels = w;this.Doors = d;  }ritorno automatico;})();auto var = new Auto (4, 2);

Qui è una caratteristica che mi piacerebbe vedere nelle lingue .NET: essere in grado di aggiungere semplicemente la parola chiave public prima del nome del parametro nel costruttore per dichiarare la proprietà della classe. La parola chiave private è disponibile e compie la stessa dichiarazione di auto, ma nasconde la proprietà della classe.

I valori predefiniti, i parametri facoltativi e annotazioni di tipo sono estesi con il dattiloscritto Proprietà Dichiarazione automatica, rendendolo una bella scorciatoia — e rendendovi più produttivi. Confrontare lo script in Figura 4, e si possono vedere le differenze nella complessità inizio alla superficie.

Figura 4 la funzione di Auto Dichiarazione

Dattiloscritto	JavaScript
Classe Auto {Costruttore (ruote pubbliche = 4,porte pubbliche?){  }}auto var = new Auto();Car.Doors = 2;	var Auto = (function () {funzione Auto (ruote, ante) {Se (typeof ruote = = ={"undefined")ruote = 4; }this.Wheels = Ruote;this.Doors = porte;  }ritorno automatico;})();auto var = new Auto();Car.Doors = 2;

 

Le classi dattiloscritto forniscono anche l'ereditarietà. Rimanendo con l'esempio di Auto, è possibile creare una classe di moto che estende la classe iniziale. In Figura 5, anche ad aggiungere unità e interrompere le funzioni della classe base. Aggiungere la classe moto — che eredita da Auto e imposta le proprietà appropriate per porte e ruote — è compiuta con poche righe di codice in dattiloscritto.

Figura 5 aggiunta della classe moto

class Auto{
  constructor(public mph = 0,
    public wheels = 4,
    public doors?){
  }
  drive(speed){
    this.mph += speed;
  }
  stop(){
    this.mph = 0;
  }
}
class Motorcycle extends Auto
{
  doors = 0;
  wheels = 2;
}
var bike = new Motorcycle();

Una cosa importante da ricordare qui è che, nella parte superiore del prodotto dal compilatore JavaScript, vedrete una piccola funzione chiamata "___extends", come mostrato Figura 6, che è l'unico codice mai iniettato in JavaScript risultante. Questa è una classe helper che assiste la funzionalità di ereditarietà. Come nota a margine, questa funzione di supporto ha la stessa firma esatta indipendentemente dalla fonte, quindi se stai organizzando il tuo JavaScript in più file e utilizzare un'utilità come SquishIt o Web Essentials per combinare gli script, si potrebbe ottenere un errore a seconda di come l'utilità rettifica duplicati funzioni.

Figura 6 il prodotto del compilatore JavaScript

var __extends = this.__extends || function (d, b) {
  function __() { this.constructor = d; }
  __.prototype = b.prototype;
  d.prototype = new __();
}
var Auto = (function () {
  function Auto(mph, wheels, doors) {
    if (typeof mph === "undefined") { mph = 0; }
    if (typeof wheels === "undefined") { wheels = 4; }
    this.mph = mph;
    this.wheels = wheels;
    this.doors = doors;
  }
  Auto.prototype.drive = function (speed) {
    this.mph += speed;
  };
  Auto.prototype.stop = function () {
    this.mph = 0;
  };
  return Auto;
})();
var Motorcycle = (function (_super) {
  __extends(Motorcycle, _super);
  function Motorcycle() {
    _super.apply(this, arguments);
    this.doors = 0;
    this.wheels = 2;
  }
  return Motorcycle;
})(Auto);
var bike = new Motorcycle();

Moduli

Moduli in dattiloscritto sono l'equivalente di spazi dei nomi nell'ambito .NET. Sono un ottimo modo per organizzare il vostro codice e per incapsulare le regole di business e i processi che non sarebbe possibili senza questa funzionalità (JavaScript non ha un modo integrato per fornire questa funzione). Il modello di modulo, o namespacing dinamica, come JQuery, è il modello più comune per gli spazi dei nomi in JavaScript. Moduli dattiloscritto semplificano la sintassi e producono lo stesso effetto. Nell'esempio di Auto, è possibile racchiudere il codice in un modulo ed esporre solo la classe di moto, come mostrato Figura 7.

Il modulo di esempio incapsula la classe di base e il motore­ciclo classe è esposta dal prefisso con la parola chiave di esportazione. Questo permette un'istanza della moto per essere creato e tutti i suoi metodi per essere utilizzato, ma la classe base Auto è nascosto.

Figura 7 avvolgendo la classe Auto in un modulo

module Example {
  class Auto{
    constructor(public mph : number = 0,
      public wheels = 4,
      public doors?){
      }
      drive(speed){
      this.mph += speed;
      }
      stop(){
      this.mph = 0;
      }
  }
  export class Motorcycle extends Auto
  {
    doors = 0;
    wheels = 2;
  }
}
var bike = new Example.Motorcycle();

Un altro bel vantaggio dei moduli è che è possibile unire li. Se si crea un altro modulo denominato anche esempio, dattiloscritto presuppone che il codice del primo modulo e il codice nel nuovo modulo siano entrambi accessibili attraverso le dichiarazioni di esempio, proprio come gli spazi dei nomi.

Moduli di facilitano la manutenibilità e l'organizzazione del codice. Con loro, diventa meno di un onere per i team di sviluppo di sostenere applicazioni su larga scala.

Tipi   

La mancanza di sicurezza tipo è una delle lamentele più forte che ho sentito da sviluppatori che non sanno nuotare nel Java­Script piscina ogni giorno. Ma che tipo di sicurezza è disponibile in dattiloscritto (Ecco perché si chiama dattiloscritto) e va di là solo dichiarando una variabile come una stringa o un valore booleano.

In JavaScript, la pratica di assegnazione foo a x e poi successivamente nel codice assegnando 11 x è perfettamente accettabile, ma può impazzire è quando si sta cercando di capire perché stai ricevendo l'immancabile NaN durante il runtime.

La caratteristica di sicurezza tipo è uno dei maggiori vantaggi del dattiloscritto, e ci sono quattro tipi inerenti: stringa, numero, bool e qualsiasi. Figura 8 viene illustrata la sintassi per la dichiarazione del tipo di variabile s e l'IntelliSense che il compilatore fornisce una volta che sa che cosa è possibile eseguire le azioni sulla base del tipo.

Figura 8 esempio di dattiloscritto IntelliSense

Di là che consente la digitazione di una variabile o funzione, dattiloscritto ha la possibilità di dedurre i tipi. È possibile creare una funzione che restituisce una stringa. Sapendo che, il compilatore e strumenti forniscono l'inferenza e visualizza automaticamente le operazioni che possono essere eseguite sul ritorno, come si può vedere Figura 9.

Figura 9 esempio di inferenza

Qui il vantaggio è che si vede che il ritorno è una stringa senza dover indovinare. L'inferenza del tipo è un grande aiuto quando si tratta di lavorare con altre biblioteche che fanno riferimento agli sviluppatori nel loro codice, come ad esempio JQuery o anche il modello DOM (Document Object).

L'altro modo per sfruttare i vantaggi del sistema di tipi è attraverso le annotazioni. Guardando indietro, la classe Auto originale fu dichiarata solo con ruote e porte. Ora, attraverso le annotazioni, possiamo garantire che i tipi corretto sono impostati durante la creazione dell'istanza di Auto in auto:

class Auto{
  wheels : number;
  doors : number;
}
var car = new Auto();
car.doors = 4;
car.wheels = 4;

Tuttavia, il JavaScript che viene prodotto, le annotazioni vengono compilate via, quindi non c'è nessun grasso e senza dipendenze aggiuntive di cui preoccuparsi. Il beneficio è ancora forte tipizzazione e, inoltre, eliminando gli errori semplici che si trovano in genere in fase di runtime.

Interfacce offrono un altro esempio di sicurezza tipo offerto in dattiloscritto. Interfacce consentono di definire la forma di un oggetto. In Figura 10, un nuovo metodo denominato viaggio è stato aggiunto alla classe di Auto e accetta un parametro con un tipo di viaggio.

Figura 10 il viaggio interfaccia

interface Trip{
  destination : string;
  when: any;
}
class Auto{
  wheels : number;
  doors : number;
  travel(t : Trip) {
  //..
}
}
var car = new Auto();
car.doors = 4;
car.wheels = 4;
car.travel({destination: "anywhere", when: "now"});

Se si tenta di chiamare il metodo di viaggio con qualche cosa tranne la struttura corretta, il compilatore design-time ti dà un errore. In confronto, se hai inserito questo codice in JavaScript, dire in un file. js, molto probabilmente che non sarebbe intercettare un errore come questo fino a quando si esegue l'applicazione.

In Figura 11, si può vedere che sfruttando le annotazioni di tipo fortemente assiste non solo lo sviluppatore iniziale ma anche qualsiasi sviluppatore successiva che deve mantenere la fonte.

Figura 11 annotazioni Assist nel mantenere il vostro codice

Librerie e codice esistente

Per quanto riguarda il codice JavaScript esistente, o se amate edificio in cima a node. js o utilizzare librerie come toastr, Knockout o JQuery? Dattiloscritto ha file di dichiarazione per aiutare. In primo luogo, ricordare che tutti i JavaScript è valido dattiloscritto. Quindi se hai qualcosa homegrown, è possibile copiare questo codice subito nella finestra di progettazione e il compilatore produrrà il JavaScript uno per uno. L'opzione migliore è quello di creare il proprio file di dichiarazione.

Per le più importanti librerie e Framework, un signore di nome Boris Yankov (twitter.com/borisyankov su Twitter) ha creato un bel repository su GitHub (github.com/borisyankov/DefinitelyTyped) che ha un certo numero di file di dichiarazione per alcune delle più popolari librerie JavaScript. Questo è esattamente ciò che il team dattiloscritto sperato sarebbe accaduto. A proposito, il file di dichiarazione di node. js è stato creato dal team di dattiloscritto ed è disponibile come parte del codice sorgente.

Creazione di un File di dichiarazione

Se si riesce a individuare il file di dichiarazione per la tua libreria o se si sta lavorando con il proprio codice, è necessario creare un file di dichiarazione. Si inizia copiando il codice JavaScript in parte dattiloscritto e aggiungendo le definizioni dei tipi e quindi utilizzare lo strumento della riga di comando per generare il file di definizione (*. d.ts) di riferimento.

Figura 12 viene illustrato un semplice script per il calcolo della media del punto del grado in JavaScript. Ho copiato lo script nel lato sinistro dell'editor e aggiunto le annotazioni per i tipi, e I'll salvare il file con estensione. TS.

Figura 12 creando un File di dichiarazione

Dattiloscritto

JavaScript

funzione gradeAverage(grades: String [] {var totale = 0;var g = null;var i = -1;per (i = 0; i < grades.length; i++) {g = gradi [i];totale + = getPointEquiv(grades[i]);  }var avg = totale / grades.length;return getLetterGrade(Math.round(avg));}funzione getPointEquiv(grade: {String)var res;{Switch(grade)caso "A": {res = 4;break;    }caso "B": {res = 3;break;    }caso "C": {res = 2;break;    }caso "D": {res = 1;break;    }caso "F": {res = 0;break;    }  }return res;}funzione getLetterGrade(score: {numero)if(score < 1) {return "F";  }if(Score > 3) {return "A";  }if(Score > 2 & & punteggio < 4) {return "B";  }Se (punteggio > = 1 & & punteggio < = 2) {Restituisce "C";  }if(Score > 0 & & punteggio < 2) {return "D";  }}

funzione {gradeAverage(grades)var totale = 0;var g = null;var i = -1;per (i = 0; i < grades.length; i++) {g = gradi [i];totale + = getPointEquiv(grades[i]);  }var avg = totale / grades.length;return getLetterGrade(Math.round(avg));}funzione {getPointEquiv(grade)var res;{Switch(grade)caso "A": {res = 4;break;    }caso "B": {res = 3;break;    }caso "C": {res = 2;break;    }caso "D": {res = 1;break;    }caso "F": {res = 0;break;    }  }return res;}funzione {getLetterGrade(score)if(score < 1) {return "F";  }if(Score > 3) {return "A";  }if(Score > 2 & & punteggio < 4) {return "B";  }Se (punteggio > = 1 & & punteggio < = 2) {Restituisce "C";  }if(Score > 0 & & punteggio < 2) {return "D";  }}

Successivamente, aprire un prompt dei comandi e utilizzare lo strumento della riga di comando dattiloscritto per creare il file di definizione e JavaScript risultante:

TSC c:\gradeAverage.ts –declarations

Il compilatore crea due file: gradeAverage.d.ts è il file della dichiarazione e gradeAverage.js è il file JavaScript. In ogni file TypeScript futuri che richiedono la funzionalità gradeAverage, semplicemente aggiungere un riferimento alla parte superiore dell'editor come questo:

/ / / < riferimento path="gradeAverage.d.ts" >

Poi tutti la tipizzazione e utensili è evidenziata quando fa riferimento a questa libreria, e che è il caso con una qualsiasi delle principali librerie che si possono trovare presso il repository di DefinitelyTyped GitHub.

Una grande caratteristica che del compilatore porta nei file di dichiarazione è la capacità di auto-traverse i riferimenti. Che cosa significa questo è se si fa riferimento a un file di dichiarazione per jQueryUI, che a sua volta fa riferimento a jQuery, file TypeScript corrente otterrà il beneficio di completamento delle istruzioni e potrai vedere le firme di funzioni e tipi, proprio come se si avesse riferimento jQuery direttamente. È inoltre possibile creare un file unico dichiarazione — dire, "myRef.d.ts"—that contiene i riferimenti a tutte le librerie che si intende utilizzare nella soluzione e poi fare solo un riferimento unico in qualsiasi codice dattiloscritto.

Windows 8 e dattiloscritto

Con HTML5 un cittadino di prim'ordine nello sviluppo delle applicazioni di Windows Store, gli sviluppatori hanno domandato se dattiloscritto può essere utilizzato con questi tipi di applicazioni. La risposta è sì, ma qualche impostazione è necessaria per farlo. Al momento della stesura di questo articolo, le attrezzature disponibili tramite Visual Studio Installer o altre estensioni non ha ancora attivato completamente i modelli all'interno dei modelli di app Store Windows JavaScript in Visual Studio 2012.

Ci sono tre file di dichiarazione chiave disponibile nel codice sorgente a typescript.codeplex.com— winjs.d.ts, winrt.d.ts e lib.d.ts. Riferimento a questi file ti darà accesso al WinJS e WinRT JavaScript librerie che vengono utilizzate in questo ambiente per l'accesso a fotocamera, le risorse di sistema e così via. È inoltre possibile aggiungere riferimenti a jQuery per ottenere l'IntelliSense e digitare le caratteristiche di sicurezza che ho menzionato in questo articolo.

Figura 13 è un rapido esempio che illustra l'utilizzo di queste librerie di geolocalizzazione di un utente di accedere e compilare una classe Location. Il codice quindi crea un tag di immagine HTML e aggiunge una mappa statica dall'API Bing mappa.

Figura 13 Dichiarazione file per Windows 8

/// <reference path="winjs.d.ts" />
/// <reference path="winrt.d.ts" />
/// <reference path="jquery.d.ts" />
module Data {
  class Location {
    longitude: any;
    latitude: any;
    url: string;
    retrieved: string;
  }
  var locator = new Windows.Devices.Geolocation.Geolocator();
  locator.getGeopositionAsync().then(function (pos) {
    var myLoc = new Location();
    myLoc.latitude = pos.coordinate.latitude;
    myLoc.longitude = pos.coordinate.longitude;
    myLoc.retrieved = Date.
now.toString();
    myLoc.url = "http://dev.virtualearth.
net/REST/v1/Imagery/Map/Road/"
      + myLoc.latitude + "," + myLoc.longitude
      + "15?mapSize=500,500&pp=47.620495,-122.34931;21;AA&pp="
      + myLoc.latitude + "," + myLoc.longitude
      + ";;AB&pp=" + myLoc.latitude + "," + myLoc.longitude
      + ";22&key=BingMapsKey";
    var img = document.createElement("img");
    img.setAttribute("src", myLoc.url);
    img.setAttribute("style", "height:500px;width:500px;");
    var p = $("p");
    p.append(img);
  });
};

Conclusioni

Le funzionalità di che dattiloscritto aggiunge a JavaScript sviluppo sono piccole, ma producono grandi vantaggi agli sviluppatori .NET che sono abituati a simili caratteristiche nelle lingue utilizzano per lo sviluppo di applicazioni Windows regolare.

Dattiloscritto non è una pallottola d'argento, e non è destinato a essere. Ma per chi è titubante a saltare in JavaScript, dattiloscritto è una grande lingua che può facilitare il viaggio.

Shayne Boyer è un MVP di Telerik, Nokia Developer campione, MCP, INETA e soluzioni di un architetto di Orlando, in Florida Egli ha sviluppato soluzioni basate su Microsoft negli ultimi 15 anni. Negli ultimi 10 anni, ha lavorato su applicazioni Web su larga scala, con un focus sulle prestazioni e produttività. Nel suo tempo libero, Boyer corre l'Orlando Windows Phone e Windows 8 User Group e blog circa la più recente tecnologia a tattoocoder.com.

Grazie all'esperto tecnica seguente per la revisione di questo articolo: Christopher Bennage