Saltar al contenido principal

Soporte de Primera Clase para TypeScript

· 7 min de lectura
Luna Wei
Luna Wei
Software Engineer @ Meta
Nick Gerleman
Nick Gerleman
Software Engineer @ Meta
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Con el lanzamiento de la versión 0.71, React Native está invirtiendo en la experiencia TypeScript con los siguientes cambios:

En esta publicación explicaremos qué significan estos cambios para ti como usuario de TypeScript o Flow.

La Nueva Plantilla de Aplicación Usa TypeScript por Defecto

¡A partir de la versión 0.71, cuando creas una nueva aplicación React Native mediante la CLI de React Native, obtendrás una aplicación TypeScript por defecto!

npx react-native init My71App --version 0.71.0

Captura de pantalla de un simulador de iPhone ejecutando una nueva aplicación generada por React Native CLI. Junto al simulador se muestra Visual Studio Code abierto en "App.tsx" para ilustrar que ejecuta un archivo TypeScript.

El punto de entrada de una aplicación recién generada será App.tsx en lugar de App.js, completamente tipado con TypeScript. El nuevo proyecto ya incluye un tsconfig.json, por lo que tu IDE te ayudará a escribir código tipado inmediatamente.

Declaraciones TypeScript Incluidas con React Native

La versión 0.71 es la primera que incluye declaraciones TypeScript (TS) integradas.

Anteriormente, las declaraciones TypeScript para React Native eran proporcionadas por @types/react-native alojadas en el repositorio DefinitelyTyped. La decisión de colocar los tipos TypeScript junto al código fuente de React Native fue para mejorar la precisión y mantenimiento.

@types/react-native solo proporciona tipos para versiones estables. Esto significa que si deseabas desarrollar con una versión preliminar de React Native usando TypeScript, tenías que usar tipos de una versión anterior que podían ser inexactos. Publicar @types/react-native también es propenso a errores: las versiones se retrasan respecto a React Native, y el proceso requiere inspeccionar manualmente los cambios de tipos en la API pública y actualizar las declaraciones TS para que coincidan.

Al ubicar los tipos TS junto al código fuente de React Native, hay más visibilidad y propiedad sobre ellos. Nuestro equipo está trabajando activamente en herramientas para mantener la alineación entre Flow y TS.

Este cambio también elimina una dependencia que los usuarios de React Native debían gestionar. Al actualizar a 0.71 o superior, puedes eliminar @types/react-native como dependencia. Consulta la nueva plantilla de aplicación para configurar el soporte TypeScript.

Planeamos discontinuar @types/react-native para las versiones 0.73 en adelante. Concretamente esto significa:

  • Se publicarán versiones de @types/react-native para React Native 0.71 y 0.72, idénticas a los tipos en React Native para esas ramas.

  • Para React Native 0.73 en adelante, los tipos TS solo estarán disponibles directamente en React Native.

Cómo Migrar

Migra a los nuevos tipos integrados tan pronto como sea posible. Aquí tienes detalles según tus necesidades:

Responsable de Aplicación

Al actualizar a React Native >= 0.71, puedes eliminar @types/react-native de tus devDependency.

nota

Si recibes advertencias porque una biblioteca que usas referencia @types/react-native como peerDependency, abre un issue o envía un PR para que esa biblioteca use peerDependencies opcionales e ignora la advertencia por ahora.

Mantenedor de bibliotecas

Las bibliotecas que apuntan a versiones de React Native anteriores a 0.71 pueden usar @types/react-native como peerDependency para verificar tipos contra la versión de la aplicación. Esta dependencia debe marcarse como opcional en peerDependenciesMeta para que las definiciones de tipos no sean obligatorias para usuarios sin TypeScript o usuarios de 0.71 donde las definiciones están integradas.

Mantenedor de definiciones TypeScript que dependen de @types/react-native

Consulta los cambios importantes introducidos en 0.71 para ver si estás listo para migrar.

¿Qué pasa si uso Flow?

Los usuarios de Flow pueden seguir verificando tipos en aplicaciones dirigidas a 0.71+, pero la lógica de configuración ya no está incluida de forma predeterminada en la plantilla.

Anteriormente, los usuarios de Flow actualizaban los tipos de Flow de React Native fusionando el .flowconfig de la nueva plantilla de aplicación y actualizando manualmente flow-bin. La nueva plantilla de aplicación ya no incluye un .flowconfig, pero aún existe uno en el repositorio de React Native que puedes usar como base para tu aplicación.

Si necesitas iniciar una nueva aplicación React Native con Flow, puedes consultar la plantilla de aplicación de la versión 0.70.

¿Qué hago si encuentro un error en las definiciones TypeScript?

Independientemente de si usas las definiciones TS integradas o @types/react-native, si encuentras un error envía un PR tanto al repositorio de React Native como a DefinitelyTyped. Si no sabes cómo solucionarlo, abre un issue en GitHub en el repositorio de React Native y menciona a @lunaleaps en el reporte.

La documentación prioriza TypeScript

Para garantizar una experiencia consistente con TypeScript, hemos actualizado la documentación de React Native para reflejar TypeScript como el nuevo lenguaje predeterminado.

Los ejemplos de código ahora admiten TypeScript inline y más de 170 ejemplos interactivos se han actualizado para pasar la verificación de formato, linting y tipos en la nueva plantilla. La mayoría de ejemplos son válidos tanto en TypeScript como en JavaScript. Donde son incompatibles, puedes ver el ejemplo en cualquier idioma.

Si detectas un error o tienes una mejora, recuerda que el sitio web también es de código abierto y ¡nos encantaría recibir tus PRs!

¡Gracias a la comunidad de TypeScript en React Native!

Para finalizar, queremos reconocer todo el trabajo realizado durante años por la comunidad para garantizar que TypeScript sea utilizable por desarrolladores de React Native.

Agradecemos a todos los contribuyentes que han mantenido @types/react-native desde 2015! Vemos el esfuerzo y cuidado que todos han puesto para que los usuarios de React Native tengan la mejor experiencia.

Agradecemos a @acoates, @eps1lon, @kelset, @tido64, @Titozzz y @ZihanChen-MSFT por su ayuda consultando, cuestionando, comunicando y revisando los cambios para trasladar los tipos de TypeScript a React Native.

De igual forma, queremos agradecer a los mantenedores de react-native-template-typescript por haber apoyado la experiencia con TypeScript para el desarrollo de nuevas aplicaciones en React Native desde el primer día.

Esperamos colaborar de manera más directa en el repositorio de React Native y seguir mejorando la experiencia de desarrollo de React Native.