Cómo utilizar TypeScript con React

En este artículo, aprenderás cómo usar TypeScript con React. Al final, tendrás una comprensión sólida de cómo escribir código de React con TypeScript. ¿Quieres ver la versión en video de este tutorial? Puedes echar un vistazo al video a continuación Índice de contenido *

En este artículo, aprenderás cómo usar TypeScript con React.

Al final, tendrás una comprensión sólida de cómo escribir código React con TypeScript.

¿Quieres ver la versión en video de este tutorial? Puedes ver el video a continuación:

Tabla de Contenidos

• Requisitos Previos
• Empezando
• Conceptos Básicos de React y TypeScript
• Tres Formas de Definir Tipos de Props
• Cómo Crear una Aplicación de Lista de Usuarios Aleatorios
• Cómo Almacenar la Lista de Usuarios en el Estado
• Cómo Mostrar los Usuarios en la Interfaz de Usuario
• Cómo Crear un Componente de Usuario Separado
• Cómo Crear un Archivo Separado para Declaraciones de Tipos
• Cómo Mostrar un Indicador de Carga
• Cómo Cargar Usuarios al Hacer Clic en un Botón
• Cómo Manejar el Evento de Cambio
• Gracias por Leer

Requisitos Previos

Para seguir este tutorial, aquí tienes lo que necesitas:

• un conocimiento básico de cómo trabajar con React
• una comprensión básica de cómo escribir código TypeScript

Empezando

Para comenzar con TypeScript, primero necesitas instalar TypeScript en tu máquina. Puedes hacer esto ejecutando npm install -g typescript desde la terminal o el símbolo del sistema.

Ahora, crearemos un proyecto Vite usando TypeScript.

npm create vite

Una vez ejecutado, se te harán algunas preguntas.

Para el nombre del proyecto, ingresa react-typescript-demo.

Para el marco de trabajo, selecciona React, y para la variante selecciona TypeScript.

Una vez que hayas creado el proyecto, ábrelo en VS Code y ejecuta los siguientes comandos desde la terminal:

cd react-typescript-demonpm install

Ahora, vamos a hacer una limpieza de código.

Elimina el archivo src/App.css y reemplaza el contenido del archivo src/App.tsx con el siguiente contenido:

const App = () => {  return <div>App</div>;};export default App;

Después de guardar el archivo, es posible que veas las subrayas rojas en el archivo, como se muestra a continuación:

Si obtienes ese error, simplemente presiona Cmd + Shift + P (Mac) o Ctrl + Shift + P (Windows/Linux) para abrir el menú de comandos de VS Code e ingresa el texto TypeScript en el cuadro de búsqueda y selecciona la opción TypeScript: Select TypeScript Version...:

Una vez seleccionado, verás opciones para seleccionar entre la versión de VS Code y la versión del workspace como se muestra a continuación:

De estas opciones, debes seleccionar la opción Usar la versión del workspace. Una vez que selecciones esa opción, el error del archivo App.tsx desaparecerá.

Ahora, abre el archivo src/index.css y reemplaza su contenido con el siguiente código:

:root {  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;  line-height: 1.5;  font-weight: 400;  font-synthesis: none;  text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  -webkit-text-size-adjust: 100%;}

Ahora, vamos a iniciar la aplicación ejecutando el comando npm run dev.

Ahora, haz clic en la URL que se muestra y accede a la aplicación. Verás la siguiente pantalla inicial con el texto App mostrado en el navegador.

Conceptos básicos de React y TypeScript

Cuando uses React con TypeScript, lo primero que debes saber es la extensión de archivo.

Cada archivo de React + TypeScript necesita tener una extensión .tsx.

Si el archivo no contiene ningún código específico de JSX, entonces puedes usar la extensión .ts en lugar de la extensión .tsx.

Para crear un componente en React con TypeScript, puedes usar el tipo FC del paquete react y usarlo después del nombre del componente.

Así que abre el archivo src/App.tsx y reemplázalo con el siguiente contenido:

import { FC } from 'react';const App: FC = () => {  return <div>App</div>;};export default App;

Ahora, vamos a pasar algunas props a este componente App.

Abre src/main.tsx y pasa una prop title al componente App como se muestra a continuación:

import React from 'react';import ReactDOM from 'react-dom/client';import App from './App.tsx';import './index.css';ReactDOM.createRoot(document.getElementById('root')!).render(  <React.StrictMode>    <App title='Demo de TypeScript' />  </React.StrictMode>);

Sin embargo, con la prop title añadida, ahora tenemos un error de TypeScript como puedes ver a continuación:

Tres formas de definir los tipos de prop

Puedes solucionar el error de TypeScript anterior de tres formas diferentes.

• Declarar tipos usando una interfaz

El error se produce porque hemos añadido una prop title como prop obligatoria para el componente App – así que debemos mencionar esto dentro del componente App.

Abre el archivo src/App.tsx y reemplaza su contenido con el siguiente código:

import { FC } from 'react';interface AppProps {  title: string;}const App: FC<AppProps> = () => {  return <div>App</div>;};export default App;

Como puedes ver arriba, hemos añadido una interfaz adicional AppProps para especificar qué props acepta el componente. También usamos la interfaz AppProps después del FC en corchetes angulares.

Es una buena práctica y se recomienda comenzar el nombre de la interfaz con una letra mayúscula, como en nuestro caso AppProps.

Ahora, con este cambio, el error de TypeScript desaparecerá como puedes ver a continuación:

De esta manera especificamos qué propiedades acepta un componente en particular.

• Declaración de Tipos Usando type

También podemos declarar el tipo de los props utilizando la palabra clave type.

Así que abre el archivo App.tsx y cambia el código siguiente:

import { FC } from 'react';interface AppProps {  title: string;}const App: FC<AppProps> = () => {  return <div>App</div>;};export default App;

por este código:

import { FC } from 'react';type AppProps = {  title: string;};const App: FC<AppProps> = () => {  return <div>App</div>;};export default App;

Aquí, en lugar de la declaración de interface, usamos la declaración de type. Ahora el código funcionará sin ningún error de TypeScript.

Depende de ti cuál de las dos opciones prefieres. Yo siempre uso una interfaz para declarar los tipos de los componentes.

• Usando Declaración de Tipo en Línea

La tercera forma de declarar un tipo es definiendo tipos en línea como se muestra a continuación:

const App = ({ title }: { title: string }) => {  return <div>App</div>;};export default App;

Como puedes ver, hemos eliminado el uso de FC porque no es necesario, y al desestructurar la prop title definimos su tipo.

Así que de estas tres formas, puedes elegir la que prefieras. Yo siempre prefiero usar una interfaz con FC. De esta manera, si quiero añadir más props más adelante, el código no se verá complicado (lo cual ocurriría si defino tipos en línea).

Ahora, vamos a utilizar la prop title y mostrarla en la interfaz de usuario.

Reemplaza el contenido del archivo App.tsx con el siguiente código:

import { FC } from 'react';interface AppProps {  title: string;}const App: FC<AppProps> = ({ title }) => {  return <h1>{title}</h1>;};export default App;

Como puedes ver, estamos utilizando una interfaz con FC, y estamos desestructurando la prop title y mostrándola en la pantalla.

Ahora, abre el archivo src/index.css y añade el siguiente CSS en su interior:

h1 {  text-align: center;}

Si revisas la aplicación en el navegador, verás que el título con el texto TypeScript Demo se muestra correctamente.

Cómo Crear una Aplicación de Lista de Usuarios Aleatorios

Ahora que tienes una idea básica de cómo declarar los props de un componente, vamos a crear una aplicación sencilla de Lista de Usuarios Aleatorios que mostrará una lista de 10 usuarios aleatorios en la pantalla.

Para ello, utilizaremos la API Random User Generator.

Esta es la URL de la API que utilizaremos:

https://randomuser.me/api/?results=10

Primero, vamos a instalar la biblioteca npm Axios para poder realizar una llamada a la API utilizando esta biblioteca.

Ejecuta el siguiente comando para instalar la biblioteca Axios:

npm install axios

Una vez instalado, reinicia la aplicación ejecutando el comando npm run dev.

Ahora, reemplaza el contenido del archivo App.tsx con el siguiente contenido:

import axios from 'axios';import { FC, useEffect } from 'react';interface AppProps {  title: string;}const App: FC<AppProps> = ({ title }) => {  useEffect(() => {    const getUsers = async () => {      try {        const { data } = await axios.get(          'https://randomuser.me/api/?results=10'        );        console.log(data);      } catch (error) {        console.log(error);      }    };    getUsers();  }, []);  return <h1>{title}</h1>;};export default App;

Como puedes ver arriba, hemos añadido un gancho useEffect donde hacemos la llamada a la API para obtener la lista de usuarios.

Ahora, si abres la consola en el navegador, podrás ver la respuesta de la API mostrada en la consola.

Como puedes ver, estamos obteniendo correctamente una lista de 10 usuarios aleatorios y la lista real de usuarios se encuentra en la propiedad results de la respuesta.

Cómo almacenar la lista de usuarios en el estado

Ahora, almacenemos esos usuarios en el estado para poder mostrarlos en la pantalla.

Dentro del componente App, declara un nuevo estado con un valor inicial de un array vacío de la siguiente manera:

const [usuarios, setUsuarios] = useState([]);

Y llama a la función setUsuarios para almacenar los usuarios en el gancho useEffect después de la llamada a la API.

Entonces tu componente App se verá así ahora:

import axios from 'axios';import { FC, useEffect, useState } from 'react';interface AppProps {  title: string;}const App: FC<AppProps> = ({ title }) => {  const [usuarios, setUsuarios] = useState([]);  useEffect(() => {    const getUsers = async () => {      try {        const { data } = await axios.get(          'https://randomuser.me/api/?results=10'        );        console.log(data);        setUsuarios(data.results);      } catch (error) {        console.log(error);      }    };    getUsers();  }, []);  return <h1>{title}</h1>;};export default App;

Como puedes ver aquí, estamos llamando a la función setUsuarios con el valor de data.results.

Cómo mostrar los usuarios en la interfaz de usuario

Ahora, mostremos el nombre y el correo electrónico del usuario individual en la pantalla.

Si revisas la salida de la consola, verás que existe una propiedad name para cada objeto que contiene el nombre y apellido del usuario. Por lo tanto, podemos combinarlos para mostrar el nombre completo.

También tenemos una propiedad directa email para cada objeto de usuario que podemos utilizar para mostrar el correo electrónico.

Entonces reemplaza el contenido del archivo App.tsx con el siguiente contenido:

import axios from 'axios';import { FC, useEffect, useState } from 'react';interface AppProps {  title: string;}const App: FC<AppProps> = ({ title }) => {  const [usuarios, setUsuarios] = useState([]);  useEffect(() => {    const getUsers = async () => {      try {        const { data } = await axios.get(          'https://randomuser.me/api/?results=10'        );        console.log(data);        setUsuarios(data.results);      } catch (error) {        console.log(error);      }    };    getUsers();  }, []);  return (    <div>      <h1>{title}</h1>      <ul>        {usuarios.map(({ login, name, email }) => {          return (            <li key={login.uuid}>              <div>                Nombre: {name.first} {name.last}              </div>              <div>Correo electrónico: {email}</div>              <hr />            </li>          );        })}      </ul>    </div>  );};export default App;

Como puedes ver, estamos usando el método map del array para recorrer el array users, y estamos usando la destructuración de objetos para desestructurar las propiedades login, name y email de objetos user individuales. Además, estamos mostrando el nombre y el correo electrónico del usuario como una lista desordenada.

Pero verás algunos errores de TypeScript en el archivo, como se puede ver a continuación:

Esto se debe a que, como puedes ver arriba, por defecto TypeScript asume que el tipo del array users es never[], por lo que no puede determinar qué propiedades contiene el array users.

Esto significa que debemos especificar todas las propiedades que estamos utilizando junto con sus tipos.

Entonces ahora, declara una nueva interfaz después de la interfaz AppProps de esta manera:

interface Users {  name: {    first: string;    last: string;  };  login: {    uuid: string;  };  email: string;}

Aquí, especificamos que cada user individual será un objeto con las propiedades name, login y email. También especificamos el tipo de dato de cada propiedad.

Como puedes ver, cada objeto user proveniente de la API tiene muchas otras propiedades como phone, location y otras. Pero solo necesitamos especificar aquellas propiedades que estamos utilizando en el código.

Ahora, cambia la declaración del array users en useState de esto:

const [users, setUsers] = useState([]);

a esto:

const [users, setUsers] = useState<Users[]>([]);

Aquí, especificamos que users es un array de objetos de tipo Users, que es la interfaz que declaramos.

Ahora, si revisas el archivo App.tsx, verás que no hay errores de TypeScript.

Y podrás ver la lista de 10 usuarios aleatorios mostrados en la pantalla:

Como has visto antes, hemos declarado la interfaz Users de esta manera:

interface Users {  name: {    first: string;    last: string;  };  login: {    uuid: string;  };  email: string;}

Pero cuando tienes propiedades anidadas, se escribirá de esta manera:

interface Name {  first: string;  last: string;}interface Login {  uuid: string;}interface Users {  name: Name;  login: Login;  email: string;}

La ventaja de declarar interfaces separadas para cada propiedad anidada es que, si quieres usar la misma estructura en otro archivo, solo necesitas exportar cualquiera de las interfaces anteriores y reutilizarlas en otros archivos (en lugar de volver a declarar la misma interfaz de nuevo).

Entonces vamos a exportar todas las interfaces anteriores como una exportación nombrada. Así que el código se verá así:

export interface Name {  first: string;  last: string;}export interface Login {  uuid: string;}export interface Users {  name: Name;  login: Login;  email: string;}

Como dije anteriormente, también puedes usar la declaración de tipo aquí en lugar de utilizar la interfaz, por lo que se vería así:

type Name = {  first: string;  last: string;};type Login = {  uuid: string;};type Users = {  name: Name;  login: Login;  email: string;};

Cómo crear un componente de usuario separado

Cuando usamos el método map de una matriz para mostrar algo en la pantalla, es común separar esa parte de visualización en un componente diferente. Esto facilita las pruebas y también hace que el código del componente sea más corto.

Crea una carpeta llamada components dentro de la carpeta src y crea un archivo llamado User.tsx dentro de ella. Luego, agrega el siguiente contenido dentro de ese archivo:

const User = ({ login, name, email }) => {  return (    <li key={login.uuid}>      <div>        Nombre: {name.first} {name.last}      </div>      <div>Email: {email}</div>      <hr />    </li>  );};export default User;

Si guardas el archivo, verás los errores de TypeScript nuevamente.

Entonces, nuevamente, necesitamos especificar qué props recibirá el componente User. También necesitamos especificar el tipo de datos de cada uno de ellos.

Por lo tanto, el archivo User.tsx actualizado se verá así:

import { FC } from 'react';import { Login, Name } from '../App';interface UserProps {  login: Login;  name: Name;  email: string;}const User: FC<UserProps> = ({ login, name, email }) => {  return (    <li key={login.uuid}>      <div>        Nombre: {name.first} {name.last}      </div>      <div>Email: {email}</div>      <hr />    </li>  );};export default User;

Como puedes ver arriba, hemos declarado una interfaz llamada UserProps y la hemos especificado para el componente User utilizando FC.

También, ten en cuenta que no estamos declarando el tipo de dato de las propiedades name y login. En su lugar, estamos utilizando los tipos exportados del archivo App.tsx:

import { Login, Name } from '../App';

Por eso es bueno declarar tipos separados para cada propiedad anidada, para poder reutilizarlos en otros lugares.

Ahora, podemos usar este componente User dentro del archivo App.tsx.

Entonces cambia el siguiente código:

{users.map(({ login, name, email }) => {  return (    <li key={login.uuid}>      <div>        Nombre: {name.first} {name.last}      </div>      <div>Email: {email}</div>      <hr />    </li>  );})}

a este código:

{users.map(({ login, name, email }) => {  return <User key={login.uuid} name={name} email={email} />;})}

Como probablemente sepas, al usar el método map de una matriz, debemos proporcionar la propiedad key para el elemento padre, que en nuestro caso es User. Por eso hemos agregado la propiedad key al usar el componente User como se muestra arriba.

Eso significa que no necesitamos una clave dentro del componente User, por lo que podemos eliminar la clave y la propiedad login del componente User.

Entonces, el componente User actualizado se verá así:

import { FC } from 'react';import { Name } from '../App';interface UserProps {  name: Name;  email: string;}const User: FC = ({ name, email }) => {  return (    
      
        Nombre: {name.first} {name.last}      
      
Email: {email}
      
    
  );};export default User;

Como puedes ver, hemos eliminado la propiedad login de la interfaz y también la hemos desestructurado. La aplicación sigue funcionando como antes sin problemas, como puedes ver a continuación.

Cómo crear un archivo separado para las declaraciones de tipo

Como puedes ver, el archivo App.tsx se ha vuelto bastante grande debido a las declaraciones de interfaz. Es común tener un archivo separado solo para declarar tipos.

Entonces, crea un archivo App.types.ts dentro de la carpeta src y mueve todas las declaraciones de tipo del componente App al archivo App.types.ts:

export interface AppProps {  title: string;}export interface Name {  first: string;  last: string;}export interface Login {  uuid: string;}export interface Users {  name: Name;  login: Login;  email: string;}

Ten en cuenta que también estamos exportando el componente AppProps en el código anterior.

Ahora, actualiza el archivo App.tsx para usar estos tipos de la siguiente manera:

import axios from 'axios';import { FC, useEffect, useState } from 'react';import { AppProps, Users } from './App.types';import User from './components/User';const App: FC = ({ title }) => {  const [users, setUsers] = useState([]);    // ...};export default App;

Como puedes ver, estamos importando AppProps y Users del archivo App.types:

import { AppProps, Users } from './App.types';

Y tu archivo User.tsx se verá así ahora:

import { FC } from 'react';import { Name } from '../App.types';interface UserProps {  name: Name;  email: string;}const User: FC = ({ name, email }) => {  return (    
      
        Nombre: {name.first} {name.last}      
      
Email: {email}
      
    
  );};export default User;

Como puedes ver, estamos importando Name del archivo App.types.

import { Name } from '../App.types';

Cómo mostrar un indicador de carga

Siempre es bueno mostrar un indicador de carga mientras se realiza una llamada a la API para mostrar algo.

Entonces, agreguemos un nuevo estado isLoading dentro del componente App:

const [isLoading, setIsLoading] = useState(false);

Como puedes ver, no hemos especificado ningún tipo de datos al declarar un estado de esta manera:

const [isLoading, setIsLoading] = useState(false);

Esto es porque, cuando asignamos cualquier valor inicial (false en nuestro caso), TypeScript automáticamente infiere el tipo de dato que estaremos almacenando, que es boolean en nuestro caso.

Cuando declaramos el estado users, no estaba claro qué estaríamos almacenando solo con el valor inicial de un array vacío []. Así que necesitamos mencionar su tipo de esta manera:

const [users, setUsers] = useState<Users[]>([]);

Ahora, cambia el código de useEffect al siguiente:

useEffect(() => {  const getUsers = async () => {    try {      setIsLoading(true);      const { data } = await axios.get(        'https://randomuser.me/api/?results=10'      );      console.log(data);      setUsers(data.results);    } catch (error) {      console.log(error);    } finally {      setIsLoading(false);    }  };  getUsers();}, []);

Aquí, estamos llamando a setIsLoading con un valor de true antes de la llamada a la API. Dentro del bloque finally, lo establecemos de nuevo en false.

El código escrito dentro del bloque finally siempre se ejecutará, ya sea un éxito o una falla. Entonces, ya sea que la llamada a la API tenga éxito o falle, necesitamos ocultar el mensaje de carga, y estamos usando el bloque finally para lograr eso.

Ahora, podemos usar el valor del estado isLoading para mostrar un mensaje de carga en la pantalla.

Después de la etiqueta h1 y antes de la etiqueta ul, agrega el siguiente código:

{isLoading && <p>Cargando...</p>}

Ahora, si revisas la aplicación, podrás ver el mensaje de carga mientras se cargan los usuarios.

Así que esta es una mejor experiencia para el usuario.

Pero si observas de cerca los usuarios mostrados, verás que los usuarios cambian una vez cargados.

Entonces, inicialmente vemos un conjunto de 10 usuarios aleatorios, pero luego inmediatamente vemos un conjunto diferente de usuarios aleatorios sin recargar la página.

Esto se debe a que estamos usando React versión 18 (lo cual puedes verificar en el archivo package.json) y React.StrictMode dentro del archivo src/main.tsx.

Y con la versión 18 de React, cuando usamos React.StrictMode, cada gancho useEffect se ejecuta dos veces incluso sin ninguna dependencia especificada.

Esto solo sucede en el entorno de desarrollo y no en producción cuando implementas la aplicación.

Debido a esto, se realiza la llamada a la API dos veces. Dado que la API de usuarios aleatorios devuelve un nuevo conjunto de usuarios aleatorios cada vez que se llama a la API, estamos estableciendo un conjunto diferente de usuarios en el array users usando la llamada a setUsers dentro del gancho useEffect.

Esta es la razón por la que vemos que los usuarios cambian sin refrescar la página.

Si no quieres este comportamiento durante el desarrollo, puedes eliminar React.StrictMode del archivo main.tsx.

Así que cambia el siguiente código:

import React from 'react';import ReactDOM from 'react-dom/client';import App from './App.tsx';import './index.css';ReactDOM.createRoot(document.getElementById('root')!).render(  <React.StrictMode>    <App title='TypeScript Demo' />  </React.StrictMode>);

a este código:

import ReactDOM from 'react-dom/client';import App from './App.tsx';import './index.css';ReactDOM.createRoot(document.getElementById('root')!).render(  <App title='TypeScript Demo' />);

Ahora, si revisas la aplicación, verás que la lista de usuarios no cambia una vez que se carga.

Cómo cargar usuarios al hacer clic en el botón

Ahora, en lugar de hacer la llamada a la API al cargar la página, agreguemos un botón “mostrar usuarios” y haremos la llamada a la API cuando hagamos clic en ese botón.

Así que después de la etiqueta h1, agrega un nuevo botón como se muestra a continuación:

<button onClick={handleClick}>Mostrar Usuarios</button>

Ahora, agrega el método handleClick dentro del componente App y mueve todo el código de la función getUsers al método handleClick:

const handleClick = async () => {  try {    setIsLoading(true);    const { data } = await axios.get('https://randomuser.me/api/?results=10');    console.log(data);    setUsers(data.results);  } catch (error) {    console.log(error);  } finally {    setIsLoading(false);  }};

Ahora, puedes eliminar o comentar el hook useEffect, ya que ya no es necesario.

Tu archivo App.tsx actualizado se verá así ahora:

import axios from 'axios';import { FC, useState } from 'react';import { AppProps, Users } from './App.types';import User from './components/User';const App: FC<AppProps> = ({ title }) => {  const [users, setUsers] = useState<Users[]>([]);  const [isLoading, setIsLoading] = useState<boolean>(false);  const handleClick = async () => {    try {      setIsLoading(true);      const { data } = await axios.get('https://randomuser.me/api/?results=10');      console.log(data);      setUsers(data.results);    } catch (error) {      console.log(error);    } finally {      setIsLoading(false);    }  };  return (    <div>      <h1>{title}</h1>      <button onClick={handleClick}>Mostrar Usuarios</button>      {isLoading && <p>Cargando...</p>}      <ul>        {users.map(({ login, name, email }) => {          return <User key={login.uuid} name={name} email={email} />;        })}      </ul>    </div>  );};export default App;

Ahora, si revisas la aplicación, verás que los usuarios se cargan solo al hacer clic en el botón de mostrar usuarios. También vemos el mensaje de carga.

Cómo manejar el evento de cambio

Ahora, agreguemos un campo de entrada. Cuando escribamos algo en ese campo de entrada, mostraremos el texto ingresado debajo de ese campo de entrada.

Agrega un campo de entrada después del botón de esta manera:

<input type='text' onChange={handleChange} />

Y declara un nuevo estado para almacenar el valor ingresado de esta manera:

const [username, setUsername] = useState('');

Ahora, agrega un método handleChange dentro del componente App de esta manera:

 const handleChange = (event) => {  setUsername(event.target.value);};

Sin embargo, verás que estamos obteniendo un error de TypeScript para el parámetro del evento.

Con TypeScript, siempre debemos especificar el tipo de cada parámetro de función.

Aquí, TypeScript no puede identificar el tipo del parámetro event.

Para averiguar el tipo del parámetro event, podemos cambiar el siguiente código:

<input type='text' onChange={handleChange} />

a este código:

<input type='text' onChange={(evento) => {}} />

Aquí, estamos usando una función en línea, porque al usar una función en línea, el tipo correcto se pasa automáticamente al parámetro de la función, por lo que no necesitamos especificarlo.

Si pasas el mouse sobre el parámetro evento, podrás ver el tipo exacto de evento que podemos usar en nuestra función manejarCambio, como se puede ver a continuación:

Ahora, puedes revertir el siguiente código:

<input type='text' onChange={(evento) => {}} />

a este código:

<input type='text' onChange={manejarCambio} />

Ahora, vamos a mostrar el valor de la variable de estado usuario debajo del campo de entrada:

<input type='text' onChange={manejarCambio} /><div>{usuario}</div>

Si revisas la aplicación ahora, podrás ver el texto ingresado mostrado debajo del campo de entrada.

Gracias por Leer

Eso es todo para este tutorial. Espero que hayas aprendido mucho de él.

¿Quieres ver la versión en video de este tutorial? Puedes ver este video.

Puedes encontrar el código fuente completo de esta aplicación en este repositorio.

Si quieres dominar JavaScript, ES6+, React y Node.js con contenido fácil de entender, visita mi canal de YouTube. No olvides suscribirte.

¿Quieres mantenerte al día con contenido regular sobre JavaScript, React y Node.js? Sígueme en LinkedIn.

---

• React
• Typescript