1 van 100

WebOntwikkeling 2024

Introductie

Welkom in de cursus WebOntwikkeling. In deze cursus gaan we ons verdiepen in het ontwikkelen van webapplicaties in TypeScript. TypeScript is een variant van JavaScript die het mogelijk maakt om nog beter gestructureerde code te schrijven. We zullen zien hoe we strong typed variabelen kunnen gebruiken, hoe we interfaces kunnen gebruiken en hoe we asynchroon kunnen programmeren.

Nadat we deze basis onder de knie hebben gaan we ons verdiepen in Express, een webframework voor NodeJS. We zullen zien hoe we een webserver kunnen opzetten, hoe we routes kunnen gebruiken en hoe we middleware kunnen implementeren. We zullen ook zien hoe we een template engine kunnen gebruiken om dynamische webpagina's te maken. We zullen ook zien hoe we data kunnen ophalen uit een externe API en hoe we data kunnen opslaan in een MongoDB database.

In het laatste deel zullen we ons verdiepen in secure coding. We zullen zien hoe we best practices kunnen toepassen in een reële programmeeropdracht. We zullen ook zien hoe we encryptie en hashing kunnen toepassen en hoe we cookies, sessions en tokens kunnen gebruiken. We zullen ook zien hoe we HTTPS en SSL kunnen toepassen.

We verwachten in deze cursus een basiskenis van JavaScript die je kan opdoen in de cursus Web Technologie. We verwachten ook dat je een basis kennis hebt van HTML en CSS.

Leerinhoud

De cursus is opgebouwd uit 4 verschillende delen:

Typescript en NodeJS

Wat is TypeScript
Strongly typed variables
Typed Methodes

Express

Een webserver opzetten in Express.js
Gebruik maken van een template engine (e.js) in Express.js
Routes gebruiken

Data ophalen en opslaan

Geavanceerde web-API's gebruiken
Zelf een MongoDB opzetten
Een MongoDB koppelen aan een eigen webapplicatie

Secure coding

Basiskennis en -principes van secure coding (OWASP):
Encryptie, hashing
Cookies, sessions, tokens

Tooling

NodeJS + TypeScript

Express.js

Wat is een backend framework?

Frontend

De frontend is wat de gebruiker ziet: met HTML, CSS en TypeScript (of JavaScript) zorg je voor een structuur waarin de gebruiker kan navigeren. CSS helpt je met layout en opmaak, en TypeScript zorgt voor interactie. Het proces speelt zich volledig in de browser af. Scripts gebruik je om interactie toe te laten door de gebruiker. Deze interactie kan lokale aanpassingen veroorzaken in de client, bv het veranderen van een kleur van een knop, het sorteren van een lijst etc. Maar scripts kunnen ook communiceren buiten het proces in de browser. Aan de hand van API calls kan de client data ophalen van de backend, of data versturen naar de backend.

Backend

De backend zorgt voor de connectie met databases, het verwerken van data en het beschikbaar stellen van deze data via een API. Dit proces speelt zich op de server af. Client applicaties kunnen deze server applicatie raadplegen om data op te halen of te verwerken.

EJS

Dankzij Express kunnen we nu dynamisch HTML terugsturen naar de client. Bekijk eventjes dit voorbeeld:

import express from "express";

const app = express();

app.set("port", 3000);

app.get("/",(req,res)=>{
    let randomGetal = Math.random()*100;
    res.type("text/html");
    res.send(`Het random getal is ${randomGetal}`);
});

app.listen(app.get("port"), () =>
  console.log("[server] http://localhost:" + app.get("port"))
);

Bezoek http://localhost:3000 en merk op wat er gebeurt.

Bij elke refresh verandert de waarde van het random getal. Kijk naar de source code van deze pagina. Je ziet enkel een getal, geen scripts! Express stuurt een nieuwe inhoud van de pagina bij elke refresh! Laten we het voorbeeld even analyseren:

let randomGetal = Math.random()*100;

Deze lijn geeft een willekeurig getal terug. We gebruiken Math.random dat een random getal geeft tussen 0 en 1 en vermenigvuldigen dat met 100.

res.send(`Het random getal is ${randomGetal}`);

In plaats van een vaste string, geven we nu het randomgetal mee. Elke refresh voert de callback in app.get uit, dus elke refresh zorgt voor een ander getal.

Templates

Volledige web paginas in variabelen steken is niet ideaal. Wanneer je weet dat ook nog CSS en scripts erbij moeten, dan is het duidelijk dat we een andere oplossing nodig hebben. Express laat toe templates te gebruiken.

We kunnen bv een Hello World pagina maken:

Maar wat als we nu een willekeurige boodschap willen tonen?

Templates laten ons toe HTML paginas te schrijven zoals we dat gewoon zijn maar met variabele inhoud. Express ondersteunt verschillende template "engines". Hier gaan we gebruik maken van EJS.

Ejs installeren

Om EJS (Embedded JavaScript templating) te gebruiken installeren we de ejs module:

en we installeren ook de TypeScript types:

We stellen onze express app in om EJS als default view engine te gebruiken:

Net zoals we "port" de waarde 3000 geven, zetten we de property "view engine" op ejs.

Ejs render

EJS bestanden lijken op HTML files maar bevatten wat extras. Laten we starten met een simpel EJS bestand.

Dit bestand bewaren we als index.ejs in de folder /views. Merk op, dit is HTML in een EJS bestand, niets speciaals.

Nu passen we onze applicatie aan om de index.ejs te tonen (renderen: omzetten van EJS naar HTML):

Merk op hoe eenvoudig onze route naar / is geworden:

Ipv res.send gebruiken we res.render. Render verwacht als parameter de naam van een template die zich in de views folder bevindt. Hier tonen we de index file. Ga naar localhost:3000/ om jouw EJS file als HTML te zien.

Je kan nu verschillende EJS files toevoegen. Render ze via verschillende routes en kijk hoe je nu volledige control hebt over routes en de html die getoond wordt.

Dynamische Content

Templates helpen ons de HTML dynamisch te maken. Laten we ons voorbeeld aanpassen zodat we het willekeurig getal weer zien verschijnen. Eerst passen we onze TypeScript aan.

res.render() heeft ook een tweede optionele parameter: een object waar elke property een variabel is die beschikbaar zal zijn in de EJS file.

In dit voorbeeld heeft de tweede parameter maar 1 property: aRandomNumber. We geven dit de waarde van de variabele randomGetal. aRandomNumber zal dus bij elke refresh een willekeurig getal tussen 0 en 100 bevatten.

We kunnen ook meerdere properties meegeven:

Express zal nu index tonen, maar geeft eerst deze lijst van properties mee. Deze properties zijn nu beschikbaar als variabelen in de EJS file!

Laten we de index.ejs file aanpassen:

Wanneer je nu naar localhost:3000 gaat, zal je het random getal in de tekst zien staan.

Variabelen tonen

Om een variabele te tonen die werd meegegeven in de render functie, gebruiken we volgende notatie:

Het is perfect mogelijk om ook properties van een object te tonen:

Als je een array hebt, kan je ook een element tonen:

JavaScript in EJS

EJS laat ons toe JavaScript te gebruiken om meer controle te hebben over de dynamische inhoud van het template. Tussen <% %> kunnen we JavaScript plaatsen:

If statements

Een if statement kan ook toegevoegd worden:

Let hier op dat de if statement en het afsluiten van het } teken tussen <% %> moet staan.

Loops

Er bestaat ook een mogelijkheid om een loop toe te voegen. We hebben al gezien dat we <% %> gebruiken om JavaScript uit te voeren. Stel je voor dat 10 keer "Hallo" getoond moet worden. We kunnen dit doen met een for loop:

Het is belangrijk om te weten dat alle javascript code tussen <% %> moet staan en dus ook de for statement en het afsluiten van het } teken.

Wil je de waarde van i tonen, dan moet je <%= i %> gebruiken.

Voorbeeld lijst

Laten we een voorbeeld bekijken waar we een lijst van mensen tonen. We hebben een array van mensen en we willen de naam van elke persoon tonen.

In de index.ejs file tonen we nu de lijst van mensen:

Voorbeeld tabel

Laten we een voorbeeld bekijken waar we een tabel tonen. We hebben een array van mensen. Deze keer worden deze mensen voorgesteld als objecten. We willen de naam, stad en leeftijd van elke persoon tonen.

In de index.ejs file tonen we nu de tabel van mensen:

Het is ook mogelijk om een if statement toe te voegen. Stel dat we enkel personen willen tonen die ouder zijn dan 30:

Include files

Je kan ook andere EJS files includen in een EJS file. Dit is handig wanneer je bv een header en footer hebt die je in elke pagina wil tonen. Stel je voor dat we de volgende pagina hebben:

In principe wil je op elke pagina dezelfde header en footer tonen. We kunnen de header en footer in aparte EJS files steken en deze includen in de index.ejs file. Deze EJS files bewaren we meestal in een directory genaamd partials in de view directory.

We maken dus een header.ejs file:

En een footer.ejs file:

nu kunnen we in elke EJS file de header en footer includen:

Alle variabelen die doorgegeven worden met de render functie zijn ook beschikbaar in de included files.

Request

Het Request object is een object dat door Express wordt aangemaakt en wordt meegegeven aan de callback functie van een route. Het bevat informatie over de request die de client verstuurd heeft. Je kan het gebruiken om bv. de inhoud van een POST request te lezen, de headers te lezen, de parameters van een route te lezen, etc.

Tot nu toe heb je dit object al gebruikt voor het uitlezen van query en route parameters. Enkele properties van het Request object zijn:

req.body: bevat de inhoud van een POST request
req.headers: bevat de headers van de request
req.params: bevat de parameters van een route
req.query: bevat de query parameters van een request
req.path: bevat het pad van de request
req.method: bevat de HTTP method van de request (GET, POST, PUT, DELETE, etc.)
req.ip: bevat het IP adres van de client

Request Headers

Request headers zijn een belangrijk onderdeel van een HTTP request. Ze bevatten informatie over de request zelf. Ze worden meegestuurd door de client en kunnen door de server gelezen worden. Headers bevatten bv. informatie over de browser die de request verstuurd, de taal van de client, de versie van de HTTP protocol, etc. Een header bestaat uit een naam en een waarde.

Zo kan je bijvoorbeeld aan de hand van de header User-Agent de browser van de client bepalen. De waarde van deze header is bv. Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Headers worden meegestuurd in de request. Je kan ze lezen via het Request object:

Wil je een specifieke header lezen, gebruik dan de property req.headers:

Response

Het Response object is een object dat door Express wordt aangemaakt en wordt meegegeven aan de callback functie van een route. Het bevat methodes om de response van de server te configureren. Je kan bv. de inhoud van de response, de headers, de status code, etc. instellen.

We hebben dit object al gebruikt om bijvoorbeeld de content type van de response te configureren, de status code te wijzigen, response te sturen, etc. We zien hier nog een aantal nuttige methodes.

Redirect

Een redirect is een HTTP response die instructies bevat voor de client om een nieuwe request te sturen naar een andere URL. Een redirect wordt gebruikt om bv. een gebruiker door te sturen naar een andere pagina. De client wordt automatisch doorverwezen naar de nieuwe URL.

Om een redirect te sturen, gebruik je de method res.redirect:

Soms is het interessant om een redirect te sturen naar de vorige pagina. Dit kan je doen met de method res.redirect en de waarde back:

Dit kan je bijvoorbeeld gebruiken om een gebruiker door te sturen na het verzenden van een POST request.

Status Code

De status code van een HTTP response geeft aan of de request geslaagd is of niet. De status code wordt automatisch ingesteld op 200 (OK) wanneer je een response verstuurd. Je kan de status code wijzigen met de method res.status:

Wil je direct een response sturen met een bepaalde status code, gebruik dan de method res.sendStatus:

Hier een tabel met de meest gebruikte status codes:

Status Code

Omschrijving

Wanneer te gebruiken

Het is belangrijk om de juiste status code te gebruiken zodat de client weet of er iets mis is gegaan of niet. En als er iets mis is gegaan, kan de client bv. een foutmelding tonen.

Response headers

Net zoals bij een request, kan je ook bij een response headers instellen. Dit kan je doen met de method res.set:

Als je een response verstuurd, kan je geen headers meer wijzigen. Als je dit toch probeert, krijg je de volgende foutmelding:

Error: Can"t set headers after they are sent.

Bijvoorbeeld:

Dit komt omdat de headers al verstuurd worden door de send functie. Je kan dit oplossen door de headers te configureren voor je de response verstuurd:

Response Type

De response type wordt automatisch ingesteld op text/html wanneer je een response verstuurd. Je kan de response type wijzigen met de method res.type:

Je kan ook de response type instellen op een van de volgende waarden: html, text, json, xml. Als je een van deze waarden gebruikt, wordt de content type automatisch ingesteld op de juiste waarde:

Response Type

Verkorte notatie

Omschrijving

Router

Tot op heden hebben we alle routes gedefinieerd in 1 bestand. Dit is prima voor kleine applicaties, maar als je applicatie groter wordt, kan het al snel onoverzichtelijk worden. Om dit te voorkomen, kan je routes definiëren in aparte bestanden. Dit kan je doen met het express.Router object.

Structuur

Een router is een mini-applicatie die je kan gebruiken om routes te definiëren net zoals je in een normale express applicatie zou doen. Je kan een router gebruiken om routes te definiëren voor een bepaald deel van je applicatie. Dit kan handig zijn om je code te structureren en overzichtelijk te houden.

Over het algemeen worden routes gedefinieerd in een aparte map, bv. routers. In deze map kan je dan een bestand maken voor elke resource die je wilt definiëren. Bijvoorbeeld, als je een blog applicatie hebt, kan je een bestand maken voor de routes van de blogposts, een bestand voor de routes van het gebruikersbeheer, een bestand voor de routes van de comments, etc.

Je bestandsstructuur zal er dan ongeveer zo uitzien:

Die dan overeenkomen met de routes (en eventueel subroutes) die je wilt definiëren.

Aanmaken van een router

Om een router aan te maken, gebruik je de express.Router functie. Deze functie retourneert een router object dat je kan gebruiken om routes te definiëren. We bouwen hieronder bijvoorbeeld een router voor de posts van een blog applicatie. We geven deze router een array van posts mee, zodat we deze kunnen gebruiken in de routes.

We maken een bestand posts.ts aan in de routers map en definiëren daar de routes voor de posts.

In je hoofdbestand kan je dan deze functie importeren en gebruiken om de routes te definiëren.

Alle routes die je definieert in de posts router, zullen dan beginnen met /posts. Dus in het geval van het voorbeeld hierboven:

Middleware

Middleware is een functie die toegang heeft tot de request en response objecten. Middleware kan de request en response objecten aanpassen, of de request doorsturen naar de volgende middleware functie in de stack. Je kan dus bijvoorbeeld een functie schrijven die wordt uitgevoerd voordat de request naar de route wordt gestuurd.

Je hebt al een aantal keer middleware gebruikt. Telkens je de app.use() functie gebruikt, voeg je middleware toe aan de stack. Je hebt bijvoorbeeld de express.static() functie gebruikt om statische bestanden te serveren. Deze functie is een middleware functie.

Eigen middleware functie

Logging voorbeeld

Wil je bijvoorbeeld een functie schrijven die een request logt voor elke request die binnenkomt? Dan kan je de volgende functie schrijven:

Vergeet niet om de next() functie aan te roepen. Anders zal de request niet naar de volgende middleware functie in de stack gaan en zal deze request ook niet naar de route gaan.

Locals voorbeeld

Soms is het handig om bepaalde variabelen beschikbaar te maken in alle views. Je kan deze variabelen toevoegen aan de res.locals object. Deze variabelen zijn dan beschikbaar in alle views. Zo moet je niet elke keer dezelfde variabelen doorgeven aan de render() functie. Je moet deze dan wel toevoegen aan de res.locals object in een middleware functie.

Je kan nu in de index.ejs view de title variabele gebruiken zonder deze mee te geven aan de render functie.

Je zou eventueel ook een user object kunnen toevoegen aan de res.locals object. Zo kan je in alle views de user variabele gebruiken. Je kan deze variabele dan bijvoorbeeld gebruiken om te bepalen of de gebruiker is ingelogd of niet.

Security token voorbeeld

Stel dat je een API hebt waarbij je een security token moet meesturen met elke request. Je kan dan een middleware functie schrijven die de security token controleert. Als de security token niet klopt, dan kan je een error terugsturen. Als de security token wel klopt, dan kan je de request doorsturen naar de volgende middleware functie in de stack. We zullen de authorization header gebruiken om de security token mee te sturen.

Hij zal hier dus eerst de security token controleren. Als de security token niet klopt, dan zal hij een 401 status code terugsturen met de tekst "Unauthorized". Als de security token wel klopt, dan zal hij de request doorsturen naar de volgende middleware functie in de stack. In dit geval is dat de route. Hij zal dus "Hello world" terugsturen. Alle andere routes zullen ook de security token controleren.

Aparte middleware functie

Je kan ook een aparte middleware functie schrijven en deze dan toevoegen aan de stack. Dit is handig als je een complexe middleware functie hebt. Je kan dan de middleware functie in een apart bestand schrijven en deze dan toevoegen aan de stack.

We zullen een apart bestand maken voor de middleware functie. We zullen een bestand maken met de naam verifyAuthToken.ts in de middleware directory. Dit bestand zal er als volgt uitzien:

en dan kunnen we deze middleware functie toevoegen aan de stack:

Voorbeeld EJS Utility Middleware

Een voorbeeld van een middleware functie die utility functies toevoegd aan de res object is de volgende:

en dan kan je deze middleware functie toevoegen aan de stack:

In dit voorbeeld voegen we een aantal utility functies toe aan de res.locals object. Deze functies zijn dan beschikbaar in alle views. Je kan dan bijvoorbeeld de formatDate functie gebruiken om een datum te formatteren. Je kan de formatCurrency functie gebruiken om een bedrag te formatteren als een valuta. Je kan de random functie gebruiken om een willekeurig getal te genereren tussen twee getallen.

Error handling

We hadden al gezien dat we 404 pagina"s kunnen maken aan de hand van de volgende code:

Eigenlijk is dit ook een middleware functie. Deze middleware functie zal worden uitgevoerd als geen enkele route de request afhandelt. Hij zal dan een 404 status code terugsturen met de tekst "Page not found".

Je kan ook een middleware functie schrijven die errors afhandelt. Deze middleware functie moet 4 parameters hebben. De eerste parameter is de error, de tweede parameter is de request, de derde parameter is de response en de vierde parameter is de next functie. Als je een error hebt, dan kan je de next functie aanroepen met de error als parameter. De error zal dan worden afgehandeld door de error handling middleware functie.

We kunnen een nieuw bestand maken met de naam handleError.ts in de middleware directory. Dit bestand zal er als volgt uitzien:

en dan kunnen we deze middleware functie toevoegen aan de stack:

In dit voorbeeld zal de error handling middleware functie de error afhandelen. Omdat dit een onafgehandelde error is, zal de error handling middleware functie worden uitgevoerd. Hij zal dan een 500 status code terugsturen en een error pagina renderen met de error message en de error stack.

De error pagina kan er als volgt uitzien:

Middleware functies per route

Je kan ook middleware functies toevoegen aan een specifieke route. Je kan dan ook een extra middleware functie toevoegen aan de route. Deze middleware functie zal dan eerst worden uitgevoerd voordat de route wordt uitgevoerd.

In het bovenstaande voorbeeld zal de loggingMiddleware functie alleen worden uitgevoerd voor de "/" route. De "/admin" route zal de loggingMiddleware functie niet uitvoeren.

Configureerbare middleware

Je kan ook middleware functies maken die configureerbaar zijn. Je kan dan een functie schrijven die een parameter heeft. Deze functie zal dan op zijn beurt een middleware functie teruggeven. Je kan dan de parameter doorgeven aan de middleware functie.

We zullen een nieuwe middleware functie maken die een parameter heeft. Deze parameter zal de status code zijn. We zullen een bestand maken met de naam errorHandler.ts in de middleware directory. Dit bestand zal er als volgt uitzien:

en dan kunnen we deze middleware functie toevoegen aan de stack:

In dit voorbeeld zal de errorHandler functie een middleware functie teruggeven. Deze middleware functie zal de status code gebruiken die is doorgegeven aan de errorHandler functie. In dit geval is dat de 500 status code.

Voorbeeld Request Limiter

Een voorbeeld van een configureerbare middleware functie is een request limiter. Je kan een middleware functie schrijven die een parameter heeft. Deze parameter zal aangeven hoeveel keer een request mag worden uitgevoerd door een bepaalde gebruiker via een bepaald IP adres. Als de gebruiker te veel requests doet, dan kan je een 429 status code terugsturen.

We zullen een nieuwe middleware functie maken die een parameter heeft. Deze parameter zal het aantal requests zijn dat een gebruiker mag doen. We zullen een bestand maken met de naam requestLimiter.ts in de middleware directory. Dit bestand zal er als volgt uitzien:

en dan kunnen we deze middleware functie toevoegen aan de stack:

Middleware volgorde

De volgorde van de middleware functies is belangrijk. De eerste middleware functie die wordt toegevoegd aan de stack zal als eerste worden uitgevoerd. De laatste middleware functie die wordt toegevoegd aan de stack zal als laatste worden uitgevoerd.

Doe je bv het volgende:

Dan zal er niet meer gelogd worden als er te veel requests zijn. De requestLimiter zal de request al afhandelen en de loggingMiddleware zal niet meer worden uitgevoerd.

Als je het andersom doet dan zal de loggingMiddleware eerst worden uitgevoerd en dan pas de requestLimiter en zal er dus nog gelogd worden als er te veel requests zijn.

Deployment

Momenteel hebben we een werkende Express.js applicatie die we lokaal kunnen draaien. Maar hoe kunnen we deze applicatie nu online zetten zodat iedereen erbij kan? We kunnen deze manueel op een server zetten, maar dit is niet altijd even eenvoudig. Gelukkig zijn er verschillende platformen die ons hierbij kunnen helpen.

Platform as a Service (PaaS)

Een Platform as a Service (PaaS) is een cloud computing service die een platform biedt aan ontwikkelaars om applicaties te bouwen, testen en te deployen. Het grote voordeel van een PaaS is dat je je geen zorgen hoeft te maken over de infrastructuur. Je kan je volledig focussen op het bouwen van je applicatie.

Render

is een PaaS die ons toelaat om onze applicatie eenvoudig online te zetten. Render ondersteunt verschillende programmeertalen en frameworks waaronder Node.js en Express.js. Het heeft github integratie waardoor je eenvoudig je code kan pushen naar je repository en deze automatisch wordt gedeployed.

Hieronder een kort stappenplan om je Express.js applicatie online te zetten op Render:

Maak een account aan op
Vervolgens maak je een nieuwe web service aan
Kies voor Build and deploy from a git repository zodat je rechstreeks kan verbinden met je github repository.

MongoDB

Wat is MongoDB?

Tot nu toe hebben we enkel gewerkt met in-memory data. Dit wil zeggen dat we data in een array steken en deze array in het geheugen houden. Wanneer de server stopt, is deze data weg. Dit is niet handig wanneer we data willen bijhouden die we later willen opvragen. Daarom gaan we nu werken met een database. We zouden kunnen werken met een relationele database zoals MySQL, maar we gaan werken met MongoDB omdat dit beter aansluit bij de manier waarop we data bijhouden in TypeScript (JSON).

Door een database te gebruiken, kunnen we data bijhouden die we later kunnen opvragen. We kunnen data toevoegen, aanpassen, verwijderen en opvragen. Dit noemen we CRUD operaties (Create, Read, Update, Delete).

MongoDB vs Relational DB

MongoDB is een NoSQL database. Hier zijn enkele verschillen tussen een relationele database en een NoSQL database:

Een relationele database:

data verspreid over tabellen
gestructureerde data
structuur moeilijk aan te passen
goed voor ingewikkelde queries

Een NoSQL database:

data wordt bijgehouden als "documents" / JSON
dynamische data
structuur is makkelijk aanpasbaar
goed voor simpele queries

Je kan echter de logica van relationele databases mappen op die van NoSQL:

een record in RDB komt overeen met een MongoDB"s document (JSON object)
een tabel in RDB komt overeen met MongoDB"s collection
_id is unieke identifier (indexed) voor elk document net zoals je een ID met primary key zou toevoegen aan een relationele database tabel

Laten we een eenvoudig voorbeeld nemen van een tabel met persoonsgegevens:

firstName

lastName

In NoSQL stellen we dit als volgt voor:

MongoDB Atlas

Om MongoDB te gebruiken, moeten we uiteraard een MongoDB server hebben. Het is mogelijk om een MongoDB server te installeren op je eigen machine, maar dit is niet altijd handig. Daarom kan je gebruik maken van MongoDB Atlas. Dit is een cloud service die ons toelaat een MongoDB server te gebruiken zonder dat we deze zelf moeten installeren.

Om MongoDB Atlas te gebruiken, kan je een account aanmaken op en hier een database aanmaken. Je kan dan een connectie string genereren die je later kan gebruiken om te connecteren op de database.

Let zeker op dat je voor deze cursus een gratis cluster aanmaakt. Dit is voldoende voor onze doeleinden.

Docker en devcontainers

Wanneer je applicatie in productie draait, maak je uiteraard gebruik van een externe MongoDB-server, zoals MongoDB Atlas.

Tijdens het ontwikkelen is het echter praktischer om een lokale MongoDB-instantie te gebruiken. Dit kun je doen door MongoDB direct op je machine te installeren of door gebruik te maken van Docker.

MongoDB draaien met Docker

Met het onderstaande commando start je een MongoDB-container waarbij de data behouden blijft via een volume:

Let op: dit commando moet je op je eigen machine uitvoeren, niet in de devcontainer.

Verbinding maken vanuit een Dev Container

Als je werkt vanuit een Dev Container en verbinding wilt maken met de MongoDB-server die op je eigen machine (de host) draait, gebruik je de volgende verbindingsstring:

mongodb://host.docker.internal:27017/

Let op: host.docker.internal is een speciale DNS-naam die binnen Docker wordt gebruikt om te verwijzen naar het IP-adres van je lokale machine (de host).

MongoDB for VS Code

Om MongoDB te gebruiken in Visual Studio Code, kan je de MongoDB for VS Code extension installeren. Deze extension laat je toe om MongoDB databases te beheren vanuit VS Code.

Om deze extension te installeren, ga je naar de extensions tab in VS Code en zoek je naar "MongoDB for VS Code". Klik op install om de extension te installeren.

MongoDB driver

Om MongoDB te gebruiken in TypeScript, moeten we de MongoDB driver installeren. Dit is een package die ons toelaat te connecteren op een MongoDB server en database calls uit te voeren.

npm install mongodb

Deze package is volledig in TypeScript geschreven en is dus makkelijk te gebruiken in TypeScript. Je hoeft dus geen extra types te installeren.

connect

import { MongoClient } from "mongodb";

const uri = "mongodb+srv://<username>:<password>@<your-cluster-url>/test?retryWrites=true&w=majority";
const client = new MongoClient(uri);

async function main() {
    try {
        // Connect to the MongoDB cluster
        await client.connect();
 
        // Make the appropriate DB calls
        //...
 
    } catch (e) {
        console.error(e);
    } finally {
        await client.close();
    }
}
doSomeDBCalls();

Eerst importeren we MongoClient van mongodb. Vervolgens maken we een connectie string aan. Deze string bevat de username, password en url van de MongoDB server. Als je MongoDB Atlas gebruikt, kan je deze connectie string vinden in de MongoDB Atlas console. Vervolgens maken we een nieuwe MongoClient aan met deze connectie string.

Vervolgens maken we een async functie aan die de connectie maakt met de MongoDB server. De reden dat we dit in een async functie doen, is omdat de connectie even kan duren. We willen niet dat de rest van de code uitgevoerd wordt vooraleer we verbonden zijn met de database. Bijna alle functies van de MongoDB driver zijn asynchroon en geven een promise terug. Daarom gebruiken we async/await om deze promises af te handelen.

In de try block maken we de connectie met de MongoDB server. In de catch block vangen we eventuele errors op. In de finally block sluiten we de connectie met de MongoDB server. Dit is belangrijk om te doen, anders blijft de connectie openstaan en kan dit problemen veroorzaken

findOne en find

Net zoals we een select kunnen doen op een relationele database, gebruiken we find and findOne om onze objecten terug op te roepen.

findOne geeft ons 1 element terug, nl. het eerste element dat matcht met de query:

Merk op dat we als parameter {} meegeven. Dit komt overeen met een lege "where" clause in relationele database termen. Wanneer we bepaalde velden willen matchen, moeten we een object meegeven. Dit object bevat properties. Deze properties komen overeen met de namen van de properties van het object waar je naar zoekt:

Pokemon objecten hebben de property name. Hierboven zoeken we dus alle Pokemon met "name" gelijk aan "eevee".

Wanneer we meerdere objecten willen ophalen, gebruiken we find:

Als we dit allemaal bij elkaar zetten, krijgen we volgende code:

Insert

insertOne

Voor het toevoegen van 1 element gebruiken we de functie insertOne. Door een object mee te geven als parameter wordt dit object toegevoegd aan de database:

import { MongoClient, ObjectId } from "mongodb";

const uri = "mongodb+srv://<username>:<password>@<your-cluster-url>/test?retryWrites=true&w=majority";
const client = new MongoClient(uri);

interface Pokemon {
    _id?: ObjectId,
    name: string,
    age: number
}

async function main() {
    try {
        // Connect to the MongoDB cluster
        await client.connect();
 
        let pikachu: Pokemon = { name:"pikachu", age:12 };
        const result = await client.db("Les").collection("pokemon").insertOne(pikachu);
        console.log(`New document created with the following id: ${result.insertedId}`);
    } catch (e) {
        console.error(e);
    } finally {
        await client.close();
    }
}
main();

Aan de hand van de db en collection functies kunnen we de database en collectie selecteren waar we willen toevoegen. In dit geval voegen we een Pokemon object toe aan de collectie "pokemon".

Let op: elk object krijgt automatisch een _id wanneer die wordt toegevoegd aan de database. MongoDB kiest hier zelf een uniek id. Om later deze property te kunnen aanspreken, hebben we dit veld voorzien in de interface van Pokemon. We maken die echter optioneel zodat we die zelf geen waarde geven.

insertMany

Wanneer we verschillende elementen willen toevoegen, gebruiken we insertMany. Stel dat we een array van Pokemon objecten hebben:

dan kunnen we deze allemaal tegelijk toevoegen:

MongoDB laat toe verschillende types in 1 collectie toe te voegen. Stel dat we een array van objecten hebben met verschillende properties:

dan kunnen we deze toevoegen in 1 collectie:

Alhoewel dit mogelijk is, is dit niet altijd een goed idee. Het is beter om een duidelijke structuur te hebben in je collecties. Dit maakt het makkelijker om queries uit te voeren. Maar het is wel een van de voordelen van NoSQL databases.

Query Operators

We hebben tot nu toe gezien dat je een object kan meegeven aan de find methode om te filteren. Dit object bevat de velden die je wil filteren en de waarden waarmee je wil filteren. Op dit moment gaven we enkel exacte waarden mee.

const result = await collection.find({ name: "John" }).toArray();

In MongoDB kan je ook gebruik maken van query operators. Dit zijn speciale objecten die je kan meegeven aan de find methode om complexere queries uit te voeren.

Vergelijkingen

We kunnen gebruik maken van de volgende query operators om vergelijkingen uit te voeren:

Operator

Betekenis

Het gebruik ervan ziet er soms een beetje vreemd uit, maar het is eigenlijk heel eenvoudig. Je moet een object meegeven met als key de naam van het veld en als value een object met als key de operator en als value de waarde waarmee je wil vergelijken.

Dit geeft alle documenten terug waarvan het veld age groter is dan 18.

Dit geeft alle documenten terug waarvan het veld age gelijk is aan 18, 19 of 20.

Logische operatoren

Je kan ook gebruik maken van logische operatoren om meerdere voorwaarden te combineren. De volgende logische operatoren zijn beschikbaar:

Operator

Betekenis

Het gebruik ervan is gelijkaardig aan de vergelijkingsoperatoren. Je moet een object meegeven met als key de operator en als value een array van objecten die je wil combineren.

Dit geeft alle documenten terug waarvan het veld age groter is dan 18 of waarvan het veld name gelijk is aan "John".

Dit geeft alle documenten terug waarvan het veld age groter is dan 18 en kleiner dan 25. Dus alle documenten waarvan het veld age tussen 18 en 25 ligt.

Dit geeft alle documenten terug waarvan het veld age niet groter is dan 18. Dus alle documenten waarvan het veld age kleiner of gelijk is aan 18.

Update

In deze sectie gaan we dieper in op het updaten van documenten in een MongoDB database. We gaan er weer vanuit dat we een collection hebben met de naam students.

const collection : Collection<Student> = client.db("school").collection<Student>("students");

Update

Je kan de updateOne methode gebruiken om een document te updaten. Je moet een filter meegeven om het document te selecteren dat je wil updaten en een object met de nieuwe waarden.

const result = await collection.updateOne({ name: "John" }, { $set: { age: 20 } });

Dit zal het eerste document met de naam "John" updaten zodat de leeftijd 20 is. Als je meerdere documenten wil updaten, dan kan je de updateMany methode gebruiken.

Dit zal alle documenten updaten waarvan de leeftijd kleiner is dan 18 zodat de leeftijd 18 is.

Upsert

Soms wil je een document updaten als het bestaat, maar aanmaken als het niet bestaat. Je kan de upsert optie meegeven aan de updateOne methode om dit te doen. Upsert staat voor de combinatie van update en insert.

Dit zal het document met de naam "John" updaten als het bestaat, maar aanmaken als het niet bestaat.

Text Search

Tot nu toe hebben we enkel gezien hoe we exacte waarden kunnen gebruiken om te filteren. MongoDB heeft ook een text search functionaliteit die je kan gebruiken om tekstuele velden te doorzoeken. Dit kan je gebruiken om bijvoorbeeld een zoekfunctionaliteit te maken.

Stel dat we een collectie hebben met de naam books en we willen alle boeken vinden waarvan de titel het woord "MongoDB" bevat.

interface Book {
    _id: ObjectId;
    title: string;
    summary: string;
}

const collection : Collection<Book> = client.db("library").collection<Book>("books");

Deze collection bevat de volgende boeken:

 const books: Book[] = [
    { title: "The Great Gatsby", summary: "A book about a rich guy" },
    { title: "MongoDB for Dummies", summary: "A book about a database" },
    { title: "The Catcher in the Rye", summary: "A book about a kid" },
    { title: "The Da Vinci Code", summary: "A book about a code" },
    { title: "The Hobbit", summary: "A book about a hobbit" },
    { title: "Star Wars: The novel", summary: "A book about a galaxy far far away" },
    { title: "Lief klein konijn", summary: "Een boek over een konijntje" }
]

Reguliere expressies

Je kan reguliere expressies gebruiken om tekstuele velden te doorzoeken. Je kan een reguliere expressie meegeven aan de find methode om te filteren op een bepaald patroon.

Dit geeft alle documenten terug waarvan het veld title het woord "MongoDB" bevat.

Als je een case-insensitive zoekopdracht wil uitvoeren, dan kan je de i vlag toevoegen aan de reguliere expressie.

Dit geeft alle documenten terug waarvan het veld title het woord "MongoDB" bevat, ongeacht de case.

Wil je nu zoeken op een bepaalde variabelen, dan kan je de reguliere expressie dynamisch maken.

Text search

Index aanmaken

Je kan ook een text index aanmaken op een veld om te zoeken op tekst. Je kan een text index aanmaken door de createIndex methode aan te roepen met als argument een object met als key het veld dat je wil indexeren en als value "text".

Dit zal een text index aanmaken op het veld title. Je kan nu de $text operator gebruiken om te zoeken op tekst.

Zoeken op een woord

Over het algemeen is het aanmaken van een text index en text search efficiënter dan het gebruik van reguliere expressies.

Zoeken op meerdere woorden

Dit geeft alle documenten terug waarvan het veld title de woorden "MongoDB" en "database" bevat.

Enkelvoud en meervoud

Text search is zelfs zo krachtig dat het het onderscheid kan maken tussen enkelvoud en meervoud.

zal ook het boek "MongoDB for Dummies" teruggeven want het bevat het woord "dummy" in het meervoud.

Stopwoorden

Text search houdt ook rekening met stopwoorden. Dit zijn woorden die vaak voorkomen en geen betekenis hebben. Deze worden genegeerd in de zoekopdracht.

Dit geeft geen resultaten terug omdat "the" een stopwoord is.

Zoeken op meerdere velden

Als je wil zoeken op meerdere velden, dan kan je een text index aanmaken op meerdere velden.

De kans bestaat dat je een foutmelding krijgt omdat er al een index bestaat op het title veld. Je kan dit oplossen door eerst de index te verwijderen.

Dit zal alle indexen verwijderen.

Je kan nu zoeken op meerdere velden.

Dit geeft alle documenten terug waarvan het veld title of summary het woord "database" bevat.

Language optie

Je kan ook de $language optie meegeven aan de $text operator om de taal van de tekst te specificeren.

Dit geeft alle documenten terug waarvan het veld title of summary het woord "konijnen" bevat in het Nederlands. En ja, het boek "Lief klein konijn" zal teruggegeven worden.

Wil je volledig taal onafhankelijk zoeken dan moet je de index aanmaken met de default_language optie en deze op none zetten.

Dit is ook handig als je meerdere talen in je collectie hebt en je geen rekening wil houden met stopwoorden en dergelijke.

Security & Testing

Labos

Session Based Login

In dit onderdeel gaan we een volledig werkend login systeem maken. We gaan gebruik maken van sessies om de gebruiker ingelogd te houden.

Nieuwe express app

We beginnen deze keer met een volledig nieuwe express app met de volgende code:

import express, { Express } from "express";
import dotenv from "dotenv";
import path, { format } from "path";

dotenv.config();

const app : Express = express();

app.set("view engine", "ejs");
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, "public")));
app.set('views', path.join(__dirname, "views"));

app.set("port", process.env.PORT || 3000);

app.get("/", async(req, res) => {
    res.render("index");
});

app.listen(app.get("port"), () => {
    console.log("Server started on http://localhost:" + app.get('port'));
});

Voor deze applicatie hebben we een aantal extra packages nodig. Voer het volgende commando uit in de terminal:

npm install express dotenv ejs

Zorg er ook voor dat je een views en public map hebt in de root van je project. In de views map zullen we onze ejs bestanden plaatsen en in de public map zullen we onze css en javascript bestanden plaatsen.

User collection

We gaan mongodb gebruiken om onze gebruikers op te slaan. We gaan dus gebruik maken van de mongodb package. Voer het volgende commando uit in de terminal:

Het eerste wat we gaan doen is het aanmaken van een interface voor onze gebruikers. Maak een nieuwe file aan in de root van je project en noem deze types.ts. Voeg de volgende code toe aan deze file:

We maken hier dus een interface aan voor onze gebruikers. We hebben een email, een wachtwoord en een rol. De rol kan ADMIN of USER zijn. Een ADMIN kan bijvoorbeeld extra functionaliteiten hebben die een USER niet heeft.

We gaan nu een database aanmaken waarin we onze gebruikers gaan opslaan.

Maak een nieuwe file aan in de root van je project en noem deze database.ts. Voeg de volgende code toe aan deze file:

Dis is een simpel bestand dat de connectie met de database opzet. We hebben een connect functie die de connectie opzet en een exit functie die de connectie sluit wanneer we de applicatie stoppen. Zorg voor een .env bestand in de root van je project met de volgende variabele:

en we zorgen dat we de connectie opzetten in onze index.ts file:

Merk op dat we hier kiezen voor process.exit(1) zodat de applicatie stopt wanneer er een error is. Onze applicatie kan niet zonder database connectie dus we willen niet dat de server blijft draaien wanneer er een error is.

Toevoegen van de eerste gebruiker

Omdat we nog geen registratie pagina hebben kan je best altijd een eerste gebruiker toevoegen aan de database. We willen deze niet hardcoden in onze code dus we willen deze gebruiker toevoegen via twee environment variabelen. Voeg de volgende variabelen toe aan je .env bestand:

Merk op dat dit password nog niet gehashed is. We gaan bcrypt gebruiken om onze wachtwoorden te hashen. Voer het volgende commando uit in de terminal:

We gaan nu onze eerste gebruiker toevoegen aan de database. Voeg de volgende code toe aan je database.ts file:

en roep deze functie aan in je connect functie:

We kiezen hiervoor om de gebruiker enkel toe te voegen wanneer er nog geen gebruikers in de database zitten. Zo kan je altijd een nieuwe gebruiker toevoegen door de database te legen. Ook gebruiken we een saltRounds van 10 om ons paswoord te hashen. Vergeet deze niet te definieren bovenaan je database.ts file:

We gaan nu een login functie maken in de database.ts file. Voeg de volgende code toe aan deze file:

Deze functie zoekt een gebruiker in de database met de gegeven email. Als de gebruiker gevonden is wordt het wachtwoord gecontroleerd met de gegeven wachtwoord. Als het wachtwoord correct is wordt de gebruiker gereturned. Als de gebruiker niet gevonden is of het wachtwoord incorrect is wordt een error gegooid. We gebruiken de bcrypt.compare functie om het wachtwoord te controleren.

Nu is alles langs de database kant klaar. We gaan nu een login pagina maken. Maak een nieuwe file aan in de views map en noem deze login.ejs. Voeg de volgende code toe aan deze file:

We hebben hier een simpel formulier met een email en een wachtwoord veld. We gaan nu een route maken in onze index.ts file om deze pagina te tonen. Voeg de volgende code toe aan deze file:

Session middleware

We gaan nu sessies gebruiken om de gebruiker ingelogd te houden. We gaan dus eerst de express-session package installeren. Voer het volgende commando uit in de terminal:

We zullen de sessie data bijhouden in een mongodb database. We gaan dus ook de connect-mongo package installeren. Voer het volgende commando uit in de terminal:

We gaan nu een nieuwe file aanmaken in de root van je project en noem deze session.ts. Voeg de volgende code toe aan deze file:

In onze session data gaan we een User object bijhouden. We hebben een user property in onze SessionData interface. We hebben ook een cookie die 1 week geldig is. We gaan nu deze middleware toevoegen aan onze app. Voeg de volgende code toe aan je index.ts file:

We gaan nu een POST route maken om de gebruiker in te loggen. Voeg de volgende code toe aan je index.ts file:

We gaan de gebruiker inloggen en de gebruiker in de sessie data zetten. We verwijderen het wachtwoord van de gebruiker voor we deze in de sessie data zetten. Dit is een extra beveiliging zodat het gehashte wachtwoord niet in de sessie data zit of nooit tot bij de client geraakt. We gaan de gebruiker doorsturen naar de home pagina als de login gelukt is en anders terug naar de login pagina.

Home pagina

Nu is het tijd om een home pagina te maken met bijbehorende routes. Maak een nieuwe file aan in de views map en noem deze home.ejs. Voeg de volgende code toe aan deze file:

en voeg de volgende code toe aan je index.ts file:

Op dit moment zal je applicatie crashen als je naar de home pagina gaat en je nog niet ingelogd bent. We zouden dus best een check toevoegen om te kijken of de gebruiker ingelogd is. Voeg de volgende code toe aan je index.ts file:

Secure Middleware

Het probleem bij onze aanpak hierboven is dat we voor elke route gaan moeten controleren of de gebruiker ingelogd is. Dit is veel werk en kan foutgevoelig zijn. We gaan dus een middleware maken die controleert of de gebruiker ingelogd is. Maak een nieuwe file aan en noem deze secureMiddleware.ts. Voeg de volgende code toe aan deze file:

Deze middleware controleert of de gebruiker ingelogd is. Als de gebruiker ingelogd is wordt de gebruiker toegevoegd aan de res.locals zodat deze beschikbaar is in de views. Als de gebruiker niet ingelogd is wordt de gebruiker doorgestuurd naar de login pagina.

Nu moeten we deze middleware toevoegen aan onze app. We gaan deze niet toevoegen aan elke route maar aan de routes die beveiligd moeten worden. We gaan deze middleware toevoegen aan de home route. Voeg de volgende code toe aan je index.ts file:

Let op dat je deze niet aan de login route toevoegt. Anders kan je nooit inloggen.

Logout

Voor de volledigheid gaan we ook een logout functie toevoegen. Voeg de volgende code toe aan je index.ts file:

en voegen we een logout knop toe aan onze home pagina:

Routers

Het is ook best om onze routes in aparte files te zetten. We gaan een routes map maken in de root van je project. In deze map maken we een loginRouter en een homeRouter. De reden hiervoor is dat we op deze manier de volledige homeRouter kunnen beveiligen met de secureMiddleware. Maak een nieuwe file aan in de routes map en noem deze loginRouter.ts. Voeg de volgende code toe aan deze file:

en maak een nieuwe file aan in de routes map en noem deze homeRouter.ts. Voeg de volgende code toe aan deze file:

We gaan nu deze routers toevoegen aan onze app. Voeg de volgende code toe aan je index.ts file:

Flash Messages

We maken vaak gebruik van try catch blokken om errors op te vangen bij het inloggen en gebruiken vervolgens een redirect om de gebruiker terug te sturen naar de login pagina. Dit is niet ideaal. We zouden beter een error message tonen op de login pagina. We kunnen jammer genoeg geen error message meegeven met een redirect. Dus we hebben hier voor een andere oplossing nodig. Het is mogelijk om een error message mee te geven in de sessie. Eerst voorzien we een interface voor een FlashMessage in onze types.ts file:

Voeg een nieuwe property toe aan je SessionData interface in je session.ts file:

Een flash message is een bericht dat we maar 1 keer willen tonen, en dan verwijderen. We gaan nu een middleware maken die deze flash messages toevoegt aan de res.locals. Maak een nieuwe file aan en noem deze flashMiddleware.ts. Voeg de volgende code toe aan deze file:

Hier gaan we dus kijken of er een message in de sessie zit. Als deze er is voegen we deze toe aan de res.locals en verwijderen we deze uit de sessie. We gaan deze middleware toevoegen aan onze app. Voeg de volgende code toe aan je index.ts file:

Nu kunnen we heel gemakkelijk een error message toevoegen aan de sessie en deze tonen op de login pagina. Zo kunnen we de gebruiker laten weten wat er mis is gegaan. We kunnen de volgende code in de catch blok van onze login route toevoegen:

Maar ook de volgende code bij een succesvolle login:

Nu kunnen we de volgende code in onze login.ejs file toevoegen (of in een aparte partials file als je dit wil hergebruiken):

Het is mogelijk om met css animaties te werken om de messages te laten verdwijnen na een bepaalde tijd. Dit is echter niet de focus van deze cursus. Het is wel aan te raden om dit te doen in een echte applicatie.

Er bestaan ook packages op npm die voor jou de flash messages afhandelen. Je kan deze gebruiken als je dit wil. Maar het is ook goed om te weten hoe je dit zelf kan doen.

Basic types

Tot nu toe hebben we nog niet concreet gezien wat het grote verschil is tussen TypeScript en JavaScript. Zoals de naam zegt is de belangrijkste toevoeging van TypeScript is het toevoegen van types. Dit is een concept dat we kennen uit andere talen zoals C# en Java. Types zorgen ervoor dat je variabelen kan declareren met een bepaald type. Dit zorgt ervoor dat je code minder foutgevoelig is en dat je code leesbaarder is voor een programmeurs. Zeker als je functies gaat gebruiken van anderen is het belangrijk dat je weet welke types je moet meegeven en welke types je terugkrijgt. Dit is niet altijd even duidelijk in JavaScript. In TypeScript is dit wel duidelijk.

We gaan verder in dit onderdeel kijken welke types er allemaal zijn in TypeScript maar we gaan beginnen met een klein voorbeeldje van waarom types handig kunnen zijn. Stel dat je de volgende variabele tegenkomt in een stuk code:

let id = 1;

Het is hier overduidelijk dat de id een getal is. Maar stel je voor dat ergens anders in je code deze variabele wordt aangepast:

id = "123e4567-e89b-12d3-a456-426614174000";

en dat we ook een functie hebben die deze id gebruikt en eventueel verhoogt met 1:

function increaseId(id) {
    return id + 1;
}

Dit is een soort fout die je makkelijk kan maken en die je niet snel zal opmerken. JavaScript zal dit gewoon uitvoeren en geen foutmelding geven maar dit kan wel voor problemen zorgen. In TypeScript zou dit niet mogelijk zijn. We zouden een foutmelding krijgen bij het toekennen van de string aan de variabele id en ook bij het aanroepen van de functie increaseId. Dit is een van de vele voordelen van TypeScript. Ze noemen dit in de programmeerwereld: strongly typed. Eenmaal je een variabele een type heeft gekregen dan kan dit type nooit meer veranderd worden. De waarde mag wel veranderd worden als het type hetzelfde blijft.

We gaan nu in detail een aantal basis types bekijken in TypeScript en de werking ervan bespreken.

number

In TypeScript is er geen verschil tussen gehele getallen (integers) en floating point getallen zoals in andere programmeertalen (bv C#). Dus alle getallen of er nu getallen na de komma staan of niet worden uitgedrukt met het number data type.

Je kan in TypeScript een number variabele declareren als volgt:

Je kan allerhande operaties uitvoeren op getallen, zoals vermenigvuldiging (*), delen (/), optellen (+), aftrekken (-), en nog veel meer

Naast de gewone getallen die jullie allemaal al kennen heb je ook "speciale numerieke waarden" die tot dit data type behoren: Infinity, -Infinity en NaN

Infinity stelt het wiskundige ∞ symbool voor. Het is een speciale waarde die groter is dan alle mogelijke waarden. Als je iets van wiskunde kent dan weet je dat als je deelt door 0 dat je dan eigenlijk het getal oneindig krijgt. Dit is ook zo in TypeScript
Deze value zal je waarschijnlijk niet vaak tegenkomen, maar het is een indicatie dat je per ongeluk waarschijnlijk door 0 hebt gedeeld
NaN stelt voor dat de waarde het gevolg is van een rekenfout. Bijvoorbeeld als je een stuk tekst probeert te delen door getal
Dus NaN

De reden waarvoor dat ze gekozen hebben om deze getallen uit te drukken is vrij eenvoudig. De ontwerpers van JavaScript wilden niet dat de programma's crashen als je een wiskundige fout maakt zoals bij andere programmeertalen.

string

Een string in TypeScript moet omringd zijn met quotes.

In TypeScript zijn er drie types van quotes

Double quotes: "Hello".
Single quotes: 'Hello'.
Backticks: `Hello`.

Double en single quotes zijn "eenvoudige" quotes. Er is geen verschil tussen de twee in TypeScript. Je mag dus kiezen om single of double quotes te gebruiken. Zorg er wel voor dat je deze keuze wel over heel je project hetzelfde houdt.

De derde soort quotes is een speciaal soort. Ze laten ons toe om variabelen en expressies in strings te plaatsen door ze te omringen door ${...}

Alles wat tussen de ${...} staat wordt geëvalueerd en het resultaat wordt deel van de string.

Je kan eender welke variabele omzetten van een ander datatype omzetten naar een string aan de hand van de toString() methode.

boolean

Het boolean type heeft maar twee verschillende waarden: true en false

Het type wordt vaak gebruikt om ja/nee waarden in op te slagen. true betekent ja of waar. En false betekent nee of niet waar.

De bovenstaande code zou een variabele kunnen voorstellen die aangeeft of het licht aan is of niet.

Boolean waarden kunnen ook afkomstig zijn uit het resultaat van vergelijkingen:

Vergelijkingen of comparisons zien we later in detail in een verder hoofdstuk.

Type inference

TypeScript is een taal die gebruik maakt van type inference. Dit wil zeggen dat TypeScript zelf zal proberen te achterhalen welk type een variabele heeft. Dit is een van de grote voordelen van TypeScript. Je moet dus niet altijd expliciet het type van een variabele aangeven. Dit is een van de grote verschillen met andere talen zoals C# en Java.

Het is wel een goed idee om altijd het type van een variabele te declareren. Dit zorgt ervoor dat je code leesbaarder is en dat je minder fouten zal maken.

null

De speciale null waarde hoort niet thuis in een van de types die hierboven zijn beschreven.

Het vormt een apart type dat alleen de null value bevat.

Het is een speciale waarde die "niets" of "leeg" voorstelt. De code hierboven zegt gewoon dat de gebruiker bijvoorbeeld geen collegeDegree heeft. Dus bijvoorbeeld zit deze gebruiker nog in het middelbaar en heeft dus geen diploma.

undefined

Net zoals null is undefined een waarde die op zichzelf staat met zijn eigen type. De betekenis is zeer gelijkaardig maar toch iets anders. Het zegt dat de waarde nog niet is toegekend.

We hebben hier boven dus nog geen waarde toegekend aan de variabele message

any

Het any type is een speciaal type in TypeScript. Het is een type dat je kan gebruiken als je niet weet welk type een variabele zal hebben. Het is een type dat je best zo weinig mogelijk gebruikt. Het is een type dat je kan gebruiken als je nog niet weet welk type een variabele zal hebben. Het wordt vaak gebruikt als je een externe library gebruikt die je niet zelf hebt geschreven. Je weet dan niet welke types er allemaal gebruikt worden in die library. Je kan dan het any type gebruiken om aan te geven dat je niet weet welk type de variabele zal hebben.

Je ziet dat we de variabele notSure eerst een getal geven, dan een string en dan een boolean. Dit is allemaal mogelijk omdat we het any type gebruiken. Je verliest hier wel de voordelen van TypeScript. Je kan dus best zo weinig mogelijk het any type gebruiken.

Unknown

In TypeScript is unknown een type dat aangeeft dat we een variabele hebben waarvan het type niet bekend is op het moment van declaratie. Het is vergelijkbaar met het any type, maar met meer typeveiligheid. Waar any je toestaat om willekeurige bewerkingen op de variabele uit te voeren zonder controle, dwingt unknown je om het type expliciet te controleren of te specificeren voordat je er bewerkingen op uitvoert.

Union types

Een union type is een type dat bestaat uit meerdere types. Je kan een union type gebruiken als je een variabele wil declareren die meerdere types kan bevatten. Je kan een union type declareren door de types te scheiden met een | teken. Als je wil toelaten dat een variabele een string of een getal kan bevatten dan kan je dit doen door het volgende te schrijven:

Dit wordt vaak gebruikt in combinatie met het undefined type. Je kan dan een variabele declareren die een bepaald type of undefined kan bevatten. Dit kan handig zijn als je een variabele wil declareren en deze nog niet meteen een waarde wil geven. Je kan dan het undefined type gebruiken om aan te geven dat de variabele nog niet is toegewezen.

String union

Een string union is een speciaal type in TypeScript. Het is een type dat een aantal vaste waarden kan bevatten. Je kan een string union gebruiken als je een variabele wil declareren die een van een aantal vaste waarden kan bevatten. Je kan een string union declareren door de waarden te scheiden met een | teken.

Als je wil toelaten dat een variabele enkel de waarden "ON", "DIMMED" en "OFF" kan bevatten dan kan je dit doen door het volgende te schrijven:

Je kan ook dit soort types apart declareren als een type. Dit is handig als je deze types op meerdere plaatsen in je code wil gebruiken.

Je moet er wel rekening mee houden als je user input gaat gebruiken dat je deze waarden eerst controleert. Je kan dit doen door een if statement te gebruiken.

Als je bijvoorbeeld

doet zal je een error krijgen:

Je moet dus eerst controleren of de waarde die je hebt ingelezen wel een van de waarden is die je hebt gedefinieerd.

Functions

Functies met function keyword

Functies in TypeScript worden gedeclareerd met de function keyword. De parameters van een functie worden gedeclareerd met hun naam en type. De return type van een functie wordt gedeclareerd na de parameters.

function add(a: number, b: number): number {
    return a + b;
}

Dit is een functie die twee getallen optelt. De functie verwacht twee parameters van het type number en geeft een number terug.

Als je een functie hebt die geen return type heeft, dan kan je void gebruiken. void betekent dat de functie niets teruggeeft.

Je kan ook de void keyword weglaten. Dit is hetzelfde als void.

Let er op dat je de types van de parameters altijd moet declareren. Als je dit niet doet, dan zal TypeScript een foutmelding geven.

Optionele parameters

Stel dat we een multiply functie willen aanpassen dat ze ook toestaat om maar 1 argument mee te geven. Als we gewoon de 2de argument zouden weglaten krijgen we een foutmelding. Logisch ook want hij kan helemaal geen vermenigvuldiging doen met 1 getal.

Willen we dit toch toestaan dan kunnen we de 2de parameter optioneel maken. Dit doen we door een ? te plaatsen na de naam van de parameter.

Uiteraard krijgen we nu een foutmelding. Dit komt omdat we de parameter b niet altijd meegeven. Als we de functie aanroepen met 1 argument dan zal b undefined zijn. We kunnen dit oplossen door een check te doen of b undefined is.

Default parameters

Je kan ook een default waarde meegeven aan een parameter. Dit doe je door de waarde na de declaratie van de parameter te plaatsen.

Nu geeft de functie 5 terug als je maar 1 argument meegeeft. Dit komt omdat b nu een default waarde heeft van 1.

Rest parameters

Soms wil je een functie schrijven die een onbepaald aantal parameters kan aannemen. Dit kan je doen door een rest parameter te gebruiken. Dit is een parameter die je voorafgaat met .... Je kan de rest parameter een naam geven. Dit is de naam van de array waarin alle parameters worden opgeslagen.

Arrow functions

Je hebt naast de function keyword ook nog arrow functions. Dit zijn functies die je kan declareren met de pijl operator =>. Je kan een arrow function gebruiken als je een functie wil declareren die je als parameter wil meegeven aan een andere functie (een callback functie). Dit is een veel voorkomend patroon in JavaScript en TypeScript.

Stel dat je de volgende functie hebt:

kan je die ook schrijven als een arrow function:

Merk op dat als we de functie willen kunnen aanroepen zoals hierboven, we de functie moeten declareren als een variabele. Op die manier kunnen we de functie aanroepen door de variabele aan te roepen met de nodige parameters.

De concepten van optionele parameters, default parameters en rest parameters zijn ook van toepassing op arrow functions.

Callback functies

Zoals we hierboven al vermeld hebben worden arrow functions vaak gebruikt als callback functies. Dit zijn functies die je als parameter meegeeft aan een andere functie. De functie die je meegeeft wordt dan uitgevoerd op een bepaald moment in de functie waar je de callback functie meegeeft.

Een ideaal voorbeeld hiervan is de forEach functie op een array. Deze functie zal een callback functie uitvoeren voor elk element in de array.

Merk op dat we hier een arrow function meegeven aan de forEach functie. Deze arrow function zal uitgevoerd worden voor elk element in de array. De waarde van het element wordt meegegeven als parameter aan de arrow function. Als we een arrow function meegeven zonder deze een naam te geven, dan noemen we die ook vaak een anonieme functie.

Stel je voor dat we zelf een functie willen schrijven die een array doorloopt en een callback functie uitvoert voor elk element in de array. We kunnen dit doen door een functie te schrijven die een array en een callback functie verwacht.

De functie hierboven heeft twee parameters: array`` en een callbackfunctie. Je kan die op een heel gelijkaardige manier gebruiken zoals de ingebouwdeforEach` functie.

Maar let op! De callback parameter bevat nog altijd het any type. Dit is niet wat we willen. We willen dat de callback functie een number verwacht als parameter. Dit kunnen we doen door de callback parameter te declareren met het juiste type. Hiervoor moeten we een interface maken die de callback functie beschrijft.

We kunnen nu de callback parameter declareren met het type Callback.

Geef je nu een callback functie mee die een parameter verwacht van een ander type dan number, dan zal TypeScript een foutmelding geven.

Hier ook nog een voorbeeld van een callback functie die een return type heeft en meer dan 1 parameter verwacht.

We kunnen nu de calculate functie gebruiken om een berekening uit te voeren met een callback functie. De berekening zelf wordt bepaald door de callback functie.

Als we nu de calculate functie willen uitvoeren maar we willen een vermenigvuldiging doen in plaats van een optelling, dan kunnen we een andere callback functie meegeven.

Verkorte syntax

Wanneer je maar 1 lijn code hebt staan in jouw functie, kan je jouw schrijfwijze verkorten:

Wanneer jouw lijn code maar 1 statement uitvoert, mag je de accolades weglaten:

Wanneer jouw lijn code een return doet, hoef je zelfs return niet meer te vermelden:

Wanneer je maar 1 parameter hebt, kan je zelfs de haakjes rond de parameter weglaten:

De verkorte syntax is vooral handig bij het gebruik van callback functies. Je kan dan de callback functie meegeven zonder de haakjes en accolades. We grijpen terug naar het voorbeeld van de forEach functie.

Array methods

Je hebt al een aantal array methodes gezien zoals forEach en hoe je deze gebruikt met een callback functie. Er zijn nog een aantal andere handige array methodes die je kan gebruiken.

map

De map methode zal een nieuwe array teruggeven waarbij elk element van de originele array is vervangen door het resultaat van de callback functie.

Het type van element is hetzelfde als het type van een element in de array. In dit geval is element van het type number. Je kan dit ook expliciet aangeven.

filter

De filter methode zal een nieuwe array teruggeven waarbij alleen de elementen van de originele array worden behouden waarvoor de callback functie true teruggeeft.

Ook hier kan je het type van element expliciet aangeven.

reduce

De reduce methode zal een enkele waarde teruggeven die het resultaat is van de callback functie. De callback functie verwacht 2 parameters: de accumulator en het huidige element. De accumulator is de waarde die wordt teruggegeven door de vorige uitvoering van de callback functie. Het huidige element is het huidige element van de array.

(visualizatie van bovenstaande code)

Het type dat de callback functie teruggeeft is hetzelfde als het type van de accumulator. In dit geval is dat number. Je kan dit ook expliciet aangeven.

Het type van de accumulator is hetzelfde als het type van de initiele waarde die je meegeeft aan de reduce methode. Als je geen initiele waarde meegeeft, dan zal de accumulator hetzelfde type hebben als het eerste element van de array.

Soms is het zelfs nodig om het type van de accumulator expliciet aan te geven omdat het type niet kan worden afgeleid.

Daarom is het altijd een goed idee om de types van de parameters van de callback functie expliciet aan te geven in een reduce methode.

find

De find methode zal het eerste element van de array teruggeven waarvoor de callback functie true teruggeeft.

Het type van firstEven is number | undefined. Dit komt omdat de find methode undefined zal teruggeven als er geen element is gevonden waarvoor de callback functie true teruggeeft. Zelfs als je zeker weet dat er altijd een element zal zijn dat voldoet aan de voorwaarde, moet je nog steeds undefined in overweging nemen.

Modules

Eigen Modules Maken

Wat zijn modules?

Modules zijn een manier om je code te organiseren in verschillende bestanden. Vaak wil je bepaalde functies beschikbaar maken voor andere bestanden. Dit kan je doen door deze functies in een module te zetten. Je kan dan in andere bestanden deze module importeren en de functies gebruiken.

Eigenlijk heb je al modules gebruikt in vorige delen in de vorm van npm packages. Deze bevatten ook modules die je kan importeren in je eigen code.

Hoe maak je een module?

Stel dat je een functie hebt om de oppervlakte te berekenen van een cirkel, vierkant en rechthoek.

Tot nu toe heb je altijd deze functies in hetzelfde bestand gezet. Maar stel dat je deze functies ook in een ander bestand wil gebruiken. Dan kan je deze functies in een module zetten door gebruik te maken van een export statement.

Zorg er wel voor dat je deze functies in een apart bestand zet met de extensie .ts. In dit geval bijvoorbeeld area.ts.

Hoe importeer je functies uit een module?

Wil je deze functies gebruiken in een ander bestand? Dan moet je deze eerst importeren aan de hand van het volgende commando.

De functies die je wil importeren zet je tussen de accolades. Het gedeelte achter from is het pad naar het bestand waar de module in staat. In dit geval is dat ./area omdat het bestand area.ts in dezelfde map staat als het bestand waar je de functies wil gebruiken. Plaats je de module in een andere map, dan moet je het pad aanpassen. Staat je area.ts bestand in de directory functions dan moet je het volgende commando gebruiken.

nu kan je deze functies gebruiken in je code net zoals je dat zou doen alsof ze in hetzelfde bestand staan.

Default exports

Heel vaak wordt er door een module maar één functie geëxporteerd. In dat geval kan je gebruik maken van een default export. Dit is een export zonder naam.

Je kan deze functie dan importeren zonder tussen de accolades te zetten.

In principe maakt het niet uit welke naam je achter de import zet want er is maar één functie geëxporteerd.

Interfaces exporteren

Tot nu toe hebben we altijd interfaces in hetzelfde bestand gezet als de code die deze interface gebruikt. Maar je kan ook interfaces exporteren uit een module.

We plaatsen deze interfaces vaak in een apart bestand met de naam types.ts. We kunnen deze dan importeren in een ander bestand.

Je kan ook specifiek aangeven dat je een interface wil importeren door gebruik te maken van de import type syntax.

Npm Packages

npm.js

npm.js is de package manager voor JavaScript. Het is de grootste software registry ter wereld. Hier vind je heel veel packages die je kan gebruiken in je projecten. Wil je een bepaalde package zoeken dan kan je dat doen op de . Je vind er ook uitgebreide documentatie over de packages en hoe je deze kan gebruiken.

Npm packages kunnen typisch op drie verschillende manieren geïnstalleerd worden: als dependency, dev dependency, en globaal. Een dependency wordt geïnstalleerd wanneer een pakket nodig is voor de werking van je applicatie in productie; dit zijn bijvoorbeeld bibliotheken die essentieel zijn om de applicatie te laten draaien (bv. leaflet om je interactieve map te tonen). Een dev dependency daarentegen is een pakket dat alleen nodig is tijdens de ontwikkeling, zoals tools voor testen of linting, en wordt niet meegeleverd in productie. Tot slot kunnen pakketten ook globaal geïnstalleerd worden, wat betekent dat ze overal op je systeem beschikbaar zijn, ongeacht welk project je gebruikt. Dit wordt meestal gedaan voor CLI-tools die je buiten een specifiek project wilt gebruiken, zoals TypeScript of ESLint.

package.json

Elk project heeft een package.json bestand. Dit bestand bevat alle informatie over je project. Het bevat ook een lijst van alle packages die je nodig hebt voor je project. Wanneer je een package installeert met npm dan wordt deze package toegevoegd aan dit bestand in de juiste dependency sectie.

Packages installeren in de CLI

package.json

Je kan alle dependencies installeren aan de hand van het volgende commando. Dus je moet niet elke package apart installeren.

node_modules

Wanneer je een package installeert met npm dan wordt deze package geïnstalleerd in een map genaamd node_modules. Deze map bevat alle packages die je nodig hebt voor je project. Je moet deze map niet zelf aanmaken. npm doet dit automatisch voor je.

Omdat alle dependencies opgegeven staan in het package.json bestand en je deze ten allen tijde kan installeren aan de hand van het npm install commando, moet je deze map ook niet toevoegen aan je git repository. Het is een goed idee om deze map toe te voegen aan je .gitignore bestand. Voeg deze map ook nooit toe aan een zip bestand dat je doorstuurt naar iemand anders. Deze persoon kan dan zelf de dependencies installeren aan de hand van het npm install commando.

Wanneer je een package terug zou willen verwijderen uit je node_modules folder kan je dit doen met het volgende commando:

Al de bestanden die je voordien had gedownload bij het installeren van deze package in de node_modules folder zijn nu terug verwijderd. De package is ook verwijderd uit de package.json file.

Importeren van npm packages

Dit is ook de manier hoe je meestal npm packages importeert. Daar maakte het ook nooit uit welke naam je achter de import zette.

Deze functies kon je dan gebruiken door middel van de naam die je achter de import zette gevolgd door een punt.

Voorbeeld: Chalk

We gaan in dit voorbeeld de chalk package gebruiken. Deze package zorgt ervoor dat je tekst in de terminal kan kleuren. We gaan een programma maken dat de naam van de gebruiker in het rood toont.

Het eerste wat we moeten doen is de package installeren.

Opgelet we moeten hier de versie 4 installeren omdat de nieuwste versie niet werkt met ts-node (en oudere versies van node)

Vervolgens bekijken we de documentatie van de package op de . Hier vinden we hoe we de package kunnen gebruiken.

Dit zal de naam Jelle in het rood tonen in de terminal.

Importeren van types

Af en toe kom je in contact met een npm package die geen meegeleverde types hebben. Dit is bijvoorbeeld het geval bij de readline-sync package. In dat geval kan je gebruik maken van de @types (ook gekend als DefinitelyTyped) packages. Deze bevatten de types die bij de npm package horen. Je moet deze dan wel altijd apart installeren.

Een overzicht van alle @types packages die je nodig hebt in deze cursus:

Je kan op de npmjs website heel eenvoudig zien of een bepaalde package TypeScript support heeft:

Bevat deze een tag? Dan kan je deze installeren aan de hand van de bovenstaande commando's
Bevat deze een tag, dan zitten de types al in de npm package en dan hoef je niets te doen.

Bevat deze geen van beide? Dan heb je helemaal geen types en heb je geen voordelen van TypeScript. Je moet dan ook nog een extra aanpassing doen aan je project om deze library toch nog te gebruiken.

Bijvoorbeeld de rainbow-colors-array package bevat geen TypeScript support en geen @types package. Je kan deze dan toch nog gebruiken door in je project een types.d.ts bestand aan te maken met de volgende inhoud.

Dit is ook wat je vscode je aanraad als je over de error hovered als hij de types niet vindt:

Voorbeeld: Lodash

We gaan in dit voorbeeld de lodash package gebruiken. Deze package bevat heel veel handige functies die je kan gebruiken in je projecten. Het is een soort zwitsers zakmes voor JavaScript.

We installeren deze library aan de hand van het volgende commando.

Deze library heeft geen ingebouwde types. We moeten deze dus apart installeren.

Vaak is de documentatie bedoeld voor een ouder module systeem. We moeten dan de documentatie aanpassen naar het nieuwe module systeem.

Dit moeten we aanpassen naar het nieuwe module systeem.

Vervolgens kunnen we de functies gebruiken zoals beschreven in de documentatie.

Bv de reverse functie.

of de round functie.

In die oefeningen zullen we nog een aantal handige functies van lodash bekijken.