Uso de TypeScript

TypeScript es una forma popular de añadir definiciones de tipos a bases de código JavaScript. Por defecto, TypeScriptadmite JSXy puedes obtener soporte completo para React Web añadiendo@types/react y @types/react-doma tu proyecto.

Instalación

Todos losframeworks de React para producciónofrecen soporte para usar TypeScript. Sigue la guía específica del framework para la instalación:

• Next.js
• Remix
• Gatsby
• Expo

Añadir TypeScript a un proyecto de React existente

Para instalar la última versión de las definiciones de tipos de React:

npm install --save-dev @types/react @types/react-dom

Las siguientes opciones del compilador deben establecerse en tutsconfig.json:

1. domdebe incluirse enlib(Nota: Si no se especifica ninguna opciónlib, domse incluye por defecto).
2. jsxdebe establecerse en una de las opciones válidas.preservedebería ser suficiente para la mayoría de las aplicaciones.documentación de jsxsobre qué valor elegir.

TypeScript con componentes de React

Escribir TypeScript con React es muy similar a escribir JavaScript con React. La diferencia clave al trabajar con un componente es que puedes proporcionar tipos para las props de tu componente. Estos tipos se pueden usar para verificar la corrección y proporcionar documentación en línea en los editores.

Tomando elcomponente MyButtonde la guía deInicio rápido, podemos añadir un tipo que describa eltitledel botón:

Esta sintaxis en línea es la forma más sencilla de proporcionar tipos para un componente, aunque una vez que empiezas a tener algunos campos para describir puede volverse engorrosa. En su lugar, puedes usar unainterfaceo untypepara describir las props del componente:

El tipo que describe las props de tu componente puede ser tan simple o complejo como necesites, aunque debe ser un tipo de objeto descrito contype o interface. Puedes aprender sobre cómo TypeScript describe objetos enTipos de Objetos, pero también puede interesarte usarTipos de Uniónpara describir una prop que puede ser de uno de varios tipos diferentes, y la guíaCreando Tipos a partir de Tipospara casos de uso más avanzados.

Ejemplo de Hooks

Las definiciones de tipos de@types/reactincluyen tipos para los Hooks integrados, por lo que puedes usarlos en tus componentes sin configuración adicional. Están diseñados para tener en cuenta el código que escribes en tu componente, por lo que obtendrástipos inferidosla mayor parte del tiempo y, idealmente, no necesitarás manejar los detalles de proporcionar los tipos.

Sin embargo, podemos ver algunos ejemplos de cómo proporcionar tipos para los Hooks.

useState

ElHook useStatereutilizará el valor pasado como estado inicial para determinar cuál debe ser el tipo del valor. Por ejemplo:

Esto asignará el tipoboolean a enabled, ysetEnabledserá una función que acepta un argumentoboolean, o una función que devuelve unboolean. Si deseas proporcionar explícitamente un tipo para el estado, puedes hacerlo proporcionando un argumento de tipo a la llamada deuseState:

Esto no es muy útil en este caso, pero un caso común en el que quizás quieras proporcionar un tipo es cuando tienes un tipo de unión. Por ejemplo,statusaquí puede ser una de varias cadenas diferentes:

O, como se recomienda enPrincipios para estructurar el estado, puedes agrupar el estado relacionado como un objeto y describir las diferentes posibilidades mediante tipos de objeto:

useReducer

ElHook useReduceres un Hook más complejo que toma una función reductora y un estado inicial. Los tipos para la función reductora se infieren del estado inicial. Opcionalmente, puedes proporcionar un argumento de tipo a la llamada deuseReducerpara proporcionar un tipo para el estado, pero a menudo es mejor establecer el tipo en el estado inicial:

Estamos usando TypeScript en algunos lugares clave:

• interface Statedescribe la forma del estado del reducer.
• type CounterActiondescribe las diferentes acciones que se pueden enviar al reducer.
• const initialState: Stateproporciona un tipo para el estado inicial, y también el tipo que utilizauseReducerpor defecto.
• stateReducer(state: State, action: CounterAction): Stateestablece los tipos para los argumentos y el valor de retorno de la función reducer.

Una alternativa más explícita a establecer el tipo eninitialStatees proporcionar un argumento de tipo auseReducer:

useContext

ElHook useContextes una técnica para pasar datos hacia abajo en el árbol de componentes sin tener que pasar props a través de los componentes. Se utiliza creando un componente proveedor y, a menudo, creando un Hook para consumir el valor en un componente hijo.

El tipo del valor proporcionado por el contexto se infiere del valor pasado a la llamada decreateContext:

Esta técnica funciona cuando tienes un valor por defecto que tiene sentido, pero ocasionalmente hay casos en los que no lo tienes, y en esos casosnullpuede parecer razonable como valor por defecto. Sin embargo, para permitir que el sistema de tipos entienda tu código, necesitas establecer explícitamenteContextShape | nullen elcreateContext.

Esto causa el problema de que necesitas eliminar el| nullen el tipo para los consumidores del contexto. Nuestra recomendación es que el Hook realice una verificación en tiempo de ejecución de su existencia y lance un error cuando no esté presente:

useMemo

ElHook useMemocreará/reaccederá a un valor memorizado a partir de una llamada a función, volviendo a ejecutar la función solo cuando las dependencias pasadas como segundo parámetro cambien. El resultado de llamar al Hook se infiere del valor de retorno de la función en el primer parámetro. Puedes ser más explícito proporcionando un argumento de tipo al Hook.

useCallback

ElHook useCallbackproporciona una referencia estable a una función siempre que las dependencias pasadas en el segundo parámetro sean las mismas. Al igual queuseMemo, el tipo de la función se infiere del valor de retorno de la función en el primer parámetro, y puedes ser más explícito proporcionando un argumento de tipo al Hook.

Cuando se trabaja en modo estricto de TypeScript,useCallbackrequiere agregar tipos para los parámetros en tu callback. Esto se debe a que el tipo del callback se infiere del valor de retorno de la función, y sin parámetros el tipo no se puede entender completamente.

Dependiendo de tus preferencias de estilo de código, podrías usar las funciones*EventHandlerde los tipos de React para proporcionar el tipo para el manejador de eventos al mismo tiempo que defines el callback:

Tipos útiles

Existe un conjunto bastante extenso de tipos que provienen del paquete@types/react, vale la pena leerlo cuando te sientas cómodo con cómo interactúan React y TypeScript. Puedes encontrarlosen la carpeta de React en DefinitelyTyped. Cubriremos algunos de los tipos más comunes aquí.

Eventos del DOM

Cuando trabajas con eventos del DOM en React, el tipo del evento a menudo se puede inferir del manejador de eventos. Sin embargo, cuando quieres extraer una función para pasarla a un manejador de eventos, necesitarás establecer explícitamente el tipo del evento.

Hay muchos tipos de eventos proporcionados en los tipos de React; la lista completa se puede encontraraquí, la cual se basa en loseventos más populares del DOM.

Al determinar el tipo que buscas, primero puedes mirar la información de despliegue (hover) para el manejador de eventos que estás usando, la cual mostrará el tipo del evento.

Si necesitas usar un evento que no está incluido en esta lista, puedes usar el tipoReact.SyntheticEvent, que es el tipo base para todos los eventos.

Children (Hijos)

Hay dos formas comunes de describir los hijos (children) de un componente. La primera es usar el tipoReact.ReactNode, que es una unión de todos los tipos posibles que se pueden pasar como hijos en JSX:

Esta es una definición muy amplia de hijos. La segunda es usar el tipoReact.ReactElement, que solo incluye elementos JSX y no primitivos de JavaScript como cadenas o números:

Ten en cuenta que no puedes usar TypeScript para describir que los hijos son un cierto tipo de elementos JSX, por lo que no puedes usar el sistema de tipos para describir un componente que solo acepta hijos<li>.

Puedes ver un ejemplo de ambos,React.ReactNode y React.ReactElement, con el verificador de tipos eneste playground de TypeScript.

Props de Estilo

Cuando usas estilos en línea en React, puedes usarReact.CSSPropertiespara describir el objeto pasado a la propstyle. Este tipo es una unión de todas las propiedades CSS posibles, y es una buena manera de asegurarte de que estás pasando propiedades CSS válidas a la propstyle, y de obtener autocompletado en tu editor.

Aprendizaje adicional

Las páginas individuales de la API en la documentación pueden contener documentación más detallada sobre cómo usarlas con TypeScript.

Recomendamos los siguientes recursos:

• El manual de TypeScriptes la documentación oficial de TypeScript y cubre la mayoría de las características clave del lenguaje.
• Las notas de la versión de TypeScriptcubren las nuevas funciones en profundidad.
• React TypeScript Cheatsheetes una hoja de referencia mantenida por la comunidad para usar TypeScript con React, que cubre muchos casos límite útiles y ofrece más amplitud que este documento.
• TypeScript Community Discordes un lugar excelente para hacer preguntas y obtener ayuda con problemas de TypeScript y React.