Modulelessen (1/2)
Primitieve typen en annotaties
TypeScript is een getypeerde superset van JavaScript, wat betekent dat het een statische syntaxis van het type toevoegt bovenop bestaand JavaScript. Tijdens runtime wordt alle TypeScript-code gecompileerd naar puur JavaScript en verdwijnen de typen volledig tijdens het bouwproces.
Dankzij TypeScript kunt u fouten onderkennen voordat de code in de browser wordt uitgevoerd, waardoor uw ontwikkelingsproces robuuster, veiliger en schaalbaarder wordt.
Primitieve typen
TypeScript ondersteunt de standaard JavaScript-primitieve typen:
string: vertegenwoordigt reeksen tekens (bijvoorbeeld'Alice',"Hello").number: vertegenwoordigt numerieke waarden, zowel gehele getallen als decimalen (bijvoorbeeld42,3.14).boolean: vertegenwoordigt waarheidswaarden (trueoffalse).nullenundefined: vertegenwoordigen de opzettelijke of onopzettelijke afwezigheid van een waarde.
const username: string = 'Alice';
const score: number = 100;
const isActive: boolean = true;Variabele annotaties en gevolgtrekkingen
In TypeScript kunnen we een typeannotatie toevoegen door een dubbele punt (:) te gebruiken, gevolgd door het type.
Als u probeert een waarde van een ander type toe te wijzen (bijvoorbeeld door een tekenreeks toe te wijzen aan age, gedefinieerd als number), zal de TypeScript-compiler onmiddellijk een fout genereren voordat de code zelfs maar wordt uitgevoerd.
Het gevaar van het type any
Het type any is een speciaal ontsnappingsluik dat TypeScript vertelt de typecontrole voor die variabele volledig uit te schakelen.
let data: any = 42;
data = 'Hello'; // No error!
data.nonExistentMethod(); // No error at compile time, but it crashes at runtime!Het gebruik van any doet alle veiligheidsvoordelen van het gebruik van TypeScript teniet. Het wordt als een slechte gewoonte beschouwd en moet bijna altijd worden vermeden in productiecode.
Functieannotaties en het type void
We kunnen zowel de parameters als de retourwaarde van een functie annoteren:
function calculateTax(price: number, taxRate: number): number {
return price * taxRate;
}Als een functie geen enkele waarde retourneert (bijvoorbeeld alleen console.log), is het retourneringstype void:
function logMessage(message: string): void {
console.log(message);
}Probeer het zelf
Oefening 1: Getypte variabelen
Declareer drie expliciet getypte variabelen: gebruikersnaam als string met waarde 'Alice', score als getal met waarde 100, en isActive als boolean met waarde true. Gebruik geen enkel type.
Toon hint
Gebruik de syntaxis : string, : number en : boolean na de naam van elke variabele.
Oplossing beschikbaar na 3 pogingen
Oefening 2: Begroetingsfunctie
Maak een functie met de naam greet die een parameternaam van het type string accepteert en een string retourneert in de notatie 'Hallo', gevolgd door de naam. Geef expliciet zowel het parametertype als het retourtype op.
Toon hint
Declareer de functie als function greet(name: string): string { ... } en retourneer het bericht.
Oplossing beschikbaar na 3 pogingen
Oefening 3: Temperatuuromzetter
Declareer een functie met de naam celsiusToFahrenheit die een parameter Celsius van het type getal accepteert en de equivalente temperatuur in graden Fahrenheit (getal) retourneert. De formule is Celsius * 9/5 + 32. Geef expliciet zowel het parametertype als het retourtype op.
Toon hint
Vermenigvuldig Celsius met 9, deel door 5, tel 32 op en retourneer het resultaat met een getalretourtype voor de functie.
Oplossing beschikbaar na 3 pogingen
Oefening 4: Kortingsberekening
Maak een functie met de naam 'calculDiscount' die een parameterprijs van het type getal en een parameter discountPercent van het type getal accepteert, en de uiteindelijke kortingsprijs als een getal retourneert. Geef expliciet zowel de parametertypen als het retourtype op.
Toon hint
Trek het kortingspercentage gedeeld door 100 af van 1 en vermenigvuldig dit vervolgens met de prijs. Zorg ervoor dat u parameters annoteert en de waarde als getal retourneert.
Oplossing beschikbaar na 3 pogingen