Begrip: TypeScript voor event handlers

React exporteert een aantal events die gebruikt kunnen worden om de signatuur van een event handler te definiëren. Elk van deze events is generisch wat betekent dat we er een hier aan moeten meegeven welk soort element het event getriggerd heeft. Daarnaast exporteert React ook types die gebruikt kunnen worden om een event handler (functie) in één keer te definiëren in de plaats van via de parameters, ook deze types zijn generisch.

In de meeste gevallen is een event handler de beste keuze, soms heb je naast het event echter ook een extra parameter nodig, in dat geval gebruik je de individuele event interfaces.

TypeScript definieert verschillende types die overeenkomen met de verschillende HTML elementen. Hieronder enkele voorbeelden:

• HTMLElement: superklasse voor alle tags
• HTMLFormElement: <form>
• HTMLInputElement: <input/>
• HTMLSelectElement: <select>
• HTMLTextAreaElement: <textarea>

Hieronder volgt een lijst van de belangrijkste events die door React geëxporteerd worden en enkele frequent gebruikte signaturen voor event handlers. Voor meer informatie verwijzen we naar React TypeScript Cheatsheet.

Via event interfaces

import {
    ChangeEvent,        // Event voor wijzigingen in een formulier element.
    FocusEvent,         // Element krijgt of verliest focus.
    FormEvent,          // Formulier wordt ingestuurd.
    MouseEvent,         // De gebruiker klikt ergens op.
} from 'react'

const handleChangeEvent = (evt: ChangeEvent<HTMLInputElement>): void => {}
const handleFocusEvent = (evt: FocusEvent<HTMLElement>): void => {}
const handleFormEvent = (evt: FormEvent<HTMLFormElement>): void => {}
const handleMouseEvent = (evt: MouseEvent<HTMLElement>): void => {}

Via EventHandler functiedefinities

import {
    ChangeEventHandler, // Functiedefinitie voor <T>(evt: ChangeEvent<T>) => void
    FocusEventHandler,  // Functiedefinitie voor <T>(evt: FocusEvent<T>) => void
    FormEventHandler,   // Functiedefinitie voor <T>(evt: FormEvent<T>) => void
    MouseEventHandler,  // Functiedefinitie voor <T>(evt: MouseEvent<T>) => void
} from 'react'

const handleChangeEvent: ChangeEventHandler<HTMLInputElement> = evt => {}
const handleFocusEvent: FocusEventHandler<HTMLElement> = evt => {}
const handleFormEvent: FormEventHandler<HTMLFormElement> = evt => {}
const handleMouseEvent: MouseEventHandler<HTMLElement> = evt => {}

:::