TypeScript input onChange: Wie man event.target.value im Jahr 2025 richtig abfängt

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Der stille Horror jedes React-Entwicklers: event.target.value und TypeScript

Haben Sie jemals einen onChange-Handler für ein einfaches Eingabefeld geschrieben, und TypeScript fing plötzlich an, rot zu schreien? Kommt Ihnen bekannt vor: "Property 'value' does not exist on type 'EventTarget'". Diese Frage auf Stack Overflow hat Zehntausende von Aufrufen gesammelt, und das zu Recht. Es scheint so einfach – den Wert aus einem Eingabefeld nehmen? Aber der Teufel steckt, wie immer, im Detail.

Im Jahr 2025 ist das TypeScript-Ökosystem noch strenger geworden. Neuere Compiler-Versionen analysieren Typen besser, und alte "Hacks" funktionieren nicht mehr. Wenn Sie in React schreiben oder TypeScript einfach für die Arbeit mit dem DOM verwenden, ist dieser Artikel Ihr Rettungsboot. Wir werden nicht nur wie man onChange typisiert behandeln, sondern auch, warum es genau so und nicht anders funktioniert. Los geht's!

Warum ist event.target.value ein Problem?

Kommen wir direkt zur Sache. Hier ist ein typisches Beispiel, das einen Fehler verursacht:

const handleChange = (event: any) => {  const value = event.target.value; // Funktioniert, aber "any" ist böse};

Das Problem ist, dass event alles Mögliche sein kann. TypeScript weiß nicht, um welches Element es sich handelt und ob es eine Eigenschaft value hat. Außerdem tötet die Verwendung von any die ganze Magie der statischen Typisierung. Sie verlieren die Autovervollständigung und den Schutz vor Fehlern.

Der richtige Weg ist die Verwendung konkreter Typen. Aber welche? Lassen Sie es uns herausfinden.

Best Practices für die Typisierung von onChange im Jahr 2025

1. React: ChangeEvent verwenden

Wenn Sie mit React arbeiten, vergessen Sie das native Event. React verwendet seine eigenen synthetischen Events – SyntheticEvent. Für Eingabefelder, Textareas und Selects ist ChangeEvent ideal geeignet.

import React, { ChangeEvent } from 'react';

const MyInput = () => {  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {    const value = event.target.value;    console.log(value); // value ist ein String, TypeScript ist zufrieden  };

  return <input type="text" onChange={handleChange} />;};

Warum funktioniert das? ChangeEvent<HTMLInputElement> ist ein Generikum, das genau weiß, dass event.target ein HTMLInputElement ist. Und dieses hat eine Eigenschaft value vom Typ string. Alles logisch und typsicher.

2. Für textarea und select

Ein ähnlicher Ansatz funktioniert für andere Formularelemente. Ändern Sie einfach das Generikum:

ChangeEvent<HTMLTextAreaElement> – für <textarea>
ChangeEvent<HTMLSelectElement> – für <select>
ChangeEvent<HTMLInputElement> – für <input>

const handleTextareaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {  const text = event.target.value; // string};

const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {  const selectedValue = event.target.value; // string};

3. Reines TypeScript (ohne React): Event + Typ-Assertion

Wenn Sie React nicht verwenden, sondern direkt mit dem DOM arbeiten, ist alles etwas anders. Das native Event kennt die Eigenschaft value nicht. Sie müssen event.target auf den richtigen Typ casten.

const inputElement = document.getElementById('my-input') as HTMLInputElement;

inputElement.addEventListener('change', (event: Event) => {  const target = event.target as HTMLInputElement;  const value = target.value;  console.log(value);});

Wichtig: Verwenden Sie Typ-Assertions (as HTMLInputElement) nur, wenn Sie zu 100% sicher sind, um welchen Elementtyp es sich handelt. Andernfalls riskieren Sie einen Laufzeitfehler.