Lær TypeScript-datatyper - Fra nul til helt

Det er alt raseri i disse dage i en verden af ​​webudvikling - TypeScript. Jeg vil satse nu, at du har hørt om det, selv i forbifarten. Men hvis du ikke har eller hvis du bare er nysgerrig, så er du kommet til det rette sted min ven!

Jeg er i øjeblikket ved at lære TypeScript i forbindelse med Angular (en artikel om dette er i gang, så hold dig opdateret!), Fordi det er, hvad vores webapplikation er indbygget på arbejdspladsen. Jeg besluttede at skrive noget let og simpelt at følge, så du kan komme i gang med TypeScript-datatyper.

Jeg deler denne artikel op i to indlæg for enkelheds skyld - den første vil være en kort oversigt over, hvad TypeScript er, datatyperne og nogle understøttende eksempler. Den anden artikel vil fokusere på at få TypeScript installeret og køre lokalt på din maskine.

Hvad er det?

Før vi starter, her er en superkondenseret beskrivelse af TypeScript med mine egne ord. Det er et supersæt af JavaScript - hvilket i det væsentlige betyder, at det er en form for JavaScript, der giver dig visse fordele sammen med al den storhed, der er inkluderet i 'vanilje' JavaScript. Det er et open source-sprog skrevet og vedligeholdt af Microsoft.

TypeScript transporteres til JavaScript og kører i ethvert miljø, som native JavaScript kører. Du kan bruge TypeScript til både frontend- og backend-applikationer.

Det er skrevet ligesom JavaScript, med et par undtagelser, som vi snart gennemgår. Her er et eksempel på nogle TypeScript:

Forsøg ikke at fokusere på alle tyktarmene og de ekstra ting, du ser ovenfor, vi vil grave i det nedenfor. I stedet skal du fokusere på de ting, der skiller sig ud - vi erklærer bare variabler med værdier, disse er strenge, arrays og objekter ligesom i JavaScript.

En anden god ting, som jeg har lært om TypeScript, er at du kan blande JavaScript ind med koden og ikke have nogen problemer med at gøre det. Tjek skærmbilledet nedenfor (dette er inde i en vinkelapp):

Datatyper

Lad os komme i gang med de sjove ting - datatyper! (Der er et par datatyper, som vi ikke dækker - aldrig, null, udefineret. Dette er simpelthen fordi der ikke er meget ved dem. Jeg vil have dig til at vide, at de findes, og hvis du gerne vil grave mere ind på dem typer, her er et link til den officielle TypeScript-dokumentation til din reference.)

TypeScript udleder den type data, der er tildelt en variabel, uden at du udtrykkeligt indstiller typen, men for enkelheds skyld og godt mål vil jeg gerne erklære datatypen, når jeg erklærer mine variabler.

Vi tildeler datatyper ved blot at placere et kolon efter variabelnavnet, men før lighedstegnet:

const {variabelnavn}: {variabel type} = {variabel værdi }

Dette er konventionen om, at størstedelen af ​​TypeScript-datatyper erklæres med undtagelse af funktioner og objekter.

Nogle datatyper kommer med lidt mere kompleksitet end det, men du får den generelle idé. Nedenfor er nogle korte forklaringer på datatyper og eksempler på, hvordan man erklærer dem.

Boolsk

Booleans i TypeScript fungerer på samme måde som i JavaScript. Variabler af datatypen boolsk erklæres således:

const myBool: boolean = false;

Snor

Strenge i TypeScript fungerer på samme måde som i JavaScript. Variabler af datatypestreng erklæres således:

let myString: string = 'bacon'

Nummer

Numre i TypeScript fungerer på samme måde som i JavaScript. Variabler for datatypenummer erklæres således:

const myNum: number = 1207;

Array

Arrays i TypeScript er ligesom andre datatyper ligesom arrays i JavaScript. Variabler i datatypearray erklæres på to forskellige måder:

const myArr: number[] = [12, 90, 71];

Ovenstående måde er, hvordan du ville erklære en matrix, hvis alle elementerne inde i den matrix er tal.

const myArr: Array = [12, 90, 71];

Denne måde at erklære en matrix bruger den generiske matrixtype indstillet til nummer. Funktionelt er der ingen forskel i, hvordan disse måder producerer slutresultatet af at erklære en variabel med array-type.

Hvis datatyperne inde i arrayet er ukendte eller en blanding af datatyper, kan arrayet erklæres ved hjælp af type (dette er en type helt alene, som diskuteres nedenfor):

const myArr: Array = [12, 'thirteen', false];

På denne måde kan du blande datatyper i arrayet.

Tuples

Tuples er en datatype, der er unik for TypeScript. Tænk på dem som arrays med et fast antal elementer. Denne datatype bruges bedst, når du ved nøjagtigt, hvor mange variabler du skal have. Det er muligt at omfordele værdien af ​​indekserne, men ikke mængden af ​​elementer i tuplen.

Variabler af datatypen tuple erklæres ligesom en matrix:

let mine: [number, string];

Hvis vi gerne vil ændre elementernes værdier , kan vi gøre det, så længe de matcher de typer, vi har angivet, når vi erklærer vores variabel:

mine[0] = 14  ✔️

mine[0] = 'Steve'

Da vi definerede minesom en tuple, har rækkefølgen af ​​værdierne også betydning og kan ikke ændres. Også at tildele et indeks uden for det oprindeligt definerede tal vil give en fejl:

mine[0] = ['Dave', 71]  ❌

mine = [121, 'Dave', 'Steve'];

mine = [121, 'bacon'];  ✔️

Fungere

Funktioner kan være så eksplicit som du vil have dem til at være. Hvad jeg mener med det er, at vi kan anvende typer på parametrene og returnerede værdier. Nedenfor er to eksempler:

Denne funktion kaster en fejl, hvis der returneres en værdi, der ikke er et tal. Den returnerer muligvis kun en variabel , hvis den variable peger på et tal.

Ovenfor skriver vi typekontrol af de parametre, der overføres til vores funktion. Dette er en fantastisk måde at undgå fejl på, for hvis antallet af parametre er slået fra, eller hvis deres datatype ikke svarer til det, vi forventer, vil TypeScript fortælle os, med en fejl.

Hvis jeg vil have en funktion, der ikke skal returnere en værdi, kan jeg indstille typen som ugyldig (en datatype, der betyder fravær af data. Selvom den kan bruges, når variabler erklæres, er det typisk ikke fordi vi ville have for at indstille variablen til null eller udefineret , har jeg kun brugt, når funktioner ikke skal have nogen returværdi), og hvis funktionen returnerer noget, vil TypeScript kaste en fejl:

Ved at indstille typen til at annullere er jeg eksplicit om mine afkast og fastslår, at selvom denne funktion stadig kan køre, skal den ikke returnere en værdi. Hvis den returnerer en værdi, får jeg en fejl.

Enum

Enums er en velkommen (efter min ydmyge mening) tilføjelse til datatyperne. Tænk på dem som en mere brugervenlig tilgang til at give navne til numeriske værdier. Her er et eksempel på en enum:

enum Foods {'bacon', 'tomato', 'lettuce'};

console.log (Foods [0]) // giver 'bacon' console.log (Foods.bacon) // giver 0 console.log (Foods ['lettuce']) // giver 2

Det er også muligt at tildele nummereringsindeksformatet også med enums. Mange sprog inklusive C # har enums, og jeg er glad for at se dem komme til JavaScript.

Du kan være så kreativ som du vil med navnene. Du kan endda ændre den numeriske repræsentation af indekserne. Hvis du vil have dit første indeks til at starte ved 18 i stedet for 0, er det så simpelt som:

enum Foods {'bacon'= 18, 'tomato', 'lettuce'};

console.log(Foods['bacon']); // 18

Lad os sige, at vi havde værdien 18, men var usikre på, hvad den kortlagde til i vores Foodsenum, vi kan også kontrollere det:

console.log(Foods[18]); // 'bacon'

Ét stykke bemærkelsesværdig information er nu, at vi har indstillet det første indeks til at begynde ved 18, det næste indeks vil være 19, og så videre efter nummereringskonventionen, du opretter.

Objekt

Objekter i TypeScript defineres på lignende måder som objekter i JavaScript er defineret. Vi kan være så implicitte eller eksplicitte med vores definition, som vi kan lide, eller som situationen dikterer:

let data: = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

let data: {name: string, age: number, hobbies: string[]} = {name: 'Jonathan', age: 30, hobbies: ['running','swimming','coding']};  ✔️

Når du opretter objekter, er ejendomsnavne uforanderlige, men rækkefølgen, i hvilken de vises, betyder ikke noget, selvom vi definerer dem i en bestemt rækkefølge.

Vi kan også have enkle objekter som dem ovenfor, eller vi kan definere komplekse objekter, der drager fordel af flere datatyper som den nedenfor (dette objekt er kun til demonstrationsformål):

Skriv alias / interface

Med eksemplet på et komplekst objekt ovenfor tænker du måske, at dette er fantastisk, men hvad sker der næste gang jeg har brug for at oprette et komplekst objekt? Jeg skal skrive alt dette manuelt igen?

Frygt ikke, type alias og interface typer er her for at hjælpe! Et typealias er en datatype, der giver os mulighed for at gemme andre datatyper inde i den og derefter henvise til en variabel i stedet for at omskrive kode igen og igen.

Som en sidebemærkning fungerer typealiaser og grænseflader på meget lignende måder. Begge giver os mulighed for at stilladsere et objekt / et blueprint for, hvordan vores data skal struktureres. Der er dog subtile forskelle, som vi ikke vil dække her. I stedet er her et indlæg, der forklarer disse forskelle på en ekstremt effektiv måde, hvis du gerne vil grave dybere.

Der er detaljer mellem de to, som vi skal være opmærksomme på - når vi bruger typealiaset, bruger vi et ligetegn (=) til at erklære værdier, grænsefladen kræver ikke et ligetegn.

Nu hvor vores alias er erklæret, er det tid til at gøre brug af dette alias. Når vi vil "bygge" vores nye variabel ud fra dette alias, indstiller vi den simpelthen som datatypen:

Det er vigtigt at bemærke, at grænsefladen er specifik for TypeScript. Det bruges kun på kompileringstidspunktet til at udføre typekontrol og til at fange eventuelle fejl, der måtte være gledet forbi vores opmærksomme øje.  Dataene fra vores grænseflade ender i vores endelige kode, men selve grænsefladen er samlet .

Klasser

Klasser er til dels det rigtige "brød og smør" af TypeScript (i det mindste efter min ydmyge mening). Ved at holde fast ved denne idé om stilladser på nye objekter giver klasser os mulighed for at opbygge data på en meget nemmere måde end blot manuelt at skrive dem ud hver gang behovet opstår.

Klasser kan betragtes som tegninger for, hvordan vores data skal defineres, og hvilke handlinger, hvis nogen, de skal kunne gennem metoder.

Nedenfor er et eksempel på en klasse i TypeScript (som er mulig ved introduktionen af ​​klasser i ES6):

Nu spørger du måske dig selv, hvad er forskellene mellem en klasse , et typealias og en grænseflade ? Fantastisk spørgsmål! Hovedforskellen mellem er, at klasser kan instantieres (vi kan oprette nye forekomster af dem), men en grænseflade kan ikke.

Der er naturligvis andre forskelle, men det er ikke indeholdt i denne artikels anvendelsesområde. Hvis du gerne vil grave dybere, her er en god artikel, jeg læste for at hjælpe mig med at forstå disse forskelle. Du finder brugssager til dem alle, som jeg har, når du bruger TypeScript.

Union

Dette er langt væk min foretrukne datatype TypeScript! Unionstypen giver os mulighed for at erklære en variabel og derefter indstille den til en "enten eller" -værdi. Hvad jeg mener med det, er lad os sige, at vi forventer, at data sendes til en funktion, men vi er ikke sikre på, om det er en streng eller et tal - dette er det perfekte (og tilsigtede) formål med unionstypen.

Vi bruger single pipe-tegnet (i Windows er det Shift + nøglen lige over Enter), når vi definerer typen. Sådan ser det ud, når du definerer en variabel med union datatype:

const numOfDoors: string | string[ ];

Dette fortæller TypeScript, at numOfDoors er en variabel, der kan indeholde enten en streng eller en række strenge.

Her er et eksempel på den funktion, jeg nævnte tidligere ved hjælp af unionstype:

Nogen

Enhver er den type, vi indstiller, når vi er usikre på, hvilke typer data vi får. Måske får vi noget fra en tredjepart eller nogle dynamiske data, og vi er ikke 100% sikre på, om vi får en streng, et nummer eller måske en række oplysninger. Dette er den perfekte brugskasse til enhver type .

Jeg vil advare mod at bruge typen nogen , medmindre du absolut must, fordi når de anvendes vi fravalg af en af de centrale funktioner i skrivemaskine - typekontrol.

Denne datatype har dog dens brugssager ligesom alle de nævnte datatyper.

Det er en wrap!

Jeg fortalte dig, at dette ikke ville tage for lang tid: D

Jeg håber du nød denne artikel om TypeScript og er begejstret for, hvordan det kan vise sig nyttigt for din kodebase. I den næste artikel graver vi ind i den praktiske side af TypeScript. Vi går over installationen, kompilering og brug af det i dit projekt (heller ikke kun kantede projekter)!

Dette blev oprindeligt sendt til min blog.

Mens du er der, skal du ikke glemme at tilmelde dig mit nyhedsbrev - du kan gøre det øverst til højre på siden. 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å denne side. Jeg elsker at få forbindelse med andre og møde nye mennesker, så vær ikke bange for at sige hej :)

Har en fantastisk dag ven og glad kodning!