Skip to content

Goed om te weten

VSCode en npm install

Nadat je npm install hebt gedaan, is het vaak een goed idee om VSCode even te herstarten. Dan worden de laatste versies van alle pakketten correct opgepakt. Met name ESLint kan soms wat irritant doen als je dit niet doet.

Omgaan met queryDatabase en types

Met de HBO-ICT.Cloud API is het mogelijk om een database te queryen, dit doe je met de api.queryDatabase-functie.

Als je met TypeScript werkt moet je datatypes gebruiken, dus moet je deze functie op een bepaalde manier aanroepen.

Stel dat je de volgende query wilt uitvoeren: 

SELECT voornaam, achternaam, leeftijd FROM persoon

Je krijgt dan een lijst met de gegevens van 0 of meerdere personen.

In TypeScript moet je een type definieren om te vertellen hoe de lijst eruit ziet, anders kun je niet met de gegevens werken. Bijvoorbeeld:

type PersonData {
    voornaam: string;
    achternaam: string;
    leeftijd: number;
}

Vervolgens kun je deze PersonData-type gebruiken in combinatie met api.queryDatabase. Bijvoorbeeld: 

const results: PersonData[] = await api.queryDatabase<PersonData>(
    "SELECT voornaam, achternaam, leeftijd FROM persoon"
) as PersonData[];

De results-array bevat nu een lijst van PersonData-types met de data van de query.

Omgaan met queryDatabase en toSqlDateTime

Als je de api.queryDatabase-functie wilt gebruiken in combinatie met een Date-object, moet je deze omzetten naar een correcte String-representatie.

De HBO-ICT.Cloud heeft daar de utils.toSqlDateTime-functie voor beschikbaar gesteld. Bijvoorbeeld: 

const date: Date = new Date(2025, 9, 30); // 30 oktober 2025

const results: EventData[] = await api.queryDatabase<EventData>(
    "SELECT * FROM evenementen WHERE datum = ?",
    utils.toSqlDateTime(date)
) as EventData[];

Omgaan met async / await / void

Tijdens het ontwikkelen van Dokkie ga je gebruik moeten maken van Promises.

In de voorbeelden hiervoor zag je bijvoorbeeld await api.queryDatabase. De api.queryDatabase-functie geeft een Promise-object terug: oftewel een belofte dat er in de toekomst een resultaat zal volgen.

Standaard wacht de TypeScript-code hier niet op. Gebruik je geen await, dan zal meteen de volgende regel code uitvoeren. Als deze regel code dan iets met het resultaat van de api.queryDatabase-functie wilt doen, gaat het fout, want dat resultaat is er nog niet. Door await te gebruiken zeg je tegen de TypeScript-code: wacht op het resultaat voordat je met de rest van code verdergaat.

Als je await in een functie wilt gebruiken, moet deze functie als async aangemerkt zijn én het resultaat ook een Promise zijn. Bijvoorbeeld: 

async function getEvents(): Promise<EventData[]> {
    const results: EventData[] = await api.queryDatabase<EventData>(
        "SELECT * FROM evenementen"
    ) as EventData[];

    return results;
}

Als je nu ergens in de code de getEvents() uit het voorbeeld aanroept, dan moet je dus ook hier weer een await gebruiken als je iets met het resultaat wilt doen. Soms heb je een async-functie, maar wil je niet wachten op het resultaat. In dat geval gebruik je void, bijvoorbeeld: void getEvents(). Daarmee geef je dan heel duidelijk aan dat het een async-functie is, maar dat je niets met het resultaat wilt doen.

Omgaan met verschillende HTML-elementen

Als je getElementById, querySelector of soortgelijk functies gebruikt, krijg je meestal een HTMLElement als resultaat.

Meestal is het dan ook voldoende om het volgende te doen in TypeScript: 

const headerElement: HTMLElement = document.getElementById("my-h1");

Soms is een HTMLElement echter niet specifiek genoeg. Bijvoorbeeld In het geval van een <input>-element kan je via een HTMLElement niet bij de value-property komen. In dat soort situaties zul je dus specifieker moeten zijn: 

const inputElement: HTMLInputElement = document.getElementById("my-input");
console.log(inputElement.value);

Hieronder volgt een lijst van andere soort HTMLElement-objecten die je waarschijnlijk nodig gaat hebben bij Dokkie: