TypeScript for nybegynnere, del 2 Grunnleggende datatyper

Etter å ha lest den innledende TypeScript-opplæringen, bør du nå skrive din egen TypeScript-kode i en IDE som støtter den og deretter kompilere den til JavaScript. I denne opplæringen lærer du om ulike typer datatyper som er tilgjengelige i TypeScript.

JavaScript har syv forskjellige datatyper: null, undefined, boolsk, tall, streng, symbol (introdusert i ES6) og objekt. TypeScript definerer noen flere typer, og alle av dem vil bli dekket i detalj i denne opplæringen.

Null Data Type

Akkurat som i JavaScript, den null datatype i TypeScript kan bare ha en gyldig verdi: null. En null-variabel kan ikke inneholde andre datatyper som tall og streng. Setter en variabel til null vil slette innholdet hvis det hadde noen. 

Husk at når strictNullChecks flagget er satt til ekte i tsconfig.json, bare verdien null kan tildeles variabler med null type. Dette flagget er slått av som standard, noe som betyr at du også kan tilordne nullverdien til variabler med andre typer som Nummer eller tomrom.

// Med strictNullChecks satt til true, la a: null = null; // Ok la b: undefined = null; // Feil la c: tall = null; // Feil la d: void = null; // Feil // Med strictNullChecks satt til false la a: null = null; // Ok la b: undefined = null; // Ok la c: tall = null; // Ok la d: void = null; // Ok

Den udefinerte datatypen

Enhver variabel hvis verdi du ikke har oppgitt er satt til udefinert. Du kan imidlertid også eksplisitt sette typen av en variabel til udefinert, som i følgende eksempel. 

Husk at en variabel med type satt til udefinert kan bare ha undefined som sin verdi. Hvis strictNullChecks alternativet er satt til falsk, Du vil også kunne tildele udefinert til variabler med tall og strengtyper mv.

// Med strictNullChecks satt til true la a: undefined = undefined; // Ok la b: undefined = null; // Feil la c: tall = undefined; // Feil la d: void = undefined; // Ok // Med strictNullChecks satt til false la a: undefined = undefined; // Ok la b: undefined = null; // Ok la c: tall = undefined; // Ok la d: void = undefined; // Ok

Den ugyldige datatypen

Ugyldighetsdatatypen brukes til å indikere mangelen på a type for en variabel. Innstilling av variabler for å ha a tomrom typen kan ikke være veldig nyttig, men du kan angi retur type funksjoner som ikke returnerer noe til tomrom. Når det brukes med variabler, typen tomrom kan bare ha to gyldige verdier: null og udefinert.

// Med strictNullChecks satt til true, la a: void = undefined; // Ok la b: void = null; // Feil la c: void = 3; // Feil la d: void = "apple"; // Feil // Med strictNullChecks satt til false la a: void = undefined; // Ok la b: void = null; // Ok la c: void = 3; // Feil la d: void = "apple"; // Feil

Den boolske datatypen

i motsetning til Nummer og string datatyper, boolean har bare to gyldige verdier. Du kan bare sette verdien til enten ekte eller falsk. Disse verdiene brukes mye i kontrollstrukturer der ett stykke kode utføres hvis en tilstand er ekte og et annet stykke kode utføres hvis en tilstand er falsk

Her er et veldig grunnleggende eksempel på å erklære boolske variabler:

la a: boolean = true; la b: boolean = false; la c: boolean = 23; // Feil la d: boolean = "blue"; // Feil

Nummerdatatypen

De Nummer datatype brukes til å representere både heltall og flytende punktverdier i både JavaScript og TypeScript. Du bør imidlertid huske at alle tallene er internt representert som flytende punktverdier. Tall kan også angis som Hexadecimal, Octal eller Binær bokstav. Husk at Octal og Binær representasjoner ble introdusert i ES6, og dette kan resultere i forskjellig JavaScript-kodeutgang basert på den versjonen du målretter mot. 

Det er også tre ekstra spesielle symbolske verdier som faller under Nummer type:  +evighet-evighet, og NaN. Her er noen eksempler på å bruke Nummer type.

// Med strictNullChecks satt til true, la a: number = undefined; // Feil la b: tall = null; // Feil la c: tall = 3; la d: tall = 0b111001; // Binær la e: tall = 0o436; // Octal la f: tall = 0xadf0d; // Hexadecimal la g: number = "cat"; // Feil // Med strictNullChecks satt til false la a: number = undefined; // Ok la b: tall = null; // Ok la c: tall = 3; la d: tall = 0b111001; // Binær la e: tall = 0o436; // Octal la f: tall = 0xadf0d; // Hexadecimal la g: number = "cat"; // Feil

Når målversjonen er satt til ES6, vil koden ovenfor kompilere til følgende JavaScript:

la a = undefined; la b = null; la c = 3; la d = 0b111001; la e = 0o436; la f = 0xadf0d; la g = "katt";

Du bør være oppmerksom på at JavaScript-variablene fortsatt er deklarert med la, som ble introdusert i ES6. Du ser også ikke noen feilmeldinger relatert til type av forskjellige variabler fordi JavaScript-koden ikke har kjennskap til de typene vi brukte i TypeScript-koden.

Hvis målversjonen er satt til ES5, vil TypeScript-koden vi skrev tidligere kompilere til følgende JavaScript:

var a = udefinert; var b = null; var c = 3; var d = 57; var e = 286; var f = 0xadf0d; var g = "katt";

Som du kan se, denne gangen alle forekomster av la Søkeordet er endret til Var. Legg også merke til at de oktale og binære tallene er endret til desimalformene.

String Data Type

Strengen datatypen brukes til å lagre tekstinformasjon. Både JavaScript og TypeScript bruker doble anførselstegn (") samt enkelt anførselstegn (') for å omslutte tekstinformasjonen din som en streng. En streng kan inneholde null eller flere tegn vedlagt anførselstegn.

// Med strictNullChecks satt til true la a: string = undefined; // Feil la b: streng = null; // Feil la c: string = ""; la d: streng = "y"; la e: string = "building"; la f: streng = 3; // Feil la g: string = "3"; // Med strictNullChecks satt til false la a: string = undefined; // Ok la b: streng = null; // Ok la c: string = ""; la d: streng = "y"; la e: string = "building"; la f: streng = 3; // Feil la g: string = "3";

TypeScript støtter også malstrenger eller malte bokstaver. Disse mal bokstavene lar deg legge inn uttrykk i en streng. Malte bokstaver er omsluttet av back-tick karakteren (') i stedet for doble anførselstegn og enkle anførselstegn som vedlegger vanlige strenger. De ble introdusert i ES6. Dette betyr at du vil få forskjellig JavaScript-utgang basert på den versjonen du målretter mot. Her er et eksempel på bruk av malte bokstaver i TypeScript:

la e: string = "building"; la f: tall = 300; la setningen: string = '$ e foran kontoret mitt er $ f meter høyt.';

Ved kompilering får du følgende JavaScript:

// Utgang i ES5 var e = "bygning"; var f = 300; var setning = "Den" + e + "foran kontoret mitt er" + f + "føttene høye."; // Output i ES6 la e = "building"; la f = 300; la setning = '$ e foran kontoret mitt er $ f meter høyt.';

Som du kan se ble malen bokstavelig endret til en vanlig streng i ES5. Dette eksempelet viser hvordan TypeScript gjør det mulig for deg å bruke alle de nyeste JavaScript-funksjonene uten å bekymre deg for kompatibilitet.

Array og Tuple Datatyper

Du kan definere array typer på to forskjellige måter i JavaScript. I den første metoden spesifiserer du typen arrayelementer etterfulgt av [] som betegner en matrise av den typen. En annen metode er å bruke generisk array type Array. Følgende eksempel viser hvordan du lager arrays med begge disse metodene. spesifisere null eller udefinert som et av elementene vil gi feil når strictNullChecks flagg er ekte.

// Med strictNullChecks satt til false la a: tall [] = [1, 12, 93, 5]; la b: streng [] = ["a", "aprikos", "mango"]; la c: tall [] = [1, "eple", "potet"]; // Feil la d: Array = [null, undefined, 10, 15]; la e: Array = ["pie", null, ""]; // Med strictNullChecks satt til true, la a: tall [] = [1, 12, 93, 5]; la b: streng [] = ["a", "aprikos", "mango"]; la c: tall [] = [1, "eple", "potet"]; // Feil la d: Array = [null, undefined, 10, 15]; // Feil la e: Array = ["pie", null, ""]; // Feil

Tuple datatypen lar deg lage en matrise der typen av et fast antall elementer er kjent på forhånd. Typen av resten av elementene kan bare være en av de typene du allerede har oppgitt for tupelen. Her er et eksempel som gjør det klart:

la a: [tall, streng] = [11, "mandag"]; la b: [tall, streng] = ["mandag", 11]; // Feil la c: [tall, streng] = ["a", "ape"]; // Feil la d: [tall, streng] = [105, "ugle", 129, 45, "katt"]; la e: [tall, streng] = [13, "bat", "spiderman", 2]; e [13] = "elefant"; e [15] = false; // Feil

For alle tuplene i vårt eksempel har vi satt type av det første elementet til a Nummer og type av det andre elementet til a string. Siden vi bare har angitt a type For de to første elementene kan resten av dem enten være en streng eller et tall. Skaper tuples b og c resulterer i en feil fordi vi prøvde å bruke en streng som en verdi for det første elementet når vi hadde nevnt at det første elementet ville være et tall.

På samme måte kan vi ikke sette verdien av et tupleelement til falsk etter at du har oppgitt at det bare vil inneholde strenge og tall. Det er derfor den siste linjen resulterer i en feil.

Enum Data Type

De enum Datatypen finnes i mange programmeringsspråk som C og Java. Det har gått glipp av JavaScript, men TypeScript lar deg lage og arbeide med enums. Hvis du ikke vet hva enums er, de tillater deg å lage en samling av relaterte verdier ved hjelp av minneverdige navn.

enum Dyr cat, lion, dog, cow, monkey la c: Animals = Animals.cat; console.log (Animals [3]); // ku console.log (Animals.monkey); // 4

Som standard starter nummereringen av enums ved 0, men du kan også angi en annen verdi manuelt for de første eller andre medlemmer. Dette vil endre verdien av alle medlemmene som følger dem ved å øke verdien sin med 1. Du kan også sette alle verdiene manuelt i en enum.

enum Dyr cat = 1, lion, dog = 11, cow, ape la c: Animals = Animals.cat; console.log (Animals [3]); // undefined console.log (Animals.monkey); // 1. 3

I motsetning til forrige eksempel, verdien av Dyr [3] er udefinert denne gangen. Dette skyldes at verdien 3 hadde blitt tildelt hunden, men vi satte eksplisitt sin verdi til 11. Verdien for ku forblir ved 12 og ikke 3 fordi verdien skal være en større enn verdien av det siste medlemmet.

Enhver og Aldri Typer

La oss si at du skriver et program der verdien av en variabel er bestemt av brukerne eller koden som er skrevet i et tredjepartsbibliotek. I dette tilfellet kan du ikke angi typen av variabelen riktig. Variabelen kan være av hvilken som helst type som en streng, tall eller boolesk. Dette problemet kan løses ved å bruke noen type. Dette er også nyttig når du lager arrays med elementer av blandede typer.

la a: any = "apple"; la b: any = 14; la c: any = false; la d: noen [] = ["dør", "kjøkken", 13, falsk, null]; b = "folk";

I ovennevnte kode kunne vi tildele et nummer til b og deretter endre verdien til en streng uten å få noen feil fordi typen noen kan godta alle typer verdier.

De aldri type brukes til å representere verdier som aldri skal forekomme. For eksempel kan du tildele aldri som returtype av en funksjon som aldri returnerer. Dette kan skje når en funksjon alltid kaster en feil eller når den sitter fast i en uendelig sløyfe.

la a: aldri; // Ok la b: aldri = false; // Feil la c: aldri = null; // Feil la d: aldri = "mandag"; // Feilfunksjon fast (): aldri mens (sann)  

Siste tanker

Denne opplæringen introduserte deg til alle typer som er tilgjengelige i TypeScript. Vi lærte hvordan tildeling av en annen type verdi til en variabel vil vise feil i TypeScript. Denne kontrollen kan hjelpe deg med å unngå mange feil når du skriver store programmer. Vi lærte også å målrette mot forskjellige versjoner av JavaScript.

Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.

I neste opplæring lærer du om grensesnitt i TypeScript. Hvis du har spørsmål relatert til denne opplæringen, gi meg beskjed i kommentarene.