Aan de slag te gaan met typescript

Typrescript is een van een groep talen die de JavaScript Runtime Als uitvoeringsomgeving:.-bestanden die typoscode bevatten, worden samengesteld in normaal JavaScript, dat vervolgens door de browser kan worden uitgevoerd.

• Kerstaanbieding: Bespaar tot 49% op een abonnement op Web Designer Magazine

Jeremy Ashkenas maakte eerst dit concept populair bij zijn coffeescript-taal, maar helaas was de relatief korte syntaxis moeilijk te leren voor ontwikkelaars die bekend zijn met C # of Visual Basic.

Naarmate Microsoft uitbreidde naar Web 2.0-technologieën, koos het ervoor om inspiratie te doen van Jeremy Ashkenas. Vanwege de mogelijkheden van Visual Studio kunnen ontwikkelaars eenvoudigweg weggaan terwijl u profiteert van de verschillende taalextensies.

Typescript is niet beperkt tot statisch typen: het wordt ook geleverd met een verscheidenheid aan geavanceerde functies waarmee u objectgeoriënteerde programmeerparadigma's op het web kunt simuleren. Deze korte gids brengt u door enkele van de belangrijkste functies. Als de taal u aanspreekt, kan meer informatie op de vlucht worden geleerd.

01. Installeer Visual Studio

Hoewel typescript ook op Linux of MacO's kan worden gebruikt, blijven we aan Microsoft's officieel IDE. Download de gratis community-editie van Visual Studio 2017 van Microsoft, hier en zorg ervoor dat u de ASP.NET-lading tijdens de implementatie markeert.

02. Voeg de SDK toe

Vanwege de fast-release-cadans van typescript moet visuele studio worden uitgebreid met een SDK-module, die kan worden gedownload van de Microsoft-site hier ​Voer eenvoudig het installatieprogramma uit alsof het een standaard Windows-toepassing was.

03. Typescript downloaden, echt

Het zou niet Microsoft zijn als er geen extra gedoe erbij betrokken was: terwijl de SDK uw Visual Studio-installatie upgrades, wordt de werkelijke TSC-compiler niet toegevoegd aan uw opdrachtregel. Dit probleem is het best opgelost door het NPM-pakketbeheerder van NODE.JS te gebruiken op de opdrachtregel.

PS C: \ Users \ Tamha \ downloads & GT; NPM Installeer -G-typescript

C: \ gebruikers \ Tamha \ appdata \ roaming \ npm \ TSC - & GT; C: \ gebruikers \ Tamha \ appdata \ roaming \ npm \ node_modules \ typescript \ bin \ TSC

C: \ gebruikers \ Tamha \ appdata \ roaming \ npm \ TSSERVER - & GT; C: \ gebruikers \ Tamha \ appdata \ roaming \ npm \ node_modules \ typescript \ bin \ tserver

C: \ gebruikers \ Tamha \ appdata \ roaming \ npm

`- [email protected]

04. Breek uit het project

Visual Studio verwacht te werken in een oplossingsgericht proces: terwijl interessant, dit is minder dan ideaal voor onze behoeften. Maak in plaats daarvan een bestand met de naam Worker.ts en plaats deze op een handige plaats in uw bestandssysteem. Open het door het naar Visual Studio te slepen en laat het in de werkbalk bovenaan vallen. Wijzig vervolgens de inhoud van de volgende code:

 Functie Sayoi () {
  Alert ("Oi!");
​
Sayoi (); 

05. Maak een invoerpunt

Zoals vermeld in de introductie, kan een .ts-bestand niet veel doen. Daarom gaat u verder met het maken van een bestand met de naam Index.html, dat zich in dezelfde map moet bevinden. Voeg vervolgens de skeletoncode toe die aan deze stap wordt begeleid. Het laadt de uitvoer van de compiler en voert het uit alsof het een ander beetje JavaScript is.

 & LT; HTML & GT;
  & LT; HOOFD & GT;
  & lt; script src = "werknemer.js" & gt; & lt; / script & gt;
  & LT; / HOOFD & GT;
  & LT; BODY & GT; & LT; / BODY & GT;
& LT; / HTML & GT; 

06. Compileer en ren

De volgende stap omvat handmatige recompilatie van het .ts-bestand. Open PowerShell en voer de TSC-opdracht in gevolgd door de naam van het invoerbestand. Standaard deelt het uitvoerbestand de basisbestandsnaam, maar heeft een verlenging van .js in plaats van .ts. Open ten slotte het bestand index.html in een keuze browser om het uiterlijk van het berichtvenster te bewijzen.

 PS C: \ gebruikers \ Tamha \ downloads & gt; TSC. \ werknemer.ts 

07. Get typed

Tot nu toe heeft TypenScript weinig meer gedaan dan optreden als een meer complexe JavaScript-omgeving. De volgende stap omvat het activeren van de ondersteuning voor statische typen: het stelt de compiler in staat statische analyse van parameters uit te voeren, waardoor ongeldige waarden uitoefenen. Hiervoor is een set van typen nodig - basistypen worden vermeld in de bovenstaande tabel, terwijl de lessen later worden besproken.

08. Probeer het uit

Typescript Variable Type-opdrachten vinden plaats via 'A:' geplaatst na de variabele naam. Laten we onze OI-functie wijzigen om een ​​nummer te nemen en laat ons in plaats daarvan een string doorgeven. Eindelijk, roep de TSC-compiler opnieuw aan om uw ogen te feesten op het foutbericht dat in de bovenstaande screenshot wordt getoond - Visual Studio, incidenteel, belicht ook de betreffende regel.

 Functie Sayoi (WhatTosay: Number) {
  Alert (WhatTosay);
​
Sayoi ("Hallo"); 

09. Vermijd het prototype

JavaScript implementeert object-oriëntatie via prototyping: een stijl van code die ongewoon is in de .NET en C / C ++ werelden. Typescript lost dit probleem op door het maken van klassen toe te staan ​​- een proces dat wordt weergegeven in de fragment die deze stap vergezelt.

 Klasse Imagine {
  Openbaar MyResult: Nummer;
  Public Mya: Number;
  Public MyB: nummer;
  Constructor (_A: nummer, _b: nummer)
  ​
  this.myresult = _a + _b;
  this.mya = _a;
  ​
} 

10. Waardeer het publiek

Normaal gesproken wordt het openbare kenmerk gebruikt om te verklaren dat een element van een programma van buitenaf toegankelijk is. Bij gebruik als een constructor-parameter, instrueert deze in plaats daarvan de typoscompiler om lokale velden met dezelfde namen te maken.

 Klasse Imagine {
  Openbaar MyResult: Nummer;
  // Public Mya: nummer;
  Constructor (Public Mya: Number, Public _B: Number)
  ​
  this.myresult = mya + _b;
  this.mya = mya;
  ​
} 

11. Methode en instantie

Laten we onze voorbeeldklasse uitbreiden door deze te voorzien van een methode die toegang heeft tot de waarden die zijn opgeslagen in MyResult en Mya, en deze op het scherm uitvoeren. Ten slotte wordt de nieuwe parameter gebruikt om een ​​exemplaar van de klasse te maken - wordt het gebruikt voor het aanroepen van de methode.

 Klasse Imagine {
  Openbaar MyResult: Nummer;
  ​​​
  Public Jayomething (): ongeldig {
  alert (dit.myresult);
  ​
​
Laat MyImagine: Stel je voor = nieuwe voorstel (2, 2);
myimagine.soekenomething (); 

12. Gebruik de magische kenmerken

Het typescript's taalontwerp is bedoeld om ontwikkelaars zoveel mogelijk inspanning op te slaan. Eén leuke functie is de automatische populatie van parameters die zijn gemaakt met behulp van de getoonde snelkoppeling.

 Klasse Imagine {
  Openbaar MyResult: Nummer;
  Constructor (Public Mya: Number, Public MyB: Number)
  ​
  dit.myresult = mya + myb;
  ​
  Public Jayomething (): ongeldig {
  alert (deze.mya + "" + this.myb);
  ​
} 

13. Voer erfenis uit

Een van de kernprincipes van objectgeoriënteerde programmering omvat het baseren van klassen bovenop elkaar. Afgeleide klassen kunnen vervolgens de inhoud van hun basisklasse overschrijven, wat leidt tot flexibel instelbare klassenhiërarchieën.

 Klasse toekomst breidt zich voorstellen voor
​
  Public Jayomething (): ongeldig {
  console.log (deze.mya);
  ​
} 

14. Analyseer de overschrijving

Het codefragment van bovenaf heeft de voorstelbare klasse uitgebreid met een sub-element dat de toekomst wordt genoemd. Toekomst verschilt van Imagine in die zin dat de volgende methode is, die meer is geëvolueerd, een bericht uitzendt in de opdrachtregel van de browser.

 Laat MyImagine: Stel je voor = nieuwe toekomst (2, 2);
myimagine.sayomething ();
Laat Myfuture: Toekomst = nieuwe toekomst (9, 9);
myfuture.soekenomething (); 

15. Analyseer de overschrijving, redux

Daarmee kan de daadwerkelijke code worden getest. Wanneer u wordt uitgevoerd, bevat de browsersconsole twee aanroepingen van de toekomst - de geavanceerde klasse behoudt zijn eigenschappen, zelfs wanneer opgeroepen als een voorstelobject.

16. Beperkte toegang

Het blootstellen van ledenvariabelen met de openbare modifier is impopulair: het neemt tenslotte de meeste controle weg van wat gebruikers doen met de inhoud van de variabele. Typescript-accessors stelt u in staat om dit probleem op een manier rond te werken, vergelijkbaar met traditionele OOP. Houd er rekening mee dat alleen leden worden ondersteund, maar dat het gebruik van deze functie de activering van Ecmascript5-ondersteuning vereist.

 Public _mycache: string;
  Ontvang fullcache (): string {
  return this._mycache;
  ​
  Set FullCache (Newx: String) {
  if (newx == "hallo") {
  this._mycache = newx;
  ​
  anders {
  console.log ("Verkeerde gegevens!");
  ​
  } 

17. Maak het abstract

Het vermogen om complexe overervinghiërarchieën te creëren, motiveert ontwikkelaars om hun geluk te proberen bij abstracte klassen. Typescript heeft u ook gedekt in dat opzicht - het voorbeeld dat bij deze stap begeleidt, creëert een klasse met een abstract en een echt lid. Proberen om de abstracte klasse rechtstreeks leidt tot een compiler-fout.

 Abstracte klasse voorstellen {
  Openbaar MyResult: Nummer;
  Abstract SayName (): leegte;
  Constructor (Public Mya: Number, Public MyB: Number) {
  dit.myresult = mya + myb;
  ​
  Public Jayomething (): ongeldig {
  alert (deze.mya + "" + this.myb);
  ​
​
Klasse toekomst verlengt zich voorstellen {
  ​​​
  publiek () {
  console.Log ("Hallo");
  ​
} 

18. Maak een interface

Aangezien objectstructuren complexer worden, bevinden ontwikkelaars zich vaak voor situaties waarin een klasse meerdere stukjes logica implementeert. In dat geval zorgt een interface voor een mooie oplossing - het voorbeeld laat zien wat te verwachten.

 Interface DATAINTERFACE {
  Veld: nummer;
  Werkmethod (): leegte;
} 

19. Implementeer het

Net als in het geval van de hierboven klasse, doet een interface ons niet goed als we het niet kunnen gebruiken. Gelukkig is het implementeren van het niet bijzonder moeilijk: houd er rekening mee dat de auteurs van de interface bovendien delen van hun creatie optioneel kunnen verklaren.

 Klasse werknemer implementeert datainterface {
  Veld: nummer;
  Werkvermodder (): ongeldig {
  Gooi nieuwe fout ("methode niet geïmplementeerd.");
  ​
  } 

20. Gebruik een generieke klasse

De typescript-compiler dwingt strikte variabele validiteitscontrole. Wanneer u aan een opslagklasse werkt, kunnen generieke geneeskunde de eindgebruiker het type laten bepalen dat moet worden behandeld. Bovendien maakt Typencript ook toe dat andere generieke elementen zoals functies, zoals weergegeven in de (tautologische) fragment uit de documentatie.

 // Generieke functie
Function Identity (Arg: Number): Number {
  retourneer Arg;
​
// generieke klasse
klasse genericnummer & lt; t & gt;​
  Zerovalue: T;
  Toevoegen: (x: t, y: t) = & gt; T; } 

21. Een kwestie van opsomming

Staatsmachines en soortgelijke elementen profiteren sterk van het hebben van een manier om een ​​variabele te beperken tot het opslaan van een paar goed gedefinieerde staten. Dit kan worden bereikt met behulp van het ENUM-gegevenstype:

 Enum Parserstate {
  Idle = 1,
  Read0,
  Lees1
​
klasse voorstellen {
  Public Mystate: Parserstate;
  Constructor (Public Mya: Number, Public MyB: Number)
  ​
this.mystate = parserstate.idle; 

22. Leer meer

Dekken van een taal die zo complex is als typescript in een enkel artikel is bijna onmogelijk. Kijk naar de Voorbeelden van typescript site om meer te weten te komen over taalbindingen.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 266 Webdesigner , het Creative Web Design Magazine - met deskundige tutorials, geavanceerde trends en gratis middelen. Koop hier een probleem 266 of Abonneer u hier op Web Designer ​

Speciale kerstaanbieding: Bespaar tot 49% op een abonnement op Web Designer voor jou of een vriend voor Kerstmis. Het is een beperkt aanbod, dus bewegen snel ...

Gerelateerde artikelen:

• 20 JavaScript-tools om je geest te blazen
• Leer om uw JavaScript-toegankelijk te maken
• 12 Common JavaScript-vragen beantwoord