TypeScript för nybörjare, Del 2 Grundläggande datatyper

Efter att ha läst den inledande TypeScript-handledningen bör du nu kunna skriva en egen TypeScript-kod i en IDE som stöder den och sedan kompilera den till JavaScript. I den här handledningen lär du dig information om olika typer av datatyper som finns tillgängliga i TypeScript.

JavaScript har sju olika datatyper: Null, Undefined, Boolean, Number, String, Symbol (introducerad i ES6) och Objekt. TypeScript definierar några fler typer, och alla kommer att beskrivas i detalj i denna handledning.

Nulldatatypen

Precis som i JavaScript, den null datatyp i TypeScript kan bara ha ett giltigt värde: null. En nollvariabel kan inte innehålla andra datatyper som nummer och sträng. Om du ställer in en variabel till noll raderas innehållet om det hade något. 

Kom ihåg att när strictNullChecks flaggan är inställd på Sann i tsconfig.json, endast värdet null kan tilldelas variabler med null typ. Den här flaggan är avstängd som standard, vilket betyder att du också kan tilldela nollvärdet till variabler med andra typer som siffra eller ogiltig.

// Med strictNullChecks satt till true låt a: null = null; // Ok låt b: undefined = null; // Fel låt c: number = null; // Fel låt d: void = null; // Fel // Med strictNullChecks satt till false låt a: null = null; // Ok låt b: undefined = null; // Ok låt c: number = null; // Ok låt d: void = null; // Ok

Den odefinierade datatypen

Varje variabel vars värde du inte har angett är inställt på odefinierad. Du kan dock också uttryckligen ange typen av en variabel till odefinierad, som i följande exempel. 

Tänk på att en variabel med typ satt till odefinierad kan bara ha odefinierat som sitt värde. Om strictNullChecks alternativet är inställt på falsk, Du kommer också att kunna tilldela odefinierad till variabler med nummer och strängtyper, etc..

// Med strictNullChecks satt till true låt a: undefined = undefined; // Ok låt b: undefined = null; // Fel låt c: number = undefined; // Fel låt d: void = undefined; // Ok // Med strictNullChecks satt till false låt a: undefined = undefined; // Ok låt b: undefined = null; // Ok låt c: number = odefinierat; // Ok låt d: void = undefined; // Ok

Den raderade datatypen

Tomtdatatypen används för att indikera bristen på a typ för en variabel. Ställ in variabler för att ha a ogiltig typen kan inte vara mycket användbar, men du kan ställa in returtypen av funktioner som inte returnerar något till ogiltig. När den används med variabler, typen ogiltig kan bara ha två giltiga värden: null och odefinierad.

// Med strictNullChecks satt till true låt a: void = undefined; // Ok låt b: void = null; // Fel låt c: void = 3; // Fel låt d: void = "apple"; // Fel // Med strictNullChecks satt till false låt a: void = undefined; // Ok låt b: void = null; // Ok låt c: void = 3; // Fel låt d: void = "apple"; // Fel

Den booleska datatypen

till skillnad från siffra och sträng datatyper, boolean har bara två giltiga värden. Du kan bara ange sitt värde till antingen Sann eller falsk. Dessa värden används mycket i kontrollstrukturer där ett stycke kod utförs om ett villkor är Sann och ett annat kodstycke utförs om ett villkor är falsk

Här är ett mycket grundläggande exempel på att deklarera boolesiska variabler:

låt a: boolean = true; låt b: boolean = false; låt c: boolean = 23; // Fel låt d: boolean = "blue"; // Fel

Nummerdatatypen

De siffra datatyp används för att representera både heltal och flytpunktsvärden i både JavaScript och TypeScript. Du bör dock komma ihåg att alla siffror är internt representerade som flytande punktvärden. Nummer kan också anges som hexadecimal, oktal eller binär bokstav. Tänk på att Octal och Binära representationer introducerades i ES6, och detta kan resultera i olika JavaScript-kodutgång baserat på den version du riktar in. 

Det finns också tre extra speciella symboliska värden som faller under siffra typ:  +Oändlighet-Oändlighet, och NaN. Här är några exempel på hur du använder siffra typ.

// Med strictNullChecks satt till true låt a: number = undefined; // Fel låt b: nummer = null; // Fel låt c: nummer = 3; låt d: tal = 0b111001; // Binär låt e: nummer = 0o436; // Octal låt f: tal = 0xadf0d; // Hexadecimal låt g: number = "cat"; // Fel // Med strictNullChecks satt till false låt a: number = undefined; // Ok låt b: nummer = null; // Ok, låt c: nummer = 3; låt d: tal = 0b111001; // Binär låt e: nummer = 0o436; // Octal låt f: tal = 0xadf0d; // Hexadecimal låt g: number = "cat"; // Fel

När målversionen är inställd på ES6 kommer den ovanstående koden att kompileras till följande JavaScript:

låt a = odefinierad; låt b = null; låt c = 3; låt d = 0b111001; låt e = 0o436; låt f = 0xadf0d; låt g = "katt";

Du bör notera att JavaScript-variablerna fortfarande är deklarerade med låta, som introducerades i ES6. Du ser inte några felmeddelanden som är relaterade till typ av olika variabler eftersom JavaScript-koden inte känner till vilka typer vi använde i TypeScript-koden.

Om målversionen är inställd på ES5, kommer den typScript-kod som vi skrev tidigare att kompilera för att följa JavaScript:

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

Som du kan se, denna gång alla händelser av låta sökordet har ändrats till var. Observera också att de oktala och binära talen har ändrats till deras decimalform.

Strängdatatypen

Strängdatatypen används för att lagra textinformation. Både JavaScript och TypeScript använder dubbla citat (") samt enkla citat (') för att omge din textinformation som en sträng. En sträng kan innehålla noll eller flera tecken bifogade citat.

// Med strictNullChecks satt till true låt a: string = undefined; // Fel låt b: sträng = null; // Fel låt c: sträng = ""; låt d: sträng = "y"; låt e: string = "building"; låt f: sträng = 3; // Fel låt g: sträng = "3"; // Med strictNullChecks satt till false låt a: string = undefined; // Ok låt b: sträng = null; // Ok, låt c: sträng = ""; låt d: sträng = "y"; låt e: string = "building"; låt f: sträng = 3; // Fel låt g: sträng = "3";

TypeScript stöder också mallsträngar eller mallstavlar. Dessa mallstavlar tillåter dig att bädda in uttryck i en sträng. Mall bokstäver är bifogade av back-tick karaktären (') istället för dubbla citat och enkla citat som bifogar vanliga strängar. De introducerades i ES6. Det innebär att du får olika JavaScript-utgåva baserat på vilken version du riktar in. Här är ett exempel på att använda mallstavlar i TypeScript:

låt e: string = "building"; låt f: tal = 300; låt dom: string = '$ e framför mitt kontor är $ f meter lång.';

Vid sammanställning får du följande JavaScript:

// Utgång i ES5 var e = "byggnad"; var f = 300; var sentence = "Den" + e + "framför mitt kontor är" + f + "fötter långa."; // Utgång i ES6 låt e = "byggnad"; låt f = 300; låt sentence = '$ e framför mitt kontor är $ f meter lång.';

Som du kan se ändrades mallen bokstavligt till en vanlig sträng i ES5. I det här exemplet visas hur TypScript gör det möjligt för dig att använda alla de senaste JavaScript-funktionerna utan att oroa dig för kompatibilitet.

Array och Tuple Datatyper

Du kan definiera array typer på två olika sätt i JavaScript. I den första metoden anger du vilken typ av arrayelement som följs av [] vilket betecknar en uppsättning av den typen. En annan metod är att använda den generiska array typen Array. I följande exempel visas hur man skapar arrayer med båda dessa metoder. Ange null eller odefinierad som ett av elementen kommer att ge upphov till fel när strictNullChecks flagga är Sann.

// Med strictNullChecks satt till false, låt a: nummer [] = [1, 12, 93, 5]; låt b: sträng [] = ["a", "aprikos", "mango"]; låt c: tal [] = [1, "äpple", "potatis"]; // Fel låt d: Array = [null, odefinierad, 10, 15]; låt e: Array = ["paj", null, ""]; // Med strictNullChecks satt till true låt a: number [] = [1, 12, 93, 5]; låt b: sträng [] = ["a", "aprikos", "mango"]; låt c: tal [] = [1, "äpple", "potatis"]; // Fel låt d: Array = [null, odefinierad, 10, 15]; // Fel låt e: Array = ["paj", null, ""]; // Fel

Tuple-datatypen kan du skapa en array där typen av ett fast antal element är känt i förväg. Typen av resten av elementen kan bara vara en av de typer som du redan har angett för tupeln. Här är ett exempel som gör det tydligare:

låt a: [nummer, sträng] = [11, "måndag"]; låt b: [nummer, sträng] = ["måndag", 11]; // Fel låt c: [nummer, sträng] = ["a", "apa"]; // Fel låt d: [nummer, sträng] = [105, "uggla", 129, 45, "katt"]; låt e: [nummer, sträng] = [13, "fladdermus", "spiderman", 2]; e [13] = "elefant"; e [15] = false; // Fel

För alla tuplar i vårt exempel har vi satt typ av det första elementet till a siffra och den typ av det andra elementet till a sträng. Eftersom vi bara har angett a typ För de två första elementen kan resten av dem vara en sträng eller ett tal. Skapa tuples b och c resulterar i ett fel eftersom vi försökte använda en sträng som ett värde för det första elementet när vi hade nämnt att det första elementet skulle vara ett tal.

På samma sätt kan vi inte ange värdet av ett tupleelement till falsk efter att ha angett att det bara kommer att innehålla strängar och siffror. Det är därför som den sista raden resulterar i ett fel.

Enumdatatypen

De enum datatyp finns i många programmeringsspråk som C och Java. Det har saknats från JavaScript, men TypeScript låter dig skapa och arbeta med enums. Om du inte vet vad enums De tillåter dig att skapa en samling relaterade värden med minnesvärda namn.

enum Djur katt, lejon, hund, ko, apa låt c: Djur = Djur.cat; console.log (Djur [3]); // cow console.log (Animals.monkey); // 4

Som standard börjar numreringen av enums vid 0, men du kan också ange ett annat värde manuellt för de första eller andra medlemmarna. Detta kommer att ändra värdet av alla medlemmar som följer dem genom att öka deras värde med 1. Du kan också ställa in alla värden manuellt i en enum.

enum Djur cat = 1, lejon, hund = 11, ko, apa låt c: Djur = Djur.cat; console.log (Djur [3]); // odefinierad console.log (Animals.monkey); // 13

Till skillnad från föregående exempel, värdet av Djur [3] är odefinierad den här gången. Detta beror på att värdet 3 skulle ha tilldelats hunden, men vi bestämde uttryckligen sitt värde till 11. Värdet för ko stannar vid 12 och inte 3 eftersom värdet ska vara en större än värdet av det sista medlemmet.

Alla och Aldrig Typer

Låt oss säga att du skriver ett program där värdet av en variabel bestäms av användarna eller koden som skrivs i ett tredje part bibliotek. I det här fallet kommer du inte att kunna ställa in typen av variabeln korrekt. Variabeln kan vara av någon typ som en sträng, ett tal eller en booleska. Detta problem kan lösas med hjälp av några typ. Detta är också användbart när du skapar arrayer med element av blandade typer.

låt a: any = "apple"; låt b: någon = 14; låt c: any = false; låt d: någon [] = ["dörr", "kök", 13, fel, null]; b = "människor";

I ovanstående kod kunde vi tilldela ett nummer till b och ändra dess värde till en sträng utan att få något fel eftersom typen några kan acceptera alla typer av värden.

De aldrig typ används för att representera värden som aldrig ska inträffa. Till exempel kan du tilldela aldrig som returtyp för en funktion som aldrig återkommer. Detta kan hända när en funktion alltid kasta ett fel eller när det fastnar i en oändlig slinga.

låt a: aldrig; // Ok låt b: aldrig = false; // Fel låt c: aldrig = null; // Fel låt d: aldrig = "måndag"; // Felfunktion fast (): aldrig while (true)  

Slutgiltiga tankar

Denna handledning introducerade dig till alla typer som finns tillgängliga i TypeScript. Vi lärde oss hur att tilldela en annan typ av värde till en variabel visar fel i TypeScript. Denna kontroll kan hjälpa dig att undvika många fel när du skriver stora program. Vi lärde oss också att rikta in olika versioner av JavaScript.

Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.

I nästa handledning lär du dig information om gränssnitt i TypeScript. Om du har några frågor relaterade till denna handledning, låt mig veta i kommentarerna.