Antwoord.

Geschiedenis van de vraag: In JavaScript worden callback-functies overal gebruikt, maar hun handtekeningen zijn vaak onduidelijk. In TypeScript moet je expliciet de types van de parameters en de returnwaarde opgeven, anders loop je het risico op gaten in de typeveiligheid.

Probleem: Onjuiste of niet-strikte typisering van callbacks leidt tot ongedefinieerde types voor argumenten en resultaten, bemoeilijkt het werken met de context (this), verstoort de automatische foutcontrole door de compiler en bemoeilijkt refactoring.

Oplossing: Het is noodzakelijk om het type van de callback-functie expliciet te definiëren, de types van de doorgegeven parameters op te geven, optionele argumenten en de returnwaarde correct te verwerken, en indien nodig het type van de context expliciet te specificeren.

Voorbeeld code:

type Callback = (error: Error | null, result?: string) => void;

function doAsyncWork(data: string, cb: Callback): void {
  setTimeout(() => {
    if (data === '') cb(new Error('Lege string'));
    else cb(null, data.toUpperCase());
  }, 100);
}

Belangrijke kenmerken:

Geef altijd de types van alle parameters van de callback op.
Beschrijf het returntype, zelfs als dit void is.
Als het nodig is, specificeer het type this expliciet (bijvoorbeeld via een functie met context).

Valkuilvragen.

Wat gebeurt er als je het returntype van de callback niet opgeeft?

TypeScript accepteert elk returntype (bijvoorbeeld undefined, void, Promise), wat kan leiden tot verrassingen in asynchrone ketens of bij het teruggeven van "standaard" waarden.

type BadCallback = (data: string) => any;
// elk resultaat, geen controle

Mag je callback schrijven als Function of (...args: any[]) => any?

Nee. Dit verwijdert de volledige typebescherming, er verdwijnt informatie over het aantal parameters, hun types en het returntype. Dit type aanpak is duurder dan helemaal geen TypeScript gebruiken.

Hoe typeer je een functie met context this?

Gebruik de eerste parameter this in de handtekening van de functie of cast via bind. Bijvoorbeeld:

interface ClickCallback {
  (this: HTMLElement, event: MouseEvent): void;
}

const handler: ClickCallback = function (event) { this.textContent = 'ok'; };

Typefouten en anti-patronen

Niet-getypeerde callbacks (any of Function)
Ontbreken van een returntype in de functiehandtekening
Onjuist type this leidt tot willekeurige runtime fouten

Voorbeeld uit het leven

Negatieve case

In het project werd de callback gedeclareerd als (...args: any[]) => any. Bij het bijwerken van de bedrijfslogica veranderde de handtekening, de callback gaf de benodigde argumenten niet meer door, bugs kwamen pas aan het licht in productie.

Voordelen:

Makkelijker te compileren en derdepartijcode aan te sluiten

Nadelen:

Geen typebescherming op enige niveau
Moeilijkheden bij updates

Positieve case

Strikte types geïmplementeerd: interfaces van callbacks beschreven, type this en return type expliciet aangegeven. De compiler begon fouten te vangen vóór deployment, refactoring en bugfixing werden vereenvoudigd.