TypeScript input onChange: cómo capturar correctamente event.target.value en 2025

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

El terror silencioso de todo desarrollador React: event.target.value y TypeScript

¿Alguna vez has escrito un manejador onChange para un input simple, y TypeScript de repente empezó a gritar en rojo? Te suena: "Property 'value' does not exist on type 'EventTarget'". Esta pregunta en Stack Overflow ha acumulado decenas de miles de visitas, y con razón. Parece que no hay nada más simple que tomar el valor de un campo de entrada. Pero el diablo, como siempre, está en los detalles.

En 2025, el ecosistema de TypeScript se ha vuelto aún más estricto. Las nuevas versiones del compilador analizan mejor los tipos, y los "hacks" antiguos han dejado de funcionar. Si escribes en React o simplemente usas TypeScript para trabajar con el DOM, este artículo es tu bote salvavidas. Analizaremos no solo cómo tipificar onChange, sino también por qué funciona de esta manera y no de otra. ¡Allá vamos!

¿Por qué event.target.value es un dolor?

Vamos al grano. Aquí hay un ejemplo típico que causa un error:

const handleChange = (event: any) => {  const value = event.target.value; // Funciona, pero "any" es malo};

El problema es que event podría ser cualquier cosa. TypeScript no sabe qué elemento es ni si tiene la propiedad value. Además, usar any mata toda la magia de la tipificación estática. Pierdes el autocompletado y la protección contra errores.

El camino correcto es usar tipos específicos. ¿Pero cuáles? Vamos a descubrirlo.

Mejores prácticas para tipificar onChange en 2025

1. React: usa ChangeEvent

Si trabajas con React, olvídate del Event nativo. React usa sus propios eventos sintéticos: SyntheticEvent. Para inputs, textareas y selects, ChangeEvent es perfecto.

import React, { ChangeEvent } from 'react';

const MyInput = () => {  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {    const value = event.target.value;    console.log(value); // value es un string, TypeScript está contento  };

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

¿Por qué funciona? ChangeEvent<HTMLInputElement> es un genérico que sabe con certeza que event.target es un HTMLInputElement. Y este tiene la propiedad value de tipo string. Todo es lógico y type-safe.

2. Para textarea y select

Un enfoque similar funciona para otros elementos de formulario. Solo cambia el genérico:

ChangeEvent<HTMLTextAreaElement> — para <textarea>
ChangeEvent<HTMLSelectElement> — para <select>
ChangeEvent<HTMLInputElement> — para <input>

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

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

3. TypeScript puro (sin React): Event + type assertion

Si no usas React, sino que trabajas directamente con el DOM, es un poco diferente. El Event nativo no conoce la propiedad value. Necesitas convertir event.target al tipo correcto.

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);});

Importante: Usa la conversión de tipos (as HTMLInputElement) solo cuando estés 100% seguro del tipo del elemento. De lo contrario, corres el riesgo de obtener un error en tiempo de ejecución.