Wat is versiebeheer?

Als je nog nooit met versiebeheer gewerkt hebt, kan het moeilijk zijn om je een goed beeld te vormen van hoe alle puzzelstukjes van Git in elkaar passen. Laat ons het dus eerst even hebben over wat Git precies is, voor we het leren gebruiken.

Git is een systeem voor versiebeheer, dat wil zeggen een systeem om oudere versies van je project op een ordelijke manier bij te houden. Als je geen oude versies bijhoudt, riskeer je belangrijke code te verliezen (bv. als je in een nieuwe versie een kritieke bug vindt die er in een oude versie niet was). Je kan klassieke backups maken door regelmatig al je code te zippen, maar voor je het weet, heb je enorm veel schijfruimte verbruikt of weet je niet meer in welk bestand de interessantste aanpassingen gebeurd zijn. Met een goed systeem voor versiebeheer gaat dat soort werk veel efficiënter.

Meestal bestaat dat project dat je met een versiebeheersysteem beheert uit code, maar dat hoeft niet. Je kan er vanalles mee bijhouden, van tekeningen in Illustrator tot recepten. Zelfs data in die je niet kan voorstellen als leesbare tekst is mogelijk, bijvoorbeeld audiobestanden, maar versiebeheersystemen komen het best tot hun recht als de data in een tekstformaat staat.

Je kan git versie beheer volledig lokaal doen, maar in de meeste gevallen zal je een remote repository gebruiken. Dat is een server waar je je code op plaatst, zodat je er vanop verschillende computers aan kan werken. Je kan je code dan ook delen met anderen, zodat zij er aan kunnen werken. Dat is handig als je met meerdere mensen aan een project werkt, maar ook als je je code wil delen met de wereld. Github is een van de bekendste websites waar je zo'n remote repository kan aanmaken.

Installatie git op Windows

Ga naar de officiële Git-website git-scm.com en download de laatste versie van Git voor Windows. Dit bestand is een uitvoerbaar (.exe) bestand.

Volg de instructies van de installatie wizard. De standaardinstellingen zijn prima. Zorg er zeker voor dat je ook Git Bash installeert. Dit is een command line interface (CLI) die je toelaat om git commando's uit te voeren.

Nadat je de installatie hebt voltooid, kan je git bash openen door in het start menu te zoeken naar git bash. Je kan ook rechtsklikken in een map en kiezen voor Git Bash Here. Dit opent een command line interface in de map waarin je rechtsklikte. Dit is handig om git commando's uit te voeren in de juiste map.

Git configureren

Git heeft een aantal instellingen die je kan aanpassen. Je kan dit doen via de command line interface. Open git bash en voer de volgende commando's uit:

git config --global user.name "Jouw Naam"
git config --global user.email "Jouw Email"

Vervang Jouw Naam en Jouw Email door je eigen naam en email adres. Deze gegevens worden gebruikt om je commits te identificeren. Je kan ook nog andere instellingen aanpassen, maar dat is niet nodig voor deze cursus.

Git basis commando's

Git is een command line tool. Dat wil zeggen dat je het gebruikt door commando's in te typen in een command line interface. Het is op dit moment nog niet nodig om alle commando's te kennen. We zien hier enkel de basis commando's die je nodig hebt om te starten met deze cursus.

Let op dat de uitleg hier onder een sterk vereenvoudigde versie is van wat git kan. Git is een heel krachtige tool, maar dat maakt het ook complex. We gaan hier enkel de basis commando's zien die je nodig hebt om te starten met deze cursus. Als je meer wil weten over git, kan je altijd de officiële documentatie raadplegen of volg je de git leerlijn gitbook.

Git add

Stel dat we een bestand README.md hebben aangepast, een bestand dat al in de git repository zit. Aanpassingen worden niet zomaar opgeslagen in git. Je moet ze eerst altijd toevoegen aan de staging area. De staging area in Git is een tussenstap tussen je lokale bestanden en de geschiedenis van je project (de repository). Om een bestand toe te voegen aan de staging area, gebruik je het commando git add. De naam van dit commando is een beetje verwarrend, want je voegt niet echt bestanden toe, maar je voegt ze toe aan de staging area. Dus je doet dit ook voor bestanden die al bestonden en in de repository zitten.

git add README.md

Zorg dan zeker en vast dat je in de juiste map zit. Je kan dit controleren met het commando pwd. Dit commando toont de huidige map waarin je zit.

Maak je een nieuw bestand aan dat je wil toevoegen aan de repository, dan moet je het ook eerst toevoegen aan de staging area. Dit doe je met hetzelfde commando.

git add nieuw_bestand.md

Heb je meerdere bestanden die je wil toevoegen, of meerdere wijzigingen in verschillende bestanden, dan kan je met 1 commando meerdere alle gewijzigde bestanden toevoegen aan de staging area.

git add -A

of

git add .

als je alleen de bestanden in de huidige map wil toevoegen.

Git status

Om te weten welke bestanden je hebt toegevoegd aan de staging area, kan je het commando git status gebruiken. Dit commando toont je de status van je repository. Het toont je welke bestanden je hebt toegevoegd aan de staging area, welke bestanden je hebt aangepast en welke bestanden je nog niet hebt toegevoegd.

git status

Dan krijg je iets zoals dit:

On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        modified:   README.md
        new file:   nieuw_bestand.md

Dit wil zeggen dat je de bestanden README.md en nieuw_bestand.md hebt toegevoegd aan de staging area. Als je nu een commit maakt, dan zullen deze bestanden in de geschiedenis van je project terecht komen.

Git commit

Als je klaar bent met het toevoegen van bestanden aan de staging area, dan kan je de wijzigingen committen. Dit wil zeggen dat je de wijzigingen definitief maakt en toevoegt aan de geschiedenis van je project. Je kan dit doen met het commando git commit. Dit commando heeft een aantal opties, maar de belangrijkste is -m. Hiermee kan je een boodschap meegeven aan je commit. Deze boodschap is verplicht. Het is een korte beschrijving van de wijzigingen die je hebt aangebracht. Het is belangrijk dat deze boodschap duidelijk is, zodat je later nog weet wat je hebt gedaan.

git commit -m "Eerste commit"

Git push

Het is perfect mogelijk om git volledig lokaal te gebruiken, maar het is pas echt krachtig als je het combineert met een remote repository. Een remote repository is een server waar je je code op plaatst, zodat je er vanop verschillende computers aan kan werken. Je kan je code dan ook delen met anderen, zodat zij er aan kunnen werken. Dat is handig als je met meerdere mensen aan een project werkt, maar ook als je je code wil delen met de wereld. Github is een van de bekendste websites waar je zo'n remote repository kan aanmaken. Wij gaan in deze cursus gebruik maken van Github. Normaal gezien omdat we gebruik maken van devcontainers heeft jouw git repository al een remote repository en hoeven we hier niets meer voor te doen.

Om alle commits die je lokaal hebt gemaakt naar de remote repository te sturen, gebruik je het commando git push.

git push

Dit commando stuurt alle commits die je lokaal hebt gemaakt naar de remote repository. Het is belangrijk dat je dit commando uitvoert, anders zullen je commits niet zichtbaar zijn voor anderen en ben je ze kwijt als er iets met je computer gebeurt.

Tijdens het onderdeel van datatypes hebben we heel kort het concept Array laten vallen. In TypeScript is een Array een lijst van waarden. Elke waarde kan aangesproken worden aan de hand van een index.

Gebruik

Net zoals bij andere variabelen moeten we in TypeScript bij het maken van een variabele voor een array een type geven. Dit type kan je op twee verschillende manieren uitdrukken. Het is in TypeScript niet de bedoeling om verschillende types in een array te steken. Als je kiest voor 1 type dan moeten de rest van de elementen van hetzelfde type zijn.

We kiezen bijvoorbeeld een array van getallen (numbers). De declaratie van de variabele zal er als volgt uit zien

let numbers : number[];

We willen meestal ook als begin waarde een lege array meegeven. Er zitten dus op dat moment nog geen waarden in. We kunnen een lege array toekennen aan de variabele op de volgende manier:

let numbers : number[] = [];

Je kan ook op voorhand al een aantal elementen meegeven:

let numbers : number[] = [1,2,3,4,5];

Om een element op te vragen van een array kan je dat doen aan de hand van vierkante haakjes met daarin een getal. Dit getal komt overeen met de positie van het element dat je wil opvragen. Let op: ook in TypeScript begint het eerste element bij 0.

let fruits : string[] = ["Banana","Apple","Orange"];

console.log(fruits[0]); // Banana
console.log(fruits[1]); // Apple
console.log(fruits[2]); // Orange

Vraag je een element voor een index op die niet bestaat dan krijg je undefined

console.log(fruits[3]); // undefined

Als je een element wil vervangen kan je dit op de volgende manier doen:

fruits[2] = "Pear";

Je kan ook elementen toevoegen nadat je de array hebt gedeclareerd:

fruits[3] = "Kiwi";

Soms is het nodig om te weten hoeveel elementen er in de array zitten. Dit kan je met length doen.

let fruits : string[] = ["Banana","Apple","Orange"];

console.log(fruits.length); // 3

Je kan ook de array uitprinten in je console venster. Dit is vooral handig tijdens het debuggen

let fruits : string[] = ["Banana","Apple","Orange"];

console.log(fruits); // [ 'Banana', 'Apple', 'Orange' ]

Ook een loop over een array is zeer gelijkaardig aan JavaScript.

let fruits : string[] = ["Banana","Apple","Orange"];

for (let i : number = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Door type inference is het ook mogelijk het type van i weg te laten. TypeScript zal dit automatisch als een number type beschouwen.

let fruits : string[] = ["Banana","Apple","Orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

In de for...of loop wordt in TypeScript de types van het element automatisch ingevuld. Je moet dus ook het type van fruit weglaten.

let fruits : string[] = ["Banana","Apple","Orange"];

for (let fruit of fruits) {
    console.log(fruit);
}

Multi-dimensionale arrays

Een array kan ook een array bevatten. Dit noemen we een multi-dimensionale array. Je kan dit op de volgende manier doen:

let matrix : number[][] = [
    [1,2,3],
    [4,5,6],
    [7,8,9]
];

Je kan deze array op dezelfde manier gebruiken als een gewone array. Je kan bijvoorbeeld het eerste element van de eerste array opvragen op de volgende manier:

console.log(matrix[0][0]); // 1

Nog een voorbeeld:

let starterPokemon : string[][] = [
    ["Bulbasaur","Charmander","Squirtle"],
    ["Chikorita","Cyndaquil","Totodile"],
    ["Treecko","Torchic","Mudkip"]
];

Als je hier over wil itereren met een for loop kan je dit op de volgende manier doen:

for (let i=0;i<starterPokemon.length;i++) {
    console.log(`Generation ${i+1}:`);
    for (let j=0;j<starterPokemon[i].length;j++) {
        console.log(starterPokemon[i][j])
    }
}

Tuples

Tuples zijn een speciaal soort array waar je een vast aantal elementen kan aan toevoegen waarvan het type van bekend is.

Bijvoorbeeld als je een coordinaat op een kaart zou willen in een array steken weet je dat de x coordinaat op index 0 staat en de y coordinaat op index 1. Dit kan je aan de hand van een tuple op de volgende manier schrijven

const coordinate: [number, number] = [50,3];

je kan deze voor de rest op dezelfde manier als een andere array gebruiken

console.log(coordinate[0]);
console.log(coordinate[1]);

Je kan ook meer dan twee types meegeven in een tuple. Als we bijvoorbeeld ook de stad willen bijhouden die op die coordinaten liggen kan je dit op de volgende manier doen:

let country : [string, number, number] = [
    "Rotterdam", 51.926517, 4.462456
];

Je kan ook arrays maken van tuples. Bijvoorbeeld als we een lijst van landen willen maken

let countries : [string, number, number][] = [
    ["Rotterdam", 51.926517, 4.462456],
    ["Amsterdam", 52.374021, 4.88969],
    ["Utrecht", 52.0908, 5.1214],
    ["Antwerpen", 51.227741, 4.402465],
    ["Brussel", 50.85467, 4.351697],
    ["Gent", 51.05, 3.7167]
];

We kunnen hier ook over loopen met een for...of lus:

for (let country of countries) {
    console.log(`${country[0]} ${country[1]} ${country[2]}`)
}

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.

function areaCircle(r: number): number {
    return Math.PI * r * r;
}

function areaSquare(s: number): number {
    return s * s;
}

function areaRectangle(l: number, w: number): number {
    return l * w;
}

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.

export function areaCircle(r: number): number {
    return Math.PI * r * r;
}

export function areaSquare(s: number): number {
    return s * s;
}

export function areaRectangle(l: number, w: number): number {
    return l * w;
}

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.

import { areaCircle, areaSquare, areaRectangle } from './area';

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.

import { areaCircle, areaSquare, areaRectangle } from './functions/area';

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

console.log(areaCircle(2));
console.log(areaSquare(2));

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.

export default function(r: number): number {
    return Math.PI * r * r;
}

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

import areaCircle from './area';

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

import area from './area';

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.

export interface Person {
    name: string;
    age: number;
}

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

import { Person } from './types';

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 npmjs website. 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

# Install als Dependency 
# Packages die essentieel zijn voor de uitvoering van je applicatie in productie
npm install readline-sync

# Install als DevDependency
# Packages die je nodig hebt voor de ontwikkeling van je project
npm install @types/readline-sync --save-dev

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Project description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Andie Similon",
  "license": "ISC",
  "dependencies": {
    "readline-sync": "^1.4.10"
  },
  "devDependencies": {
	  "@types/readline-sync": "^1.4.8"
  }
}

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

npm install

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:

npm uninstall <package-name>

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.

import readline from 'readline-sync';

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

const name = readline.question('Wat is je naam? ');

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.

npm install chalk@4

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 npmjs website. Hier vinden we hoe we de package kunnen gebruiken.

import chalk from 'chalk';

const name = 'Jelle';

console.log(chalk.red(name));

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

Importeren van types

http://definitelytyped.github.io/

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.

npm install --save-dev @types/readline-sync

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

npm install --save-dev @types/node
npm install --save-dev @types/readline-sync
npm install --save-dev @types/express
npm install --save-dev @types/ejs
...

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

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.

declare module 'rainbow-colors-array';

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.

npm install lodash

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

npm install --save-dev @types/lodash

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

var _ = require('lodash');

Dit moeten we aanpassen naar het nieuwe module systeem.

import _ from 'lodash';

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

Bv de reverse functie.

const array = [1, 2, 3];

console.log(_.reverse(array));

of de round functie.

console.log(_.round(4.006, 2));

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

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.

let thing = "My Message";
thing = "Another Message!"; // OK!
thing = 0; // Niet OK!

of

let thing = 0;
thing = 5; // OK!
thing = "My Message"; // Niet OK!

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:

let a : number = 0;

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

  Copy

  console.log(1/0); // Infinity

  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

  Copy

  console.log( "not a number" / 2 );

  Dus NaN zal je vaak tegen komen als je iets verkeerd gedaan hebt in je berekening. Je komt NaN ook vaak tegen tijdens het converteren van een datatype naar een ander. Hoe we dit doen zien we later in detail, maar hier heb je al een voorproefje:

  Copy

  console.log(parseInt("1")) // 1
  console.log(parseInt("getal")); // 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.

let str : string = "Hello";
let str2 : string = 'Single quotes are ok too';
let phrase : string = `can embed another ${str}`;

In TypeScript zijn er drie types van quotes

1. Double quotes: "Hello".

2. Single quotes: 'Hello'.

3. 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 ${...}

let name : string = "Andie";

// met een variable
console.log( `Hello, ${name}!` ); // Hello, Andie!

// met een expression
console.log( `the result is ${1 + 2}` ); // the result is 3

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.

let number : number = 4;

let str : string = number.toString();

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.

let isLightOn : boolean = true;

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:

let isGroterDan : boolean = 4 > 1;
console.log(isGroterDan) // true

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.

let a = 0; // a is van het type number
let b = "Hello"; // b is van het type string\

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.

let collegeDegree = null;

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.

let message;

console.log(message); // undefined

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.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

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.

let value: unknown;

value = 10;        // geldig
value = "Hello";   // geldig
value = true;      // geldig

let num: number;
num = value; // Error: Type 'unknown' is not assignable to type 'number'

// Je moet het type eerst controleren of omzetten:
if (typeof value === "number") {
  num = value; // Dit is nu geldig omdat we het type hebben gecontroleerd
}

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:

let id : number | string = 1;
id = "123e4567-e89b-12d3-a456-426614174000";

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.

let id : number | undefined = undefined;

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:

let lightStatus : "ON" | "DIMMED" | "OFF" = "ON";

lightStatus = "DIMMED"; // OK
lightStatus = "OFF"; // OK
lightStatus = "ON"; // OK
lightStatus = "BROKEN"; // FOUT

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.

type LightStatus = "ON" | "DIMMED" | "OFF";

let lightStatus : LightStatus = "ON";

lightStatus = "DIMMED"; // OK
...

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

let lightStatusStr : LightStatus = readline.question("status");

doet zal je een error krijgen:

Type 'string' is not assignable to type 'LightStatus'.

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

let lightStatusStr : string = readline.question("status");
if (lightStatusStr === "ON" || lightStatusStr === "DIMMED" || lightStatusStr === "OFF") {
    let lightStatus : LightStatus = lightStatusStr;
} else {
    console.log("Invalid status");
}

Throw

Soms kan het gebeuren dat er een fout optreedt tijdens het uitvoeren van je programma. Dit kan bijvoorbeeld gebeuren als je een bestand wil openen dat niet bestaat. In dit geval zal je programma crashen of vreemd gedrag beginnen vertonen. Bijvoorbeeld als je een functie wil schrijven voor het delen van twee getallen. Als je de functie aanroept met een deler die gelijk is aan 0, dan zal de functie een foutmelding moeten geven.

function divide(a: number, b: number): number {
    return a / b;
}

console.log(divide(5, 0)); // Output: Infinity

In dit geval krijg je geen foutmelding maar een vreemd resultaat, je krijgt Infinity als resultaat. Dit is niet wat we willen. We willen dat de functie een foutmelding geeft als de deler gelijk is aan 0. Dit kunnen we doen aan de hand van een if statement en de throw statement.

function divide(a: number, b: number): number {
    if (b == 0) {
        throw new Error("Division by zero is not allowed");
    }
    return a / b;
}

console.log(divide(5, 0)); // Error: Division by zero is not allowed

Let nu wel op dat je de functie niet meer kan gebruiken zoals hieronder. Als je de functie aanroept met een deler die gelijk is aan 0 dan zal de functie een foutmelding geven en zal je programma stoppen met uitvoeren (en dus "crashen").

Try catch

Willen we nu deze foutmelding opvangen en zelf een foutmelding geven aan de gebruiker dan kunnen we dit doen aan de hand van een try catch statement. We kunnen de functie aanroepen in een try block en de foutmelding opvangen in een catch block. In het catch block kunnen we dan zelf een foutmelding geven aan de gebruiker.

try {
    console.log(divide(5, 0));
} catch (error) {
    console.log("Je kan niet delen door 0");
}

Natuurlijk is dit een beetje een nutteloos voorbeeld, want je weet op voorhand dat deze functie een fout zal geven omdat je zelf als programmeur de deler op 0 hebt gezet. Maar als je de twee getallen afhankelijk maakt van de input van een gebruiker dan kan je niet op voorhand weten of de deler gelijk zal zijn aan 0. In dat geval kan je de foutmelding opvangen en zelf een foutmelding geven aan de gebruiker en opnieuw vragen naar de input.

import * as readline from 'readline-sync';

function divide(a: number, b: number): number {
    if (b == 0) {
        throw new Error("Division by zero is not allowed");
    }
    return a / b;
}

let result : number | undefined = undefined;

while (result == undefined) {
    let a = readline.questionInt("Geef een getal: ");
    let b = readline.questionInt("Geef een getal: ");
    try {
        result = divide(a, b);
    } catch (error) {
        console.log("Je kan niet delen door 0");
    }
}

console.log("Het resultaat is " + result);

Finally

Je kan ook een finally block toevoegen aan je try catch statement. Dit block zal altijd uitgevoerd worden, ook als er geen foutmelding is opgetreden. Dit kan handig zijn als je bijvoorbeeld een bestand hebt geopend en je wil dit bestand altijd sluiten, ook als er een foutmelding is opgetreden. Dus bijvoorbeeld:

try {
    console.log(divide(5, 0));
} catch (error) {
    console.log("Je kan niet delen door 0");
} finally {
    console.log("Dit print altijd");
}

Met het bovenstaande voorbeeld krijg je de volgende output:

Je kan niet delen door 0
Dit print altijd

Error object

Als je een foutmelding opvangt in een catch block dan kan je deze foutmelding gebruiken in je code. Tot nu toe hebben we altijd een nieuw Error object aangemaakt en zelf een foutmelding gegeven. Maar je kan ook de foutmelding die je opvangt gebruiken. Dit is een object met een aantal properties die je kan gebruiken. Zo heeft dit object een message property die de foutmelding bevat. Je kan deze property gebruiken om de foutmelding te tonen aan de gebruiker. Let er op dat je hier het type any moet gebruiken omdat je niet weet welk type de foutmelding zal hebben.

try {
    console.log(divide(5, 0));
} catch (error : any) {
    console.log(error.message);
}

Dit zal de volgende output geven:

Division by zero is not allowed

In principe is het ook mogelijk om een foutmelding op te gooien zonder een Error object te gebruiken. Je kan bijvoorbeeld een string opgooien als foutmelding.

function divide(a: number, b: number): number {
    if (b == 0) {
        throw "Division by zero is not allowed";
    }
    return a / b;
}

Dan kan je uiteraard wel niet meer gebruik maken van de message property van het Error object.

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.

function log(message: string): void {
    console.log(message);
}

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

function log(message: string) {
    console.log(message);
}

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

function log(message) { // Error: Parameter 'message' implicitly has an 'any' type.
    console.log(message);
}

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.

function multiply(a: number, b: number): number {
    return a * b;
}

console.log(multiply(5)); // Error: Expected 2 arguments, but got 1.

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.

function multiply(a: number, b?: number): number {
    return a * b; // Error: Object is possibly 'undefined'.
}

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.

function multiply(a: number, b?: number): number {
    if (b === undefined) {
        return a;
    }
    return a * b;
}

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.

function multiply(a: number, b: number = 1): number {
    return a * b;
}

console.log(multiply(5)); // 5

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.

function sum(...numbers: number[]): number {
    let total = 0;
    for (let number of numbers) {
        total += number;
    }
    return total;
}

console.log(sum(1,2,3,4,5)); // 15
console.log(sum(1,2,3)); // 6

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:

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

kan je die ook schrijven als een arrow function:

let add = (a: number, b: number): number => {
    return a + b;
}

console.log(add(1,2)); // 3

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.

let multiply = (a: number, b: number = 1): number => {
    return a * b;
}

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.

let numbers = [1,2,3,4,5];

numbers.forEach((element) => {
    console.log(element);
});

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.

function forEach(array: number[], callback: any) {
    for (let element of array) {
        callback(element);
    }
}

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

let numbers : number[] = [1,2,3,4,5];

forEach(numbers, (element) => {
    console.log(element);
});

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.

interface Callback {
    (element: number): void;
}

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

function forEach(array: number[], callback: Callback) {
    for (let element of array) {
        callback(element);
    }
}

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

let numbers : string[] = ["een", "twee","drie];

forEach(numbers, (element) => {
    console.log(element);
}); // Error: Argument of type '(string: any) => void' is not assignable to parameter of type 'Callback'.

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

interface MathFunction {
    (a: number, b: number): number;
}

function calculate(a: number, b: number, callback: MathFunction): number {
    return callback(a,b);
}

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.

let result = calculate(5, 10, (a, b) => {
    return a + b;
});

console.log(result); // 15

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.

let result = calculate(5, 10, (a, b) => {
    return a * b;
});

console.log(result); // 50

Verkorte syntax

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

let hello = () => { console.log("hello"); };

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

let hello = () => console.log("hello");

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

interface MathFunction {
    (a:number, b:number):number
};

let add1: MathFunction = (a,b) => { return a + b };
let add2: MathFunction = (a,b) => a + b ;

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

interface Calculation {
    (a:number):number
};

let double1: Calculation = (a) => { return 2*a };
let double2: Calculation = (a) => 2*a;
let double3: Calculation = a => 2*a;

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.

let numbers = [1,2,3,4,5];

numbers.forEach(element => console.log(element));
forEeach(numbers, element => console.log(element));

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.

let numbers : number[] = [1,2,3,4,5];

let doubled : number[] = numbers.map(element => element * 2);

console.log(doubled); // [2,4,6,8,10]

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.

let doubled : number[] = numbers.map((element: number) => element * 2);

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.

let numbers : number[] = [1,2,3,4,5];

let even : number[] = numbers.filter(element => element % 2 === 0);

console.log(even); // [2,4]

Ook hier kan je het type van element expliciet aangeven.

let even : number[] = numbers.filter((element: number) => element % 2 === 0);

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.

let numbers : number[] = [1,2,3,4,5];

let sum : number = numbers.reduce((accumulator, element) => accumulator + element);

console.log(sum); // 15

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.

let sum : number = numbers.reduce((accumulator: number, element: number) => accumulator + element);

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.

let numbers : number[] = [1,2,3,4,5];

console.log(numbers.reduce((prev: number[], current: number) => [current, ...prev], []));

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.

let numbers : number[] = [1,2,3,4,5];

let firstEven : number | undefined = numbers.find(element => element % 2 === 0);

console.log(firstEven); // 2

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.

let names : string[] = ["Andie", "Bert", "Cedric"];

let firstD : string | undefined = names.find(name => name.startsWith("D"));

console.log(firstD); // undefined

Er bestaan een aantal datatypes in TypeScript die we "primitieve" of "eenvoudige" datatypes noemen. Dit is omdat de waarden altijd maar uit 1 enkel ding bestaat. In het hoofdstuk over arrays heb je gezien dat er ook nog een ander soort datatypes bestaat: de complexe datatypes. Deze worden opgebouwd uit meerdere primitieve datatypes.

Een object is een ander voorbeeld van een complex datatype. In JavaScript en TypeScript kom je objecten haast overal tegen. Daarom is het belangrijk om deze te begrijpen en deze te kunnen gebruiken.

Type van een object

We kunnen een object beschrijven aan de hand van een interface . Deze interface beschrijft welke properties een object bevat en kan bevatten. We maken een eigen soort type dat we later kunnen gebruiken bij het declareren van onze variabelen.

Stel dat je het volgende object in JavaScript hebt:

let andie = {
  name: "Andie",
  age: 40
}

Dit object heeft twee properties: name en age. De waarde van name is een string en de waarde van age is een number. Als we nu een tweede object willen aanmaken en perongeluk een typfout maken, dan zal TypeScript ons niet waarschuwen van deze fout:

let debbie = {
  naem: "Debbie",
  age: 30
}

TypeScript zal dit als twee verschillende objecten zien. Dit is niet wat we willen. We willen dat TypeScript ons waarschuwt als we een typfout maken. We willen dus een type declareren dat zegt dat een object een name en een age property moet hebben. Dit kunnen we doen aan de hand van een interface:

interface Person {
  name: string;
  age: number;
}

We hebben nu een interface gemaakt die we Person noemen. Deze interface beschrijft een object dat een name en een age property moet hebben. We kunnen nu een variabele declareren van het type Person:

let andie: Person = {
  name: "Andie",
  age: 40
}

Als we nu een typfout maken, dan zal TypeScript ons waarschuwen:

let debbie: Person = {
  naem: "Debbie",
  age: 30
} // Error: Property 'naem' does not exist on type 'Person'

Ook is het niet mogelijk om een property toe te voegen die niet in de interface staat:

let debbie: Person = {
    name: "Debbie",
    age: 30,
    isAdmin: true
} // Error: Object literal may only specify known properties, and 'isAdmin' does not exist in type 'Person'

Ook het weglaten van bepaalde properties zal een foutmelding geven:

let debbie: Person = {
    name: "Debbie"
} // Error: Property 'age' is missing in type '{ name: string; }' but required in type 'Person'

Uiteraard moet je ook de data types van de properties respecteren:

let debbie: Person = {
    name: "Debbie",
    age: "30"
} // Error: Type 'string' is not assignable to type 'number'

Objecten in objecten

Het is ook mogelijk om objecten in andere objecten te gaan steken. Bijvoorbeeld voor ons User object zouden we kunnen kiezen om ook een adres toe te voegen. We zouden deze als aparte eigenschappen kunnen opgeven van het user object maar het is beter om dit in een apart object te steken.

We passen dus de User interface hiervoor aan:

interface User {
    name: string,
    age?: number,
    address: Address
}

Het type Address moeten we dan ook nog aanmaken aan de hand van een nieuwe interface.

interface Address {
    street: string,
    number: number,
    city: string
}

Nu kunnen we een User object aanmaken gebruik makende van deze interface.

let user : User = {
  name: "Andie",
  age: 30,
  address: {
    street: "Fakestreet",
    number: 133,
    city: "Fakegem"
  }
}

Wil je dan bijvoorbeeld de straat van deze gebruiker op het scherm tonen dan kan je dit doen aan de hand van de dot notatie:

console.log(user.address.street);

Als we address zouden niet verplicht maken (optioneel):

interface User {
    name: string,
    age?: number,
    address?: Address
}

dan moet je wel eerst nakijken of address wel is opgegeven:

if (user.address) {
    console.log(user.address.street);
}

anders krijg je deze error:

console.log(user.address.street); // Error: Object is possibly 'undefined'

Record type

Een record type is een object waarvan we de properties niet kennen. We weten niet welke properties het object zal hebben. We kunnen dit aangeven aan de hand van de Record type. Dit type heeft twee type parameters: het eerste type parameter is het type van de keys en het tweede type parameter is het type van de values.

Stel dat we een object willen gebruiken om bij te houden hoeveel keer een bepaalde waarde voorkomt in een array. We kunnen onmogelijk op voorhand weten welke waarden er in de array zullen zitten dus we kunnen niet op voorhand zeggen welke properties het object zal hebben. We kunnen dit oplossen aan de hand van de Record type:

let count: Record<string, number> = {};

let values = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 1, 2, 3, 4, 5];

for (let value of values) {
  if (count[value]) {
    count[value]++;
  } else {
    count[value] = 1;
  }
}

console.log(count); // { '1': 3, '2': 3, '3': 3, '4': 3, '5': 3 }

JSON bestand inlezen

import statement

Je kan aan de hand van het import statement in TypeScript een JSON bestand inlezen. Dit is handig als je bijvoorbeeld een configuratie bestand hebt dat je wil inlezen of dat je een lijst van objecten wil inlezen vanuit een bestand.

Stel dat je een JSON bestand users.json hebt met de volgende inhoud:

[
  {
    "name": "Andie",
    "age": 30,
    "address": {
      "street": "Fakestreet",
      "number": 133,
      "city": "Fakegem"
    }
  },
  {
    "name": "Debbie",
    "age": 25,
    "address": {
      "street": "Fakestreet",
      "number": 133,
      "city": "Fakegem"
    }
  }
]

Dan kan je dit bestand inlezen aan de hand van het import statement:

import data from "./users.json";

Je moet hier wel op letten dat je in je tsconfig.json bestand de volgende optie hebt aangezet:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true
    ...
  }
}

Je moet dan nog wel de inhoud van usersJson in een variabele of constante steken:

const users: User[] = data;

Het is niet altijd mogelijk om een bestand in te lezen aan de hand van het import statement. Als je bijvoorbeeld een bestand wil inlezen dat niet in je project zit en ergens anders op je computer staat dan kan je dit niet inlezen aan de hand van het import statement. In dat geval kan je gebruik maken van de fs module.

Interessante operators

De .? (of optionele chaining) operator

De optionele chaining operator is een nieuwe operator die sinds TypeScript 3.7 beschikbaar is. Deze operator is zeer handig als je objecten in objecten hebt. Stel dat je een object hebt met een aantal properties en je wil een property van een property opvragen. Als je niet zeker bent of de property wel bestaat dan kan je de optionele chaining operator gebruiken.

interface User {
    name: string,
    age: number,
    address?: Address
}

let user : User = {
  name: "Andie",
  age: 30
}

console.log(user.address.street); // Error: Object is possibly 'undefined'

We hebben hierboven gezien dat we dit kunnen voorkomen door eerst na te kijken of de property wel bestaat aan de hand van een if statement. Dit is echter niet zo handig. Je kan dit nu oplossen aan de hand van de optionele chaining operator:

console.log(user.address?.street); // undefined

Als address nu undefined is dan zal de optionele chaining operator undefined teruggeven. Als address wel bestaat dan zal de optionele chaining operator de waarde van street teruggeven.

Zo kunnen we heel diepe objecten gaan opvragen zonder dat we eerst moeten nakijken of de properties wel bestaan:

console.log(user.address?.street?.number?.toString()); // undefined

De ! (of non-null assertion) operator

In TypeScript wordt de ! (non-null assertion) operator gebruikt om aan te geven dat een waarde zeker niet null of undefined zal zijn op het punt waar de operator wordt gebruikt, zelfs als de typechecker dat niet kan garanderen. Dit kan handig zijn in situaties waar je meer weet over de waarde dan TypeScript kan afleiden.

Stel dat je een functie hebt die een default user aanmaakt en returned:

function getDefaultUser() : User {
    return {
        name: "Default",
        age: 0,
        address: {
            street: "Defaultstreet",
            number: 0,
            city: "Defaultcity"
        }
    }
}

Als we deze functie nu gebruiken en we willen de straat van de default user opvragen dan krijgen we een foutmelding:

let defaultUser = getDefaultUser();
console.log(defaultUser.address.street); // Error: Object is possibly 'undefined'

Nochtans weten we met zekerheid dat de default user een adres heeft. We kunnen dit aangeven aan de hand van de ! operator:

console.log(defaultUser.address!.street); // Defaultstreet

Let op dat je deze operator niet begint te gebruiken om fouten te verbergen. Je moet er zeker van zijn dat de waarde niet undefined of null kan zijn. Anders zal je een foutmelding krijgen op runtime. Gebruik hem dus niet om de compiler de mond te snoeren.

Net zoals in de browser is het mogelijk om in Node.js een HTTP request te doen naar een andere server. Dit doe je met de fetch functie. Deze functie heeft als argument een URL. De functie geeft een Promise terug die een Response object bevat. Dit object bevat de data die je terugkrijgt van de server. In TypeScript is het wel belangrijk dat je het type van de data opgeeft die je verwacht terug te krijgen. Je moet dus een interface voorzien die de data beschrijft.

De syntax is grotendeels hetzelfde als in JavaScript. Het enige verschil is dat je het type van de data moet opgeven.

Interface

We gaan in dit voorbeeld gebruik maken van de JSONPlaceholder API. Deze API bevat een aantal endpoints die je kan gebruiken om data op te halen. We gaan in dit voorbeeld gebruik maken van de /posts endpoint. Deze endpoint geeft een lijst van gebruikers terug.

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  ...
  {
    "userId": 10,
    "id": 100,
    "title": "at nam consequatur ea labore ea harum",
    "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
  }
]

Het eerste wat je moet doen is een interface maken die de data beschrijft die je verwacht terug te krijgen. In dit geval is dit een array van objecten. Elk object heeft een userId, id, title en body property. De userId en id property zijn van het type number. De title en body property zijn van het type string.

interface Post {
    userId: number;
    id: number;
    title: string;
    body: string;
}

Je kan deze interface zelf maken, maar je kan ook gebruik maken van een tool zoals QuickType om deze automatisch te genereren. Zorg vooral dat de interface correct is en overeenkomt met de data die je verwacht terug te krijgen.

Fetch

Nu kunnen we de fetch functie gebruiken om de data op te halen. We geven als argument de URL van de endpoint mee. Omdat de fetch functie een Promise teruggeeft, kunnen we de then functie gebruiken om de data te gebruiken. Omdat over het algemeen de data die je terugkrijgt van een server een JSON object is, moeten we de data eerst omzetten naar een JavaScript object. Dit doen we met de json functie. Deze functie geeft ook een Promise terug. We kunnen dus de then functie gebruiken om de data te gebruiken.

Stel dat we de titel van de eerste post willen loggen naar de console. We kunnen dit doen met de volgende code:

fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json())
    .then((response: Post[]) => {
        console.log(response[0].title);
    }).catch((error) => {
        console.log(error);
    });

of met async en await:

(async function () {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const posts : Post[] = await response.json();
        console.log(posts[0].title);
    } catch (error: any) {
        console.log(error);
    }
})();

Let op dat een API niet altijd een array teruggeeft. Het kan ook een object zijn dat op zijn beurt weer een array bevat. Je moet dus altijd controleren wat de data is die je terugkrijgt.

Error afhandelen

De catch functie is nodig om een error af te handelen. Onder een errors vallen alleen errors die veroorzaakt worden op netwerk niveau. Dus bijvoorbeeld als de server niet bereikbaar is of als de URL niet bestaat.

Als je toch een error wil afhandelen die veroorzaakt wordt door een fout in de code van de server, dan moet je de status code van de response controleren. Als de status code 2xx is, dan is er geen error. Als de status code iets anders is, dan is er een error.

fetch('https://jsonplaceholder.typicode.com/posts/123')
    .then(r => {
        if (!r.ok) throw new Error(r.status)
        return r.json()
    })
    .then(r => console.log(r))
    .catch(e => console.log(e));

We kijken hier na of de status code niet 2xx is aan de hand van de ok property. Deze property is true als de status code 2xx is. Als de status code niet 2xx is, dan gooien we een error.

Deze code is ook weer sterk te vereenvoudigen met async en await:

(async function () {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/123');
        if (!response.ok) throw new Error(response.status);
        const posts : Post[] = await response.json();
        console.log(posts[0].title);
    } catch (error: any) {
        console.log(error);
    }
})();

Je kan ook de status property gebruiken om de status code op te vragen. Deze property bevat een nummer.

(async function () {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/123');
        
        if (response.status === 404) throw new Error('Not found');
        if (response.status === 500) throw new Error('Internal server error');

        const posts : Post[] = await response.json();
        console.log(posts[0].title);
    } catch (error: any) {
        console.log(error);
    }
})();

Een voorbeeld met paging

We gaan nu een iets complexer voorbeeld bekijken. We gaan deze keer eens de https://reqres.in/api/users API gebruiken. Als je naar de response kijkt, dan zie je dat deze geen array teruggeeft, maar een object. Dit object bevat een array met de key data en ook een andere properties zoals page, per_page, total en total_pages. Het data object bevat een array van gebruikers.

Hier kan je de volgende interface voor gebruiken:

interface User {
    id: number;
    email: string;
    first_name: string;
    last_name: string;
    avatar: string;
}

interface RootObject {
    page: number;
    per_page: number;
    total: number;
    total_pages: number;
    data: User[];
}

We gaan nu de gebruikers ophalen en de gebruikers te loggen naar de console.

async function main() {
    try {
        const response = await fetch('https://reqres.in/api/users');
        if (!response.ok) throw new Error(response.statusText);
        const users : RootObject = await response.json();
        for (const user of users.data) {
            console.log(user.first_name);
        }
    } catch (error: any) {
        console.log(error);
    }
};
main();

Merk op dat we hier wel geen rekening hebben gehouden met de pagina's. Als je naar de response kijkt zie je dat hier een page property in zit. Deze property geeft aan op welke pagina je zit. Als je naar de URL kijkt, dan zie je dat er een page query parameter in zit. Deze parameter geeft aan op welke pagina je zit. Als je deze parameter aanpast, dan krijg je een andere pagina terug. Je zou hier dus een loop kunnen maken die alle pagina's afgaat.

async function main() {
    try {
        let page : number = 1;
        let total_pages : number = 1;

        while (page <= total_pages) {
            const response = await fetch("https://reqres.in/api/users?page=" + page);
            if (!response.ok) throw new Error(response.statusText);
            const root : RootObject = await response.json();
            total_pages = root.total_pages;
            console.log("Page " + page);
            for (const user of root.data) {
                console.log(user.first_name);
            }
            page++;
        }
    } catch (error: any) {
        console.log(error);
    }
};
main();

Let wel op dat elk paging systeem anders is. Je moet dus altijd controleren hoe het paging systeem werkt.

Express laat ons toe statische bestanden te serveren. Dit zijn bestanden die niet veranderen. Denk aan CSS, JavaScript, afbeeldingen, etc.

Wil je dit doen, dan moet je een folder aanmaken waarin je deze bestanden plaatst. Deze folder noemen we meestal public. In deze folder plaatsen we dan onze statische bestanden.

Het enige wat we dan nog moeten doen is Express vertellen dat deze folder statische bestanden bevat. Dit doen we met de use methode.

app.use(express.static("public"));

Alle bestanden in de public folder kunnen nu worden opgevraagd. Als je een bestand style.css in de public folder plaatst, kan je dit bestand opvragen via http://localhost:3000/style.css.

Vaak plaats je de bestanden niet in de public folder zelf, maar in subfolders. Dit kan er als volgt uit zien:

|- public
    |- css
        |- reset.css
        |- some-style.css
        |- other-style.css
        |- style.css
    |- js
        |- some-script.js
        |- other-script.js
        |- script.js
    |- assets
        |- images
            |- image-01.jpg
            |- image-02.jpg
            |- image-03.jpg
            |- image-04.jpg
        |- fonts
            |- cool-font.woff
            |- other-font.woff
        |- icons
            |- logo.png
            |- logo_small.png
            |- favicon.ico

Wil je nu een afbeelding opvragen, dan kan je dit doen via http://localhost:3000/assets/images/image-01.jpg. Wil je een script opvragen, dan kan je dit doen via http://localhost:3000/js/script.js.

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:

<html>
<body>
Hello world!
</body>
</html>

Maar wat als we nu een willekeurige boodschap willen tonen?

<html>
<body>
[DIT MOET DYNAMISCH ZIJN]
</body>
</html>

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:

npm install ejs

en we installeren ook de TypeScript types:

npm install --save-dev @types/ejs

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

import express from "express";
import ejs from "ejs";

const app = express();

app.set("view engine", "ejs"); // EJS als view engine
app.set("port", 3000);

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.

<h1>Hello World!</h1>
This is yet another boring hello world app

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):

import express from "express";
const app = express();

app.set("view engine", "ejs"); // EJS als view engine
app.set("port", 3000);

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

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