Sådan kommer du i gang med typeskrift

Typscript er en af ​​en gruppe sprog, der bruger JavaScript. Runtime som eksekveringsmiljø: .TS-filer, der indeholder typeskriftskode, udarbejdes i normal JavaScript, som derefter kan køres af browseren.

• Juletilbud: Spar op til 49% på et abonnement på Web Designer Magazine

Jeremy Ashkenas gjorde først dette koncept populært med sit kaffesprog, men desværre var dets relativt terse syntaks vanskeligt at lære for udviklere bekendt med C # eller Visual Basic.

Som Microsoft udvidet til Web 2.0 teknologier valgte den at tage inspiration fra Jeremy Ashkenas. På grund af evnen til Visual Studio kan udviklere simpelthen hack væk, mens de drager fra de forskellige sprogudvidelser.

Typscript er ikke begrænset til statisk skrive: Det leveres også med en række avancerede funktioner, der giver dig mulighed for at simulere objektorienterede programmeringsparadigmer på nettet. Denne korte vejledning tager dig gennem nogle af dens nøglefunktioner. Hvis sproget appellerer til dig, kan flere oplysninger læres på flugt.

01. Installer Visual Studio

Selvom typeskrift også kan bruges på Linux eller MacOS, holder vi os til Microsofts officielle IDE. Download den gratis fællesskabsudgave af Visual Studio 2017 fra Microsoft, her. , og sørg for at markere ASP.NET-nyttelasten under implementering.

02. Tilføj sdk

På grund af den hurtige udløsningskadenhed af typeskrift skal Visual Studio udvides med et SDK-modul, som kan downloades fra Microsoft-webstedet her . Du skal blot køre installatøren som om det var en standard Windows-program.

03. Download typeskrift, for ægte

Det ville ikke være Microsoft, hvis der ikke var nogle ekstra besværlige involveret: Mens SDK opgraderer din visuelle studioinstallation, er den faktiske TSC Compiler ikke tilføjet til din kommandolinje. Dette problem løses bedst ved at bruge Node.js NPM Package Manager på kommandolinjen.

PS C: \ Users \ Tamha \ Downloads & GT; NPM Installer -G typeskrift

C: \ Users \ tamha \ appdata \ roaming \ npm \ tsc - & gt; C: \ Users \ TAMHA \ AppData \ Roaming \ NPM \ Node_Modules \ Typscript \ Bin \ TSC

C: \ brugere \ tamha \ appdata \ roaming \ npm \ tsserver - & gt; C: \ brugere \ tamha \ appdata \ roaming \ npm \ node_modules \ typeskript \ bin \ tsserver

C: \ Users \ tamha \ appdata \ roaming \ npm

`- [email protected].

04. Break ud af projektet

Visual Studio forventer at arbejde i en opløsning centreret proces: Mens interessant, er dette mindre end ideelt til vores behov. I stedet skal du oprette en fil kaldet Worker.ts og placere den på et bekvemt sted i dit filsystem. Åbn det ved at trække det i Visual Studio, og slip det inde i værktøjslinjen på toppen. Derefter ændrer indholdet af indholdet for at inkludere følgende kode:

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

05. Opret et indgangspunkt

Som nævnt i introduktionen kan en .Ts-fil ikke gøre meget alene. På grund af det skal du fortsætte med at oprette en fil kaldet index.html, som skal være placeret i samme mappe. Derefter skal du tilføje skeletkoden vist, der følger med dette trin. Det lægger kompilatorens udgang og kører det som om det var en anden smule JavaScript.

 & lt; html & gt;
  & lt; hoved & gt;
  & lt; script src = "worker.js" & gt; & lt; / script & gt;
  & lt; / Head & GT;
  & lt; krop & gt; / lt; / body & gt;
& lt; / HTML & GT; 

06. Kompil og kør

Det næste trin indebærer manuel genkompilering af ATS-filen. Åbn PowerShell, og indtast den TSC-kommando efterfulgt af navnet på inputfilen. Som standard deler outputfilen basisfilnavnet, men vil have en udvidelse af .js i stedet for. Endelig åbner INDEX.html-filen i en browser af valg for at bevise udseendet af meddelelsesboksen.

 PS C: \ Users \ Tamha \ Downloads & GT; TSC. \ WORKER.TS 

07. Få skrevet

Indtil videre har typeskrift gjort lidt mere end fungere som et mere komplekst JavaScript-miljø. Det næste trin indebærer at aktivere støtten til statisk indtastning: Det gør det muligt for kompilatoren at udføre statisk analyse af parametre, idet de opbevarer ugyldige værdier. Til dette er der brug for et sæt typer - Grundlæggende typer er angivet i tabellen ovenfor, mens klasser vil blive diskuteret senere.

08. Prøv det

Typscript Variable Type-opgaver finder sted via 'A:' placeret efter variabeltnavnet. Lad os ændre vores OI-funktion for at tage et nummer, og lad os passere i en streng i stedet. Endelig påberåber TSC-kompilatoren igen for at feste dine øjne på fejlmeddelelsen, der vises i skærmbilledet over - Visual Studio, vil i øvrigt også fremhæve den pågældende linje.

 Funktion sayoi (whattosay: nummer) {
  Alert (WhatTosay);
}
Sayoi ("Hej"); 

09. Undgå prototypen

JavaScript implementerer objektorientering via prototyping: En stil med kode, der er ualmindeligt i .NET og C / C ++ verdener. Typscript løser dette problem ved at tillade oprettelse af klasser - en proces, der er vist i snippet, der ledsager dette trin.

 klasse forestiller {
  offentlige myresult: nummer;
  Offentlig Mya: nummer;
  Public MYB: nummer;
  Konstruktør (_A: nummer, _b: nummer)
  {
  this.myresult = _a + _b;
  this.mya = _a;
  }
} 

10. Værdsætter offentligheden

Normalt bruges den offentlige egenskab til at erklære, at et element i et program skal være tilgængeligt udefra. Når den bruges som en konstruktorparameter, instruerer den i stedet typeskriftskompilatoren for at oprette lokale felter med de samme navne.

 klasse forestiller {
  offentlige myresult: nummer;
  // offentlige mya: nummer;
  Konstruktør (Public Mya: Antal, Offentlig _B: Nummer)
  {
  this.myresult = mya + _b;
  this.mya = mya;
  }
} 

11. Metode og instans

Lad os udvide vores eksempelklasse ved at give den en metode, der får adgang til de værdier, der er gemt i Myresult og Mya, og udsender dem på skærmen. Endelig bruges den nye parameter til at oprette en forekomst af klassen - den bruges til at påberåbe sig metoden.

 klasse forestiller {
  offentlige myresult: nummer;
  . . .
  offentligheden sigeromething (): void {
  advarsel (this.myresult);
  }
}
Lad myimagine: forestille sig = ny forestille (2, 2);
myimagine.Saysomething (); 

12. Brug sine magiske egenskaber

Typscript's sprogdesign er beregnet til at redde udviklere så meget indsats som muligt. En god funktion er auto-populationen af ​​parametre, der er oprettet ved hjælp af den viste genvej.

 klasse forestiller {
  offentlige myresult: nummer;
  Constructor (Public Mya: Antal, Public MyB: nummer)
  {
  this.myresult = mya + myB;
  }
  offentligheden sigeromething (): void {
  advarsel (this.mya + "" + this.myB);
  }
} 

13. Udfør arv

En af de kerneplanter af objektorienteret programmering indebærer at basere klasser på toppen af ​​hinanden. Afledte klasser kan derefter tilsidesætte indholdet af deres basisklasse, hvilket fører til fleksibelt justerbare klassehierarkier.

 klasse fremtidige udvider forestille sig
{
  offentligheden sigeromething (): void {
  console.log (this.mya);
  }
} 

14. Analyser overskrivningen

Kodeklippet ovenfra forlængede forestillingen med et underelement kaldet fremtid. Fremtiden adskiller sig fra at forestille sig, at dens joser, der er mere udviklet, udsender en besked i kommandolinjen i browseren.

 Lad MyImagine: Forestil dig = ny fremtid (2, 2);
myimagine.Saysomething ();
Lad MyFuture: Fremtidigt = Ny fremtid (9, 9);
myFuture.Saysomething (); 

15. Analyser overskrivningen, redux

Med det kan den faktiske kode testes. Når du kører, vil browserkonsollen indeholde to invokationer af fremtiden - den avancerede klasse holder sine egenskaber selv, når de påberåbes som en forestille objekt.

16. Begrænset adgang.

Eksponering af medlemsvariabler med den offentlige modifikator er upopulær: det fjerner jo mest kontrol over, hvad brugere gør med variablenes indhold. Typscript-tilbehør giver dig mulighed for at arbejde omkring dette problem på en måde svarende til traditionel OOP. Vær opmærksom på, at skrivebeskyttede medlemmer også understøttes, men at brugen af ​​denne funktion kræver aktivering af Ecmascript5-støtte.

 Offentlig _mycache: String;
  Få fuldcache (): String {
  returnere this._mycache;
  }
  Indstil fuldcache (newx: streng) {
  hvis (newx == "hej") {
  this._mycache = newx;
  }
  ellers {
  console.log ("forkerte data!");
  }
  } 

17. Gør det abstrakt

Evnen til at skabe komplekse arv hierarkier vil motivere udviklere til at prøve deres held på abstrakte klasser. Typscript har du også dækket i den henseende - det eksempel, der ledsager dette trin, skaber en klasse med abstrakt og et rigtigt medlem. Forsøger at instantiere den abstrakte klasse direkte fører til en kompilatorfejl.

 Abstrakt klasse forestiller {
  offentlige myresult: nummer;
  Abstrakt SayName (): ugyldigt;
  Konstruktør (Public Mya: Nummer, Public MYB: NUMBER) {
  this.myresult = mya + myB;
  }
  offentligheden sigeromething (): void {
  advarsel (this.mya + "" + this.myB);
  }
}
klasse fremtidige udvider forestille {
  . . .
  offentligt sayname () {
  console.log ("hej");
  }
} 

18. Lav en grænseflade

Da objektstrukturer bliver mere komplekse, finder udviklere ofte til situationer, hvor en klasse implementerer flere bits logik. I så fald giver en grænseflade en god løsning - eksemplet viser, hvad de skal forvente.

 Interface Datainsface {
  Felt: nummer;
  mermormethod (): ugyldige;
} 

19. Gennemfør det

Som i tilfældet med klassen ovenfor gør en grænseflade ikke noget godt, hvis vi ikke kan bruge det. Heldigvis er implementering af det ikke særlig vanskeligt: ​​Vær opmærksom på, at interfaceforfattere endvidere kan erklære dele af deres skabelse at være valgfri.

 klassearbejder implementerer DATAINTERFACE {
  Felt: nummer;
  mermorermethod (): void {
  kaste ny fejl ("Metode ikke implementeret.");
  }
  } 

20. Brug en generisk klasse

Typescript-kompilatoren håndhæver strenge variabel validitetskontrol. Når du arbejder på en lagerklasse, giver generikerne dig mulighed for at lade slutbrugeren bestemme, hvilken type der skal håndteres. Desuden tillader typeskrift også andre generiske elementer, som f.eks. Funktioner, som det er vist i den (tautologiske) uddrag taget fra dokumentationen.

 // Generisk funktion
Funktion Identitet (Arg: Nummer): Nummer {
  returnere arg;
}
// generisk klasse
klasse genericnumber & lt; t & gt; {
  Zerovalue: t;
  Tilføj: (x: t, y: t) = & gt; T; } 

21. Et spørgsmål om opgørelse

Statsmaskiner og lignende elementer drager fordel meget fra at have en måde at begrænse en variabel til opbevaring af et par veldefinerede tilstande. Dette kan opnås ved hjælp af enum-datatypen:

 enum parserstate {
  Inaktiv = 1,
  Read0,
  Read1.
}
klasse forestiller {
  Offentlig Mystat: Parserstate;
  Constructor (Public Mya: Antal, Public MyB: nummer)
  {
this.myState = parserstate.idle; 

22. Lær mere

Dækning af et sprog så komplekst som typeskrift i en enkelt artikel er næsten umuligt. Se på Typescript site's eksempler at finde ud af mere om sprogbindinger.

Denne artikel blev oprindeligt offentliggjort i udstedelse 266 Webdesigner , Creative Web Design Magazine - tilbyder ekspert tutorials, banebrydende trends og gratis ressourcer. Køb problem 266 her eller Abonner på Web Designer her .

Særligt juletilbud: Spar op til 49% på et abonnement på Web Designer for dig eller en ven til jul. Det er et begrænset tilbud, så bevæg hurtigt ...

Relaterede artikler:

• 20 JavaScript værktøjer til at blæse dit sind
• Lær at gøre dit javascript tilgængeligt
• 12 Fælles JavaScript spørgsmål besvaret