Sådan kommer du i gang med TypeScript

TypeScript er en af ​​en gruppe sprog, der bruger JavaScript runtime som eksekveringsmiljø: .ts filer, der indeholder TypeScript-kode, kompileres til normal JavaScript, som derefter kan køres af browseren.

Jeremy Ashkenas gjorde først dette koncept populært med sit CoffeeScript-sprog, men desværre var dets relativt korte syntaks svært at lære for udviklere, der var bekendt med C # eller Visual Basic.



Da Microsoft udvidede sig til Web 2.0-teknologier, valgte det at tage inspiration fra Jeremy Ashkenas. På grund af Visual Studio's muligheder kan udviklere simpelthen hacke væk, mens de tjener på de forskellige sprogudvidelser.



TypeScript er ikke begrænset til statisk skrivning: det leveres også med en række avancerede funktioner, der giver dig mulighed for at simulere objektorienteret programmeringsparadigmer på nettet. Denne korte guide fører dig gennem nogle af dens nøglefunktioner. Hvis sproget appellerer til dig, kan du lære mere information på farten.

01. Installer Visual Studio

Visual Studio 2017 leveres med et nyt installationsprogram; de nødvendige funktioner er opdelt i nyttelast for at gøre implementeringen lettere



Visual Studio 2017 leveres med et nyt installationsprogram; de nødvendige funktioner er opdelt i nyttelast for at gøre implementeringen lettere

Selvom TypeScript også kan bruges på Linux eller macOS, holder vi os til Microsofts officielle IDE. Download den gratis community-udgave af Visual Studio 2017 fra Microsoft, her , og sørg for at markere ASP.NET-nyttelasten under implementeringen.

02. Tilføj SDK

På grund af TypeScript's hurtige frigivelseskadens skal Visual Studio udvides med et SDK-modul, som kan downloades fra Microsoft-webstedet her . Kør blot installationsprogrammet, som om det var en standard Windows-applikation.

03. Download TypeScript, for ægte

Det ville ikke være Microsoft, hvis der ikke var noget ekstra besvær: mens SDK opgraderer din Visual Studio-installation, tilføjes den faktiske TSC-compiler ikke til din kommandolinje. Dette problem løses bedst ved hjælp af Node.js's npm-pakkehåndtering på kommandolinjen.



PS C: Brugere tamha Downloads> npm install -g typeskript

gør lydkort virkelig en forskel

C: Brugere tamha AppData Roaming npm tsc -> C: Brugere tamha AppData Roaming npm node_modules typescript bin tsc

C: Brugere tamha AppData Roaming npm tsserver -> C: Brugere tamha AppData Roaming npm node_modules typescript bin tsserver

C: Brugere tamha AppData Roaming npm

`- typescript@2.4.2

04. Bryde ud af projektet

Visual Studio forventer at arbejde i en løsningscentreret proces: Selvom det er interessant, er det mindre end ideelt til vores behov. I stedet skal du oprette en fil kaldet worker.ts og placere den et passende sted i dit filsystem. Åbn den ved at trække den til Visual Studio, og slip den inde i værktøjslinjen øverst. Dernæst skal du ændre dets indhold for at inkludere følgende kode:

function sayOi() { alert('Oi!'); } sayOi();

05. Opret et startpunkt

Som nævnt i indledningen kan en .ts-fil ikke gøre meget alene. På grund af dette skal du fortsætte med at oprette en fil med navnet index.html, som skal være placeret i den samme mappe. Dernæst tilføj den viste skeletkode, der ledsager dette trin. Det indlæser kompilatorens output og kører det som om det var en anden bit JavaScript.

06. Kompilér og kør

Det næste trin involverer manuel rekompilering af .ts-filen. Åbn PowerShell, og indtast tsc-kommandoen efterfulgt af navnet på inputfilen. Som standard deler outputfilen basisfilnavnet, men har en udvidelse på .js i stedet for .ts. Endelig skal du åbne index.html-filen i en browser, du vælger, for at bevise udseendet af meddelelsesfeltet.

PS C:Users amhaDownloads> tsc .worker.ts

07. Bliv skrevet

Brug denne referencetabel til at finde grundlæggende statiske typer

Brug denne referencetabel til at finde grundlæggende statiske typer

Indtil videre har TypeScript gjort lidt mere end at fungere som et mere komplekst JavaScript-miljø. Det næste trin involverer aktivering af understøttelse af statisk typing: det gør det muligt for compileren at udføre statisk analyse af parametre og holde ugyldige værdier ude. Til dette er der behov for et sæt typer - grundlæggende typer er anført i tabellen ovenfor, mens klasser vil blive diskuteret senere.

08. Prøv det

I normal JavaScript vil denne fejl kun blive fundet, når den pågældende linje påberåbes

I normal JavaScript vil denne fejl kun blive fundet, når den pågældende linje påberåbes

TypeScript-tildelinger med variabel type finder sted via ‘a:’ placeret efter variabelnavnet. Lad os ændre vores Oi-funktion for at tage et tal, og lad os passere i en streng i stedet. Til sidst skal du påkalde TSC-kompilatoren igen for at fejre dine øjne på fejlmeddelelsen vist i skærmbilledet ovenfor - Visual Studio vil i øvrigt også fremhæve den pågældende linje.

function sayOi(whatToSay: number) { alert(whatToSay); } sayOi('Hello');

09. Undgå prototypen

JavaScript implementerer objektorientering via prototyping: en kodestil, som ikke er almindelig i .NET- og C / C ++ -verdenen. TypeScript løser dette problem ved at tillade oprettelse af klasser - en proces, der vises i uddraget, der ledsager dette trin.

class Imagine { public myResult: number; public myA: number; public myB: number; constructor(_a: number, _b: number) { this.myResult = _a + _b; this.myA = _a; } }

10. Værdsætter offentligheden

Holdingsværdierne, der oprettes ved at indstille den offentlige attribut, udfyldes automatisk

Holdingsværdierne, der oprettes ved at indstille den offentlige attribut, udfyldes automatisk

Normalt bruges den offentlige attribut til at erklære, at et element i et program skal være tilgængeligt udefra. Når den bruges som en konstruktionsparameter, instruerer den i stedet TypeScript-kompilatoren om at oprette lokale felter med de samme navne.

class Imagine { public myResult: number; //public myA: number; constructor(public myA: number, public _b: number) { 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 output dem på skærmen. Endelig bruges den nye parameter til at oprette en forekomst af klassen - den bruges til at påkalde metoden.

class Imagine { public myResult: number; . . . public saySomething(): void { alert(this.myResult); } } let myImagine: Imagine = new Imagine(2, 2); myImagine.saySomething();

12. Brug dens magiske træk

TypeScript's sprogdesign er beregnet til at spare udviklere så meget som muligt. En god funktion er den automatiske population af parametre oprettet ved hjælp af den viste genvej.

class Imagine { public myResult: number; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + “ “ + this.myB); } }

13. Udfør arv

Vores lille eksempelprogram viser, at TypeScript opfylder kerneprincipperne for objektarv

Vores lille eksempelprogram viser, at TypeScript opfylder kerneprincipperne for objektarv

En af de grundlæggende principper for objektorienteret programmering involverer at basere klasser oven på hinanden. Afledte klasser kan derefter tilsidesætte indholdet af deres basisklasse, hvilket fører til fleksibelt justerbare klassehierarkier.

class Future extends Imagine { public saySomething(): void { console.log(this.myA); } }

14. Analyser overskrivningen

Kodestykket ovenfra udvidede Imagine-klassen med et underelement kaldet Future. Fremtiden adskiller sig fra Forestil dig, at dens saySomething-metode, der er mere udviklet, udsender en besked til kommandolinjen i browseren.

let myImagine: Imagine = new Future(2, 2); myImagine.saySomething(); let myFuture: Future = new Future(9, 9); myFuture.saySomething();

15. Analyser overskrivningen, redux

Med det kan den faktiske kode testes. Når den køres, indeholder browserkonsollen to påkaldelser af Future - den avancerede klasse beholder sine egenskaber, selv når den påberåbes som et Imagine-objekt.

16. Begrænset adgang

At eksponere medlemsvariabler med den offentlige modifikator er upopulær: det tager trods alt mest kontrol over, hvad brugerne gør med variabelens indhold. TypeScript accessors giver dig mulighed for at omgå dette problem på en måde, der ligner traditionel OOP. Vær opmærksom på, at skrivebeskyttede medlemmer også understøttes, men at brugen af ​​denne funktion kræver aktivering af ECMAScript5-understøttelse.

public _myCache: string; get fullCache(): string { return this._myCache; } set fullCache(newX: string) { if (newX == 'hello') { this._myCache = newX; } else { console.log('Wrong data!'); } }

17. Gør det abstrakt

Evnen til at skabe komplekse arvshierarkier vil motivere udviklere til at prøve lykken på abstrakte klasser. TypeScript har også dig dækket i den henseende - eksemplet, der ledsager dette trin, skaber en klasse med et abstrakt og et rigtigt medlem. Forsøg på at instantiere den abstrakte klasse fører direkte til en kompilatorfejl.

abstract class Imagine { public myResult: number; abstract sayName(): void; constructor(public myA: number, public myB: number) { this.myResult = myA + myB; } public saySomething(): void { alert(this.myA + ' ' + this.myB); } } class Future extends Imagine { . . . public sayName() { console.log('Hello'); } }

18. Lav en grænseflade

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

interface DataInterface { field: number; workerMethod(): void; }

19. Implementere det

Som i klassen ovenfor gør en grænseflade os ikke noget godt, hvis vi ikke kan bruge den. Heldigvis er det ikke særlig svært at implementere det: Vær opmærksom på, at interface-forfattere desuden kan erklære dele af deres oprettelse som valgfri.

class Worker implements DataInterface { field: number; workerMethod(): void { throw new Error('Method not implemented.'); } }

20. Brug en generisk klasse

TypeScript-kompilatoren håndhæver streng kontrol af variabelets gyldighed. Når du arbejder på en lagringsklasse, giver generiske produkter dig mulighed for at lade slutbrugeren bestemme typen, der skal håndteres. Desuden tillader TypeScript også andre generiske elementer, såsom funktioner, som vist i det (tautologiske) uddrag taget fra dokumentationen.

//Generic function function identity(arg: number): number { return arg; } //Generic class class GenericNumber { zeroValue: T; add: (x: T, y: T) => T; }

21. Et spørgsmål om optælling

Statlige maskiner og lignende elementer har stor fordel af at have en måde at begrænse en variabel til at gemme et par veldefinerede tilstande. Dette kan opnås ved hjælp af Enum-datatypen:

enum ParserState { Idle = 1, Read0, Read1 } class Imagine { public myState: ParserState; constructor(public myA: number, public myB: number) { this.myState = ParserState.Idle;

22. Lær mere

Det er næsten umuligt at dække et så kompliceret sprog som TypeScript i en enkelt artikel. Se på TypeScript-websteds eksempler for at finde ud af mere om sprogbindinger.

Denne artikel blev oprindeligt offentliggjort i nummer 266 Webdesigner , det kreative magasin til webdesign - der tilbyder ekspertvejledninger, banebrydende trends og gratis ressourcer. Køb nummer 266 her eller abonner på Web Designer her .

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

Relaterede artikler: