Come iniziare con dattiloscritto

Dattilografo è uno di un gruppo di lingue che utilizzano il Javascript. Runtime come ambiente di esecuzione: i file di testo contenenti codice dattiloscritto sono compilati nel normale JavaScript, che può quindi essere eseguito dal browser.

• Offerta natalizia: Risparmia fino al 49% su un abbonamento a Web Designer Magazine

Jeremy Ashkenas ha fatto per la prima volta questo concetto popolare con il suo linguaggio di caffè, ma purtroppo, la sua sintassi relativamente intrecciata era difficile da imparare per gli sviluppatori che conoscevano C # o Visual Basic.

Come Microsoft si espanse in tecnologie Web 2.0, ha scelto di ispirare ispirazione da Jeremy Ashkenas. A causa delle funzionalità di Visual Studio, gli sviluppatori possono semplicemente hackerare via di profitto dalle varie estensioni linguistiche.

Destinatari non è limitato alla digitazione statica: viene fornito anche con una varietà di funzioni avanzate che consentono di simulare paradigmi di programmazione orientati agli oggetti sul Web. Questa breve guida ti porterà attraverso alcune delle sue caratteristiche chiave. Se la lingua ti affascina, ulteriori informazioni possono essere apprese al volo.

01. Installa Visual Studio

Anche se dattilografo può essere utilizzato anche su Linux o MacOS, ci attenderemo all'IDE ufficiale di Microsoft. Scarica l'edizione gratuita della community di Visual Studio 2017 da Microsoft, qui e assicurarsi di contrassegnare il carico utile ASP.NET durante la distribuzione.

02. Aggiungi l'SDK

A causa della cadenza della versione veloce del dattiloscritto, Visual Studio deve essere espanso con un modulo SDK, che può essere scaricato da Il sito Microsoft qui . Basta eseguire il programma di installazione come se fosse un'applicazione standard di Windows.

03. Scarica dattiloscritto, per davvero

Non sarebbe Microsoft se non c'erano alcuni problemi extra coinvolti: mentre l'SDK aggiorna l'installazione Visual Studio, il compilatore TSC effettivo non viene aggiunto alla riga di comando. Questo problema è meglio risolto utilizzando il gestore dei pacchetti NPM Node.js sulla riga di comando.

PS C: \ Utenti \ TAMHA \ Downloads & GT; NPM Install -g dattiloscritto

C: \ Utenti \ Tamha \ AppData \ Roaming \ NPM \ TSC - & GT; C: \ Users \ Tamha \ AppData \ Roaming \ NPM \ NODE_MODULE \ DETERGLICT \ BIN \ TSC

C: \ Utenti \ Tamha \ AppData \ Roaming \ NPM \ TSServer - & GT; C: \ Users \ Tamha \ AppData \ Roaming \ NPM \ NODE_MODULE \ DETERGLICT \ BIN \ TSServer

C: \ Utenti \ Tamha \ AppData \ Roaming \ NPM

`- [email protected].

04. Spetta il progetto

Visual Studio prevede di lavorare in un processo centrico di soluzione: mentre è interessante, questo è meno che ideale per le nostre esigenze. Invece, crea un file chiamato worker.ts e posizionalo in un posto conveniente nel tuo file system. Aprilo trascinandolo in studio visivo e lasciarlo all'interno della barra degli strumenti in alto. Quindi, modifica il suo contenuto per includere il seguente codice:

 Funzione Sayoi () {
  Alert ("Oi!");
}
sayoi (); 

05. Creare un punto di ingresso

Come menzionato nell'introduzione, un file .ts non può fare molto da solo. A causa di ciò, procedere alla creazione di un file chiamato index.html, che deve essere posizionato nella stessa cartella. Quindi, aggiungi il codice scheletro mostrato che accompagna questo passaggio. Carica l'output del compilatore e lo esegue come se fosse un altro bit di JavaScript.

 & lt; html & gt;
  & lt; head & gt;
  & lt; script src = "worker.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt; & lt; / body & gt;
& lt; / html & gt; 

06. Compilare ed eseguire

Il passo successivo comporta la ricompilazione manuale del file .ts. Apri PowerShell e inserisci il comando TSC seguito dal nome del file di input. Per impostazione predefinita, il file di output condividerà il nome file di base, ma avrà un'estensione di .js invece di .ts. Infine, apri il file index.html in un browser di scelta per dimostrare l'aspetto della casella dei messaggi.

 PS C: \ Utenti \ Tamha \ Downloads & GT; TSC. \ Worker.ts 

07. Guadagnati

Finora, i tuoi dattiloscritti hanno fatto poco più che agire come un ambiente JavaScript più complesso. Il passo successivo prevede l'attivazione del supporto per la digitazione statica: consente al compilatore di eseguire l'analisi statica dei parametri, mantenendo i valori non validi. Per questo è necessario un insieme di tipi - I tipi di base sono elencati nella tabella sopra, mentre le classi saranno discusse in seguito.

08. Provalo

Assegnazioni di tipo di tipo dattiloscritto I compiti avvengono tramite 'A:' posizionato dopo il nome della variabile. Lasciateci modificare la nostra funzione OI per prendere un numero e lasciaci passare invece una stringa. Infine, invocare il compilatore TSC ancora una volta per festeggiare gli occhi sul messaggio di errore mostrato nello screenshot sopra - Visual studio, per inciso, evidenzierà anche la linea in questione.

 Funzione Sayoi (whattosay: numero) {
  Alert (whattosay);
}
Sayoi ("Ciao"); 

09. Evita il prototipo

Implementa JavaScript Oggetto-orientamento tramite prototipazione: uno stile di codice non comune nei mondi .NET e C / C ++. Destinatari risolve questo problema consentendo la creazione di classi: un processo mostrato nello snippet che accompagna questo passaggio.

 Classe Imagine {
  pubblico myresult: numero;
  pubblico mya: numero;
  pubblico myb: numero;
  Costruttore (_A: numero, _B: numero)
  {
  questo.myresult = _a + _b;
  questo.mya = _a;
  }
} 

10. Apprezzo il pubblico

Normalmente, l'attributo pubblico viene utilizzato per dichiarare che un elemento di un programma deve essere accessibile dall'esterno. Se utilizzato come parametro costruttore, insegna invece il compilatore dattilografo per creare campi locali con gli stessi nomi.

 Classe Imagine {
  pubblico myresult: numero;
  // mya pubblico: numero;
  Costruttore (pubblico mya: numero, pubblico _b: numero)
  {
  This.Myresult = mya + _B;
  questo.mya = mya;
  }
} 

11. Metodo ed istanza

Espandoci la nostra classe di esempio fornendola con un metodo che accede ai valori memorizzati in MyResult e Mya e li emette sullo schermo. Infine, il nuovo parametro viene utilizzato per creare un'istanza della classe: viene utilizzata per richiamare il metodo.

 Classe Imagine {
  pubblico myresult: numero;
  . . .
  Mayomething pubblico (): void {
  Alert (questo.Myresult);
  }
}
Lascia che Myimagine: immagina = nuova immagina (2, 2);
myimagine.uasomething (); 

12. Usa le sue caratteristiche magiche

Il design della lingua di tipowstrice è destinato a salvare gli sviluppatori il maggior numero possibile di sviluppatori. Una bella caratteristica è la popolazione automatica dei parametri creati utilizzando il collegamento mostrato.

 Classe Imagine {
  pubblico myresult: numero;
  Costruttore (pubblico myA: numero, pubblico myb: numero)
  {
  questo.myresult = mya + myb;
  }
  Mayomething pubblico (): void {
  Alert (this.mya + "" + this.myb);
  }
} 

13. Eseguire l'ereditarietà

Uno dei principi fondamentali della programmazione orientata agli oggetti prevede le classi di base all'altra. Le classi derivate possono quindi sovrascrivere i contenuti della loro classe base, portando a gerarchie di classe regolabili in modo flessibile.

 Il futuro della classe si estende Imagine
{
  Mayomething pubblico (): void {
  console.log (this.mya);
  }
} 

14. Analizza la sovrascrittura

Lo snippet di codice dall'alto ha esteso la classe Imagine con un sottoelemento chiamato futuro. Il futuro differisce da immaginare in quanto il suo metodo di Detomething, essendo più evoluto, emette un messaggio nella riga di comando del browser.

 Lascia Myimagine: immagina = nuovo futuro (2, 2);
myimagine.aysomething ();
Lascia che myFuture: futuro = nuovo futuro (9, 9);
mycuture.aysomething (); 

15. Analizza la sovrascrittura, Redux

Con ciò, il codice attuale può essere testato. Quando viene eseguito, la console del browser conterrà due invocazioni del futuro - la classe avanzata mantiene le sue proprietà anche se invocata come un oggetto immaginano.

16. Accesso limitato

Esporre le variabili dei membri con il modificatore pubblico è impopolare: dopo tutto, toglie la maggior parte del controllo di ciò che gli utenti fanno con i contenuti della variabile. Gli accessori di dattiloscritti consentono di lavorare attorno a questo problema in modo simile al tradizionale OOP. Tieni presente che anche i membri di sola lettura sono supportati, ma che l'uso di questa funzione richiede l'attivazione del supporto ECMAScript5.

 pubblico _mycache: stringa;
  Ottieni FullCache (): String {
  restituire questo._mycache;
  }
  Imposta FullCache (Newx: String) {
  se (newx == "hello") {
  questo._mycache = newx;
  }
  altro {
  console.log ("Dati errati!");
  }
  } 

17. Rendilo astratto

La capacità di creare complesse gerarchie di ereditarietà motivrà gli sviluppatori a tentare la fortuna alle classi astratte. Destinazione anche ti ha coperto a tale riguardo - l'esempio che accompagna da questo passo crea una classe con un membro astratto e un vero membro. Cercare di istanziare la classe astratta porta direttamente a un errore del compilatore.

 Classe astratta Imagine {
  pubblico myresult: numero;
  Abstract Sayname (): Void;
  Costruttore (pubblico mya: numero, pubblico myb: numero) {
  questo.myresult = mya + myb;
  }
  Mayomething pubblico (): void {
  Alert (this.mya + "" + this.myb);
  }
}
Il futuro della classe si estende Imagine {
  . . .
  Public Sayname () {
  console.log ("ciao");
  }
} 

18. Fai un'interfaccia

Poiché le strutture dell'oggetto diventano più complesse, gli sviluppatori si ritrovano spesso ad affrontare situazioni in cui una classe implementa più bit di logica. In tal caso, un'interfaccia rende una bella soluzione: l'esempio mostra cosa aspettarsi.

 Interfaccia DatainterFace {
  campo: numero;
  WorkerMethod (): Void;
} 

19. Implementarlo

Come nel caso della classe sopra, un'interfaccia non ci fa bene se non possiamo usarlo. Fortunatamente, l'implementazione non è particolarmente difficile: essere consapevoli che gli autori dell'interfaccia possono, inoltre, dichiarare parti della loro creazione da essere opzionali.

 La classe operare implementa datainterface {
  campo: numero;
  WorkerMethod (): void {
  lanciare un nuovo errore ("Metodo non implementato".);
  }
  } 

20. Utilizzare una classe generica

Il compilatore dattilografo rafforza il controllo rigoroso validità variabile. Quando si lavora su una classe di stoccaggio, i generici consentono di lasciare che l'utente finale determinare il tipo da gestire. Inoltre, dattilografo consente anche altri elementi generici come le funzioni, come mostrato nello snippet (tautologico) prelevato dalla documentazione.

 // funzione generica
Identità della funzione (ARG: Number): Numero {
  return arg;
}
// classe generica
Classe GenericNumber & lt; T & GT; {
  Zerovalue: T;
  Aggiungi: (x: t, y: t) = & gt; T; } 

21. Una questione di enumerazione

Le macchine dello stato e gli elementi simili beneficiano molto dall'avere un modo per limitare una variabile per conservare alcuni stati ben definiti. Questo può essere realizzato usando il tipo di dati Enum:

 Enum Pasterstate {
  Idle = 1,
  Leggi0,
  Leggi1.
}
classe immagina {
  Public Mystate: Paserstate;
  Costruttore (pubblico myA: numero, pubblico myb: numero)
  {
This.MyState = PARSESTATE.IDLE; 

22. Per saperne di più

Coprendo una lingua come complessa come dattilga in un singolo articolo è quasi impossibile. Guarda al Esempi di Sito di Destinatari per saperne di più sui legami della lingua.

Questo articolo è stato originariamente pubblicato in questione 266 Web designer , la rivista Creative Web Design - offre esercitazioni esperte, tendenze all'avanguardia e risorse gratuite. Acquista il problema 266 qui o Iscriviti al web designer qui .

Offerta speciale di Natale: Risparmia fino al 49% su un abbonamento al web designer per te o un amico per Natale. È un'offerta limitata, quindi muovi rapidamente ...

Articoli Correlati:

• 20 strumenti JavaScript per soffiare la tua mente
• Impara a rendere il tuo JavaScript accessibile
• 12 domande JavaScript comuni risposte