Share
Na het lezen van de inleidende TypeScript-zelfstudie, zou u nu in staat moeten zijn om uw eigen TypeScript-code in een IDE die dit ondersteunt te schrijven en vervolgens te compileren naar JavaScript. In deze zelfstudie leert u over verschillende soorten gegevenstypen die beschikbaar zijn in TypeScript.
JavaScript heeft zeven verschillende gegevenstypen: Null, Undefined, Boolean, Number, String, Symbol (geïntroduceerd in ES6) en Object. TypeScript definieert nog een paar typen en ze worden allemaal in detail behandeld in deze zelfstudie.
Net als in JavaScript, de nul gegevenstype in TypeScript kan maar één geldige waarde hebben: nul. Een nul-variabele kan geen andere gegevenstypen zoals nummer en tekenreeks bevatten. Als u een variabele instelt op nul, wordt de inhoud gewist als die er een had.
Vergeet niet dat toen het strictNullChecks vlag is ingesteld op waar in tsconfig.json, alleen de waarde null is toewijsbaar aan variabelen met nultype. Deze vlag is standaard uitgeschakeld, wat betekent dat je de null-waarde ook aan variabelen kunt toewijzen met andere typen zoals aantal of leegte.
// Met strictNullChecks ingesteld op true, laat a: null = null; // Ok laat b: undefined = null; // Fout laat c: number = null; // Fout laat d: void = null; // Fout // Met strictNullChecks ingesteld op false, laat a: null = null; // Ok laat b: undefined = null; // Ok laat c: number = null; // Ok let d: void = null; // OK
Elke variabele waarvan de waarde die u niet hebt opgegeven, is ingesteld op onbepaald. U kunt echter ook expliciet het type variabele instellen op undefined, zoals in het volgende voorbeeld.
Houd er rekening mee dat een variabele met type ingesteld op onbepaald kan alleen ongedefinieerd zijn als zijn waarde. Als het strictNullChecks optie is ingesteld op vals, je zult ook kunnen toewijzen onbepaald naar variabelen met nummer- en stringtypen, enz.
// Met strictNullChecks ingesteld op true, laat a: undefined = undefined; // Ok laat b: undefined = null; // Fout laat c: number = undefined; // Fout laat d: void = undefined; // Ok // Met strictNullChecks ingesteld op false, laat a: undefined = undefined; // Ok laat b: undefined = null; // Ok laat c: number = undefined; // Ok let d: void = undefined; // OK
Het ongeldige gegevenstype wordt gebruikt om het ontbreken van een aan te duiden type voor een variabele. Variabelen instellen om een te hebben leegte type is misschien niet erg handig, maar je kunt het retourneertype instellen van functies waarnaar niets wordt geretourneerd leegte. Bij gebruik met variabelen, het type leegte kan slechts twee geldige waarden hebben: nul en onbepaald.
// Met strictNullChecks ingesteld op true, laat a: void = undefined; // Ok laat b: void = null; // Fout laat c: void = 3; // Fout laat d: void = "apple"; // Fout // Met strictNullChecks ingesteld op false, laat a: void = undefined; // Ok laat b: void = null; // Ok laat c: void = 3; // Fout laat d: void = "apple"; // Fout
In tegenstelling tot de aantal en draad gegevenstypes, boolean heeft slechts twee geldige waarden. U kunt alleen de waarde ervan op beide instellen waar of vals. Deze waarden worden veel gebruikt in controlestructuren waarbij een stuk code wordt uitgevoerd als een voorwaarde is waar en een ander stuk code wordt uitgevoerd als een voorwaarde is vals.
Hier is een zeer eenvoudig voorbeeld van het declareren van Booleaanse variabelen:
laat a: boolean = true; laat b: boolean = false; laat c: boolean = 23; // Fout laat d: boolean = "blue"; // Fout
De aantal gegevenstype wordt gebruikt om zowel gehele getallen als drijvende-kommawaarden in zowel JavaScript als TypeScript weer te geven. Houd er echter rekening mee dat alle getallen intern worden weergegeven als drijvende-kommawaarden. Getallen kunnen ook worden opgegeven als hexadecimaal, octaal of binair. Houd er rekening mee dat Octal- en Binary-weergaven zijn geïntroduceerd in ES6 en dit kan resulteren in verschillende JavaScript-code-uitvoer op basis van de versie die u target.
Er zijn ook drie extra speciale symbolische waarden die onder de aantal type: +Oneindigheid, -Oneindigheid, en NaN. Hier zijn een paar voorbeelden van het gebruik van de aantal type.
// Met strictNullChecks ingesteld op true, laat a: number = undefined; // Fout laat b: number = null; // Fout laat c: nummer = 3; laat d: nummer = 0b111001; // Binary let e: number = 0o436; // Octal let f: number = 0xadf0d; // Hexadecimaal laat g: number = "cat"; // Fout // Met strictNullChecks ingesteld op false, laat a: number = undefined; // Ok laat b: number = null; // Ok laat c: nummer = 3; laat d: nummer = 0b111001; // Binary let e: number = 0o436; // Octal let f: number = 0xadf0d; // Hexadecimaal laat g: number = "cat"; // Fout
Wanneer de doelversie is ingesteld op ES6, compileert de bovenstaande code zich tot het volgende JavaScript:
laat a = undefined; laat b = null; laat c = 3; laat d = 0b111001; laat e = 0o436; laat f = 0xadf0d; laat g = "kat";
Houd er rekening mee dat de JavaScript-variabelen nog steeds worden gedeclareerd met laat, die werd geïntroduceerd in ES6. U ziet ook geen foutmeldingen gerelateerd aan de type van verschillende variabelen omdat de JavaScript-code geen kennis heeft van de typen die we in de TypeScript-code hebben gebruikt.
Als de doelversie is ingesteld op ES5, zal de TypeScript-code die we eerder hebben geschreven, worden gecompileerd met het volgende JavaScript:
var a = undefined; var b = null; var c = 3; var d = 57; var e = 286; var f = 0xadf0d; var g = "cat";
Zoals u kunt zien, deze keer alle keren dat de laat trefwoord is gewijzigd in var. Merk ook op dat de octale en binaire getallen zijn gewijzigd in hun decimale vormen.
Het tekenreeksgegevenstype wordt gebruikt om tekstuele informatie op te slaan. Zowel JavaScript als TypeScript gebruiken dubbele aanhalingstekens (") en enkele aanhalingstekens (') om uw tekstuele informatie als een string te omringen. Een tekenreeks kan nul of meer tekens bevatten die tussen aanhalingstekens zijn geplaatst.
// Met strictNullChecks ingesteld op true, laat a: string = undefined; // Fout laat b: string = null; // Fout laat c: string = ""; laat d: string = "y"; laat e: string = "building"; laat f: string = 3; // Fout laat g: string = "3"; // Met strictNullChecks ingesteld op false, laat a: string = undefined; // Ok laat b: string = null; // Ok laat c: string = ""; laat d: string = "y"; laat e: string = "building"; laat f: string = 3; // Fout laat g: string = "3";
TypeScript ondersteunt ook sjabloonkentekens of standaardlettergebruik. Met deze standaardletterverwijzingen kunt u uitdrukkingen in een tekenreeks insluiten. Template-letterwoorden worden ingesloten door het terugtikteken (') in plaats van dubbele aanhalingstekens en enkele aanhalingstekens die normale tekenreeksen omsluiten. Ze werden geïntroduceerd in ES6. Dit betekent dat u verschillende JavaScript-uitvoer krijgt op basis van de versie die u target. Hier is een voorbeeld van het gebruik van template-letterwoorden in TypeScript:
laat e: string = "building"; laat f: getal = 300; let sentence: string = 'De $ e voor mijn kantoor is $ f feet tall.';
Na compilatie krijgt u het volgende JavaScript:
// Uitvoer in ES5 var e = "gebouw"; var f = 300; var sentence = "De" + e + "voor mijn kantoor is" + f + "feet tall."; // Uitgang in ES6 laat e = "bouwen"; laat f = 300; laat zin = 'De $ e voor mijn kantoor is $ f voet lang.';
Zoals u kunt zien, is de letterlijke sjabloon in ES5 gewijzigd in een normale tekenreeks. Dit voorbeeld laat zien hoe TypeScript het voor u mogelijk maakt om alle nieuwste JavaScript-functies te gebruiken zonder u zorgen te maken over compatibiliteit.
U kunt array-typen in JavaScript op twee verschillende manieren definiëren. In de eerste methode geeft u het type array-elementen op gevolgd door [] die een array van dat type aanduidt. Een andere methode is om het generieke array-type te gebruiken reeks. Het volgende voorbeeld laat zien hoe u arrays met beide methoden kunt maken. opgeven nul of onbepaald als een van de elementen fouten zal veroorzaken wanneer het strictNullChecks vlag is waar.
// Met strictNullChecks ingesteld op false, laat a: getal [] = [1, 12, 93, 5]; laat b: string [] = ["a", "apricot", "mango"]; laat c: nummer [] = [1, "appel", "aardappel"]; // Fout laat d: array= [null, undefined, 10, 15]; laat e: Array = ["taart", null, ""]; // Met strictNullChecks ingesteld op waar, laat a: getal [] = [1, 12, 93, 5]; laat b: string [] = ["a", "apricot", "mango"]; laat c: nummer [] = [1, "appel", "aardappel"]; // Fout laat d: array = [null, undefined, 10, 15]; // Fout laat e: Array = ["taart", null, ""]; // Fout
Met het gegevenstype tuple kunt u een array maken waarvan het type van een vast aantal elementen van tevoren bekend is. Het type van de rest van de elementen kan slechts een van de typen zijn die u al hebt opgegeven voor de tuple. Hier is een voorbeeld dat het duidelijker maakt:
laat a: [nummer, string] = [11, "maandag"]; laat b: [nummer, string] = ["maandag", 11]; // Fout laat c: [nummer, tekenreeks] = ["a", "aap"]; // Fout laat d: [nummer, tekenreeks] = [105, "uil", 129, 45, "kat"]; laat e: [nummer, string] = [13, "bat", "spiderman", 2]; e [13] = "olifant"; e [15] = false; // Fout
Voor alle tuples in ons voorbeeld hebben we de type van het eerste element tot a aantal en de type van het tweede element tot a draad. Aangezien we alleen een a hebben opgegeven type voor de eerste twee elementen kan de rest een tekenreeks of een getal zijn. Tuples maken b en c resulteert in een fout omdat we hebben geprobeerd een tekenreeks als waarde voor het eerste element te gebruiken toen we hadden gezegd dat het eerste element een getal zou zijn.
Evenzo kunnen we de waarde van een tuple-element niet instellen vals nadat u hebt opgegeven dat het alleen strings en getallen bevat. Daarom resulteert de laatste regel in een fout.
De enum datatype is aanwezig in veel programmeertalen zoals C en Java. Het is gemist in JavaScript, maar met TypeScript kunt u enums maken en gebruiken. Als je niet weet wat enums zijn, ze laten je toe om een verzameling verwante waarden te creëren met gedenkwaardige namen.
enum Dieren kat, leeuw, hond, koe, aap laat c: Animals = Animals.cat; console.log (Dieren [3]); // cow console.log (Animals.monkey); // 4
Standaard begint de nummering van enums bij 0, maar u kunt ook handmatig een andere waarde voor de eerste of andere leden instellen. Hierdoor wordt de waarde van alle leden die ze volgen gewijzigd door de waarde met 1 te verhogen. U kunt ook alle waarden handmatig in een enum.
enum Dieren cat = 1, lion, dog = 11, cow, monkey let c: Animals = Animals.cat; console.log (Dieren [3]); // undefined console.log (Animals.monkey); // 13
In tegenstelling tot het vorige voorbeeld is de waarde van Dieren [3] is onbepaald deze keer. Dit komt omdat de waarde 3 zou zijn toegewezen aan hond, maar we hebben de waarde expliciet ingesteld op 11. De waarde voor koe blijft op 12 en niet op 3 omdat de waarde één groter moet zijn dan de waarde van het laatste lid.
Laten we zeggen dat u een programma schrijft waarbij de waarde van een variabele wordt bepaald door de gebruikers of de code die is geschreven in een bibliotheek van derden. In dit geval kunt u het type van die variabele niet correct instellen. De variabele kan van elk type zijn, zoals een tekenreeks, getal of boolean. Dit probleem kan worden opgelost door de ieder type. Dit is ook handig als u arrays met elementen van gemengde typen maakt.
laat a: any = "apple"; laat b: any = 14; laat c: any = false; let d: any [] = ["door", "kitchen", 13, false, null]; b = "mensen";
In de bovenstaande code konden we een nummer toewijzen b en verander dan de waarde ervan in een string zonder een fout te krijgen, omdat het type ieder kan alle soorten waarden accepteren.
De nooit type wordt gebruikt om waarden weer te geven die nooit zouden voorkomen. U kunt bijvoorbeeld toewijzen nooit als het retourtype van een functie die nooit terugkeert. Dit kan gebeuren wanneer een functie altijd een fout genereert of wanneer deze vastzit in een oneindige lus.
laat a: nooit; // Ok laat b: never = false; // Fout laat c: never = null; // Fout laat d: nooit = "maandag"; // Foutfunctie vastgelopen (): nooit while (true)
Deze tutorial heeft u geïntroduceerd bij alle typen die beschikbaar zijn in TypeScript. We hebben geleerd hoe het toewijzen van een ander type waarde aan een variabele fouten in TypeScript laat zien. Met deze controle kunt u veel fouten voorkomen bij het schrijven van grote programma's. We hebben ook geleerd om verschillende versies van JavaScript te targeten.
Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.
In de volgende zelfstudie leert u meer over interfaces in TypeScript. Als je nog vragen hebt over deze tutorial, laat het me dan weten in de comments.
Accentsconagua