Sådan installeres og begynder du at bruge TypeScript

TypeScript er et af de aktuelle hotte emner inden for webudvikling og af gode grunde.

Det giver os mulighed for at skrive cast, når deklarerer variabler, hvilket betyder, at vi eksplicit indstiller den datatype, vi forventer tilbage. Derefter kaster det fejl, hvis de returnerede data ikke er den type, vi forventede at få tilbage, eller hvis et funktionsopkald har for få eller for mange argumenter. Og det er bare et udsnit af alt det tilbyder.

Hvis du ønsker en oversigt over datatyperne, vil du finde det nyttigt at læse min tidligere artikel. Læsning af denne artikel er ikke påkrævet, men det giver dig en god forståelse af datatyperne og syntaksen for TypeScript.

Før vi starter, er det vigtigt at bemærke, at TypeScript kan bruges sammen med en ramme / bibliotek, men det kan også bruges uafhængigt af en ramme / bibliotek. TypeScript er standard i Angular-projekter, og jeg har en artikel i gang om at komme i gang med det.

Denne artikel forudsætter også, at du har en grundlæggende forståelse af JavaScript-programmering.

Så nu er vi klar til at komme i gang med TypeScript og begynde at bruge dens fantastiske funktioner.

Lad os grave ind!

Installation af TypeScript

Der er to hovedmåder at installere TypeScript på. Den første er gennem Visual Studio (ikke at forveksle med Visual Studio Code), som er en IDE. 2015, 2017 og jeg tror, ​​at 2019-versionerne allerede er installeret med TypeScript.

Dette er ikke den rute, jeg vil dække i dag, da jeg hovedsageligt bruger Visual Studio-kode til alle mine behov.

Den anden måde, og den måde, vi vil fokusere på, er gennem NPM (Node Package Manager).

Hvis du ikke allerede har NPM og / eller Node installeret (du får NPM, når du installerer Node), er det nu et godt tidspunkt at gøre det, da det er et krav til de næste trin (og ved tilknytning et krav om at bruge TypeScript).

Når du har installeret Node og NPM, skal du åbne din terminal i VS-kode og køre følgende kommando:

npm install -g typescript

Når installationen er færdig, ser du, at der er tilføjet 1 pakke. Du får også vist en meddelelse, der angiver den version af TypeScript, der blev installeret.

Dette er alt hvad du behøver for at begynde at kompilere TypeScript til JavaScript.

Nu er du klar til at begynde at skrive TypeScript!

Start af et TypeScript-projekt

Lad os oprette et TypeScript-projekt, så vi kan drage fordel af alle de fantastiske funktioner, der følger med at bruge det.

Lad os i din valgte editor (jeg bruger VS-kode) oprette en HTML-fil til at være den visuelle side af vores kode. Sådan ser min grundlæggende HTML-fil ud:

Ærligt talt bruger vi bare denne HTML, så vi kan have noget at se på på siden. Det, vi virkelig er bekymret for, er at bruge konsollen.

Du vil bemærke, at jeg har app.jslinket i hovedet på vores index.htmlfil.

Du siger sandsynligvis til dig selv, at jeg troede, det var en artikel om TypeScript?

Nå hold dine heste, det er det. Jeg vil bare fremhæve nogle af forskellene mellem JavaScript og TypeScript (Du lærer, hvor denne fil kommer nedenfra).

Nedenfor ser du en simpel variabelerklæring og en konsollog-erklæring:

Som en sidebemærkning, hvis du vil deaktivere nogle ES-Lint-regler, kan du placere reglerne øverst i kommentarer som jeg har gjort ovenfor. Eller hvis du ønsker at helt deaktivere ES-Lint for filen kun kan du placere /* eslint-disable */i toppen af filen.

Og her er browserkonsollen:

Lad os lade som om, at jeg bygger en applikation, og for at userNameforvente, at jeg altid får en streng tilbage. Undervejs kan jeg lave en fejl, ellers kan mine data blive muteret fra en anden kilde.

Nu userNameer et nummer :(

Og her er browserkonsollen, der viser de ændringer, userNamesom vi sandsynligvis ikke ønskede at ske, hvis dette var en produktionsapplikation:

Hvad hvis den returnerede userNamederefter blev overført til en anden funktion eller brugt som et stykke af et større datapuslespil?

Det ville ikke kun være et rod at finde ud af, hvor mutationen opstod (især hvis vi havde en større applikation), men det ville også skabe et utalligt antal fejl i vores kode.

Lad os nu prøve det samme eksperiment i TypeScript. For at gøre det skal vi oprette en ny fil med .tsudvidelsen for at betegne en TypeScript-fil.

Jeg navngiver min for app.tsat være i overensstemmelse med navngivningskonventioner og lægge den samme kode fra vores JavaScript-fil i vores nye TypeScript-fil.

Du vil bemærke, at jeg bruger type casting, når jeg erklærer min variabel nu, og jeg fortæller eksplicit TypeScript, at denne variabel kun skal pege på en strengværdi.

Du vil også bemærke, at jeg har en fejllinje under, userNamenår jeg tildeler dens værdi igen.

Kompilering af TypeScript med CLI

For at se hvordan dette ser ud i vores konsol skal vi kompilere det til JavaScript. Vi gør det ved at køre tsc app.tsi vores VS Code-konsol (du kan også køre den samme kommando i enhver terminal, så længe du er i den rigtige mappe).

Når vi kører denne kommando, kompilerer den vores TypeScript til JavaScript. Det genererer også en anden fil med samme navn, kun med en .jsudvidelse.

Det er her app.jsfilen kom fra, som jeg nævnte tidligere i artiklen.

For at kompilere flere filer på én gang skal du blot angive disse navne i din kommando, den ene efter den anden: tsc app.ts header.component.ts

Det er også muligt at kompilere flere TypeScript-filer til en enkelt JavaScript-fil ved at tilføje --outflag:

tsc *.ts --out index.js

Der er også en urkommando, der automatisk kompilerer hele TypeScript, når som helst der registreres en ændring. Dette forhindrer dig i at skulle køre den samme kommando igen og igen:

tsc *.ts --out app.js --watch

Her er output fra den tsc app.tskommando ovenfor:

Denne fejl fortæller os, at der er et problem med omfordelingen af userName. Da vi udtrykkeligt indstiller vores variabel til at være en streng ( selvom jeg ikke havde indstillet variablen til en streng, ville fejlen stadig forekomme, fordi TypeScript udleder datatyper ), kan vi ikke tildele den til et nummer igen.

Dette er en fantastisk funktion, fordi den tvinger os til at være eksplicit med vores variable erklæringer og sparer os for at lave fejl, der kan vise sig irriterende og tidskrævende. Hvis du forventer en bestemt type data, skal du få disse data, ellers skal du få en fejl.

Brug eksplicit erklærende arrays og objekter

Lad os sige, at jeg bygger et projekt, og i stedet for manuelt at indstille navigationslinkene, vil jeg gemme denne information i en række objekter.

Jeg forventer et specifikt format til de oplysninger, der er gemt, så det er konsistent på tværs af alle links.

Sådan kan jeg indstille et "komplekst" array i TypeScript:

På venstre side erklærer vi navnet på variablen navLinksefterfulgt af et kolon. Ved de krøllede seler er hvor vi begynder at erklære formatet for de oplysninger, vi forventer i denne matrix.

Vi fortæller TypeScript, at vi forventer, at denne matrix indeholder et objekt eller objekter med disse egenskabsnavne og typer. Vi forventer en namesom er en streng, en linksom er en streng og en altsom også er en streng.

Som med andre datatyper, hvis vi afviger fra det format, vi har oprettet for denne variabel, støder vi på fejl.

Her forsøgte vi at tilføje en ny post, der var tom, og vi fik følgende fejl:

Type '{}' is missing the following properties from type '{ name: string; link: string; alt: string; }' : name, link, alt ts(2739)

Vi får lignende fejl, hvis vi forsøger at tilføje en ny post med den forkerte type information:

{ name: 'Jonathan', link: 15, alt: false }  ❌

{ name: ['Jon','Marley'], link: `//link123.net`, alt: null }  ❌

this.navLinks[0].img = '../../assets/img'

this.navLinks[0].name = 'Barnaby'✔️

Du får dog ideen. Når vi først har oprettet formatet, holder TypeScript os i det format og informerer os, hvis / når vi afviger fra det med en fejl.

Her er også et par måder at definere en matrix på:

const arr1: Array = ['Dave', 35, true]; // giver os mulighed for at have et vilkårligt antal elementer af enhver type

const people: [string,string,string] = ['John', 'Sammy', 'Stephanie'];// kaster en fejl, hvis mere end 3 strenge eller andre ikke-strengelementer vises i arrayet

const people: Array = ['Jimmy', 'Theresa', 'Stanley'];// giver os mulighed for at have et vilkårligt antal kun strengelementer i vores array

Objekter fungerer stort set på samme måde som arrays gør i TypeScript. De kan defineres eksplicit med sættyper, eller du kan lade TypeScript udføre alle de udledte. Her er et grundlæggende eksempel på et objekt:

const person: {name:string, address: string, age: number} = {name: 'Willy', address: '123 Sunshine Ln', age: 35}

Igen erklærer vi på venstre side, at personen er variabelnavnet med det første sæt krøllede seler, der definerer det format, som vores data skal være i.

Det er vigtigt at bemærke, at den rækkefølge, vi definerer vores egenskaber i objekter, ikke behøver at matche rækkefølgen af ​​formatet:

Funktioner, parametre og argumenter

Nogle af de største fordele, du kan se i TypeScript, kommer, når du bruger funktioner.

Har du nogensinde bygget en funktion til kun at udføre en bestemt opgave for at finde ud af, at den ikke fungerer, som du havde tænkt dig?

Mens du bruger TypeScript, skyldes det ikke, at du ikke modtog / sendte den korrekte type data eller brugte det korrekte antal parametre / argumenter.

Her er et godt eksempel:

I vores funktion forventer vi at modtage 3 argumenter, når de calculatorudføres. Men hvis vi modtager det forkerte antal argumenter (for få eller for mange) vil TypeScript give os en god fejl:

Ligeledes, hvis vi modtager den forkerte type data, når denne funktion udføres, genererer TypeScript en fejl, og funktionen kører ikke.

calculator('12', '11', 'add) ;

Nu siger du måske til dig selv 'Så hvad? Det er godt og godt, men det ser ikke ud til, at det er en enorm aftale. ' Men forestil dig, at din ansøgning er snesevis af og dusinvis af filer med mange lag med abstraktioner.

Et godt eksempel på dette ville være en kantet applikation med tjenester, datamodeller, komponenter på flere niveauer og alle de afhængigheder, der følger med det. Det bliver stadig sværere at finde ud af, hvor der kommer en fejl, når din applikation bliver stor.

Det er alt

Forhåbentlig kan du se fordelene ved TypeScript nu. Der er meget mere end dem, jeg har beskrevet her, og jeg opfordrer dig til at læse dokumentationen, hvis du vil finde mere.

Du kan finde denne artikel og andre lignende den på min blog. Jeg ville elske at du kom forbi!

Mens du er der, hvorfor ikke tilmelde dig mit nyhedsbrev  - du kan gøre det øverst til højre på hovedblogsiden. Jeg lover, at jeg aldrig spammer din indbakke, og dine oplysninger deles ikke med nogen / et websted. Jeg kan godt lide at sende interessante ressourcer, jeg finder ud, artikler om webudvikling og en liste over mine nyeste indlæg.

Hvis du ikke har gjort det endnu, kan du også oprette forbindelse til mig på sociale medier! Alle mine links er også øverst til højre på den side. Jeg elsker at få forbindelse med andre og møde nye mennesker, så vær ikke bange for at sige hej. ?

Hav en fantastisk dag, ven og glad kodning!