1. Introducción a TypeScript en Next.js y Expo
Hola a todos. Hoy les mostraré algunas de las características que implementan los marcos modernos o los marcos que aprovechan Typescript para mejorar la experiencia del desarrollador y del usuario. Cubriré algunas de las características que Expo con Expo Router y Next.js con AppRouter implementan. Hablemos de cómo configurar TypeScript en ambos, Expo y Next.js. Ambos marcos proporcionan una experiencia de desarrollo centrada en TypeScript. La característica más importante es el enrutamiento seguro por tipo, que mejora la productividad del desarrollador y la estabilidad de la aplicación.
Hola a todos. Soy Lydia Helle y hoy les mostraré algunas de las características que los modernos frameworks implementan o los frameworks que aprovechan Typescript implementan para no solo mejorar la experiencia del desarrollador, sino también la experiencia del usuario. Estoy segura de que han oído hablar de estas características antes, puede que las hayan utilizado. Así que esto es solo para recordarles que existen y darles un poco de apreciación. Y tal vez no las hayan utilizado antes, en cuyo caso espero que esta charla sea valiosa. Así que para esta charla, cubriré algunas de las características que Expo con Expo Router y Next.js con AppRouter implementan. Por supuesto, hay otros frameworks que implementan Typescript también y aprovechan características similares. Los mencionaré al final, pero por ahora solo quiero centrarme en Next.js y Expo. Así que antes de sumergirme en la parte de TypeScript de Next.js y Expo, solo quería presentar rápidamente Expo Router, si no han oído hablar de él antes, lo cual es probable si no están realmente interesados en el desarrollo nativo. Pero Expo Router es un enrutador basado en archivos para aplicaciones nativas y para aplicaciones web. Así que podemos usarlo para navegar fácilmente entre pantallas y rutas y reutilizar componentes en Android, iOS y web. Así que trae ese enrutamiento del sistema de archivos que podemos estar acostumbrados en la web a todas las plataformas. Si no lo han utilizado antes, recomiendo encarecidamente simplemente leer la documentación. Pueden iniciar rápidamente un proyecto de Expo Router utilizando el comando mpx create-expo-app. Recomiendo encarecidamente usar esa pestaña de plantilla porque entonces todo ya está instalado y es mucho más fácil comenzar con ello. Voy a suponer que ya han oído hablar de Next.js, que podemos inicializar utilizando mpx create-next-app-latest. Para esta charla, sin embargo, me centraré en Next.js 13 y principalmente en el enrutador de la aplicación. Por supuesto, si todavía están utilizando el enrutador de páginas, lo cual está completamente bien. También tenemos mucho soporte de TypeScript allí, pero por ahora solo me centraré en el enrutador de la aplicación. Hablemos de cómo configurar TypeScript en Expo y Next.js. Tanto Next.js como Expo proporcionan una experiencia de desarrollo centrada en TypeScript para construir su aplicación React. En Expo, al iniciar Expo Router a través de ese comando de configuración que acabo de mencionar, que de nuevo, recomiendo encarecidamente, se envía automáticamente con TypeScript ya instalado y configurado, por lo que podemos simplemente utilizar todas las características de inmediato. En Next.js, al inicializar un nuevo proyecto a través de los comandos de configuración te preguntará si te gustaría usar TypeScript como primera pregunta, y es sí por defecto, así que solo haz clic en sí. Así que ambos frameworks tienen un enfoque muy centrado en TypeScript. Por supuesto, también, tanto Next.js como Expo te permiten implementar rápidamente TypeScript o añadir soporte para TypeScript simplemente convirtiendo un archivo de JS a TypeScript o a TS, y esto instalará automáticamente todas las dependencias necesarias y configurará tu proyecto para que puedas usar TypeScript de inmediato en un proyecto ya existente. Ahora la parte más importante, hablemos de las características que obtenemos al tener TypeScript habilitado y configurado. La más importante es el enrutamiento seguro por tipo. Así que el enrutamiento seguro por tipo mejora la productividad del desarrollador y en general la estabilidad de tu aplicación asegurando la corrección de las referencias de ruta en toda tu aplicación porque tradicionalmente los desarrolladores tenían que definir explícitamente las rutas y asociarlas con vistas o componentes específicos, y este sistema por supuesto funciona, así es como siempre lo hemos hecho, pero es muy susceptible a errores humanos porque el desarrollador puede escribir fácilmente mal una ruta llevando a enlaces rotos o si estás migrando rutas o cambiándolas de nombre, es bastante fácil pasar por alto accidentalmente algunos de los tags de anclaje que todavía están enlazando a esa antigua ruta y eso habría creado un montón de enlaces rotos. Y aquí es donde TypeScript y el concepto de enrutamiento seguro por tipo entran en juego porque TypeScript que soporta esto escaneará el sistema de archivos de tu proyecto y generará dinámicamente tipos de TypeScript para cada ruta detectada. Y esto crea un entorno seguro basado en el estado actual de tu aplicación cada vez que actualizas
2. Componente de Enlace y Enrutamiento en Expo y Next.js
Los frameworks proporcionan un componente de enlace integrado para la generación de enlaces. Reduce el riesgo de errores tipográficos y lanza errores de tipo al enlazar a rutas inexistentes. En Expo, habilita el experimento .typed e importa el componente de enlace del paquete exporouter. Expo admite rutas estáticas y dinámicas, y lanza errores para parámetros incorrectos. ExpoRouter proporciona hooks como UseSegments y UseRouter para un mayor control. En Next.js, habilita typedRoutes en el archivo de configuración next.
Y para hacer el sistema aún más amigable para el desarrollador, los
frameworks generalmente proporcionan un componente de enlace integrado que está diseñado para la generación de enlaces. Y este componente tiene un atributo href que utiliza estos tipos que generamos en el paso anterior basado en el sistema de archivos. Y tu IDE puede usar esto para la autosugerencia, autocompletado, lo que reduce aún más el riesgo de errores tipográficos. Y lo más importante, si un desarrollador intenta enlazar a una ruta que no existe, lanzará ese error de tipo durante el proceso de construcción. Entonces veamos cómo podemos usar esto en
Expo primero. Así que en
Expo podemos utilizar esto asegurándonos primero de que el experimento .typed esté habilitado. Y después de haber hecho eso, podemos importar el componente de enlace del paquete exporouter. Para el propósito de esta demostración, simplemente crearé algunas rutas más, lo que podemos hacer creando un nuevo archivo con el nombre de la ruta. Así que, por ejemplo, contacto y ruta.
Entonces ahora cuando usamos el componente de enlace con el atributo href, inicialmente no verás los tipos porque tuvimos que iniciar el servidor de desarrollo. Porque Expo utiliza el observador de archivos del bundler para crear automáticamente declaraciones de ruta, que podemos ver en este archivo de tipos de expo autogenerado. Así que puedes ver como rutas estáticas, rutas dinámicas, todo eso. Y también puedes ver que Expo incluyó automáticamente este archivo en el ts-config. Así que TypeScript sabe que debe observar este archivo cuando estamos usando ese componente de enlace. Así que ahora volviendo al componente de enlace, verás que obtenemos las rutas autocompletadas. Cambia un nombre de ruta, por ejemplo, about a team, verás instantáneamente ese error de tipo. Así que esto es súper útil. Y podemos verlo simplemente en nuestro IDE. O, por supuesto, cuando estás ejecutando ese servidor de desarrollo, si tienes muchos archivos, y no lo captarás fácilmente en tu editor. Expo también admite rutas dinámicas. Así que simplemente vamos a crear una usando corchetes. Así que ahora cuando estamos usando el componente de enlace para enlazar a una ruta dinámica, Expo también lanzará un error si estás enlazando accidentalmente a una ruta dinámica con un parámetro incorrecto. Por ejemplo, ID aquí debería haber sido o ID en minúsculas aquí debería haber sido ID. Así que eso también es muy útil. Y además, ExpoRouter también viene con algunos hooks como UseSegments y UseRouter que te permiten tener aún más control sobre ese comportamiento de enrutamiento. Así que si usamos el router de UseRouter, podría, por ejemplo, decir como router.push, también utilizan los tipos que acabamos de generar. Así que siempre puedes estar seguro de que tus rutas son correctas incluso cuando estás redirigiendo o empujando todo ese tipo de cosas.
Ahora en Next.js. Next.js proporciona un enfoque similar. Así que para habilitar el enrutamiento de tipos, haz
3. Importando el Componente de Enlace y Enrutamiento en Next.js
Podemos importar el componente de enlace del paquete next link y reiniciar el servidor de desarrollo después de actualizar el archivo de configuración next. Next.js genera automáticamente las definiciones de ruta e incluye el archivo de tipo en la configuración de TS. La autocompletación está disponible para el atributo href, que puede ser una cadena o un valor dinámico. Next.js proporciona hooks como use router para la navegación estática y router.push para prevenir la redirección a rutas rotas.
asegúrate de que el experimental.typedRoutes esté configurado como true en tu archivo de configuración next. Y luego podemos importar nuevamente el componente de enlace, esta vez del paquete next link. Y dado que actualizamos el archivo de configuración next, solo tendremos que reiniciar el servidor de desarrollo, que ahora volverá a escanear nuestro sistema de archivos para generar automáticamente estas definiciones de ruta en el archivo de tipo next. Puedes ver aquí, se ve bastante similar a lo que acabamos de ver. Tenemos las rutas estáticas, rutas dinámicas, todo eso. Y
Next.js automáticamente incluye este archivo de tipo en el campo include en tu configuración de TS. Así que de nuevo, Tadascript sabe dónde buscar. Así que de nuevo obtenemos la autocompletación en el atributo href y el href puede ser nuevamente una cadena o este valor dinámico. Para
Next.js, solo tenemos que importar el tipo de ruta de Next si estamos usando un valor dinámico como este. Y
Next.js también viene con algunos hooks para la navegación estática. También como use router. Así que podemos usar router.push y mostrará todas las rutas de nuevo. Sí. Para asegurarnos de que no redirigimos a una ruta rota.
4. Desafíos con las Rutas Catch All
Las rutas catch all en el enrutamiento seguro por tipo plantean un desafío para hacer cumplir la seguridad de tipo en el atributo href. TypeScript puede no lanzar un error para las rutas que pueden estar rotas o llevar a páginas no deseadas. Ten esto en cuenta al trabajar con rutas catch all.
Uno de los inconvenientes o más bien un caso límite, supongo, o cosas a tener en cuenta son las rutas catch all. Porque en esencia, una ruta catch all es una especie de mecanismo comodín. Ya sabes, valida y coincide con cualquier ruta dada. Y esto es un desafío para el enrutamiento seguro por tipo, porque si cualquier ruta se considera válida, ¿cómo haces cumplir la type safety en el atributo href? Entonces, ya sabes, TypeScript se queda un poco ciego en esas situaciones. Porque no sabe si una ruta particular corresponde a una página dinámica o no. Entonces, ahora, podemos esencialmente escribir cualquier ruta. Y puede estar rota o puede llevar a una página donde no queremos que la gente vaya. TypeScript no lanzará ese error. Entonces, tiene sentido. Y es un comportamiento esperado. Pero solo asegúrate. Como, tenlo en cuenta
5. Importancia de los Tipos de Rutas y Características de Next.js
Antes de una construcción en producción, los tipos de rutas deben estar en su lugar para garantizar definiciones de tipo precisas. La generación de rutas es una tarea continua que debe ocurrir en el momento adecuado para evitar errores en tiempo de construcción. Cuando se implementan correctamente, las rutas seguras por tipo pueden mejorar la experiencia del desarrollador al prevenir enlaces rotos o rutas disfuncionales. La siguiente sección cubrirá características adicionales de TypeScript en Next.js que se relacionan con los paradigmas de renderizado y obtención de datos.
que esto podría suceder. Otra cosa importante a recordar, y esto es más para los autores, pero es cuando se generan los tipos. Porque antes de que se active una construcción en producción, que en la mayoría de los entornos de desarrollo ocurre en
CI, los tipos de rutas ya deberían estar en su lugar. Porque eso ayuda a garantizar que la construcción en producción tenga acceso a las últimas rutas y a las definiciones de tipo más precisas. Entonces, generar rutas no es solo una tarea única. Sucede de manera continua. Y necesita suceder en el momento adecuado. De lo contrario, seguirás encontrándote con estos errores de tipo en tiempo de construcción.
Entonces, para resumir la parte de ruta segura por tipo, cuando se implementa y se gestiona correctamente, realmente puede elevar la developer experience. Porque a pesar de los mejores esfuerzos del desarrollador, a veces solo necesitamos ese mecanismo de salvaguarda para asegurarnos de que no introducimos inadvertidamente enlaces rotos o rutas disfuncionales. Entonces, la siguiente sección será solo sobre Next.js. Porque Next.js también viene con características adicionales de TypeScript que se relacionan con los nuevos paradigmas de renderizado, paradigmas de obtención de data. Y cubriré los que actualmente están soportados. Pero solo para que lo sepas, se agregarán más características en el futuro para mejorar la developer experience aún más.
6. Soporte de TypeScript y Archivos de Configuración en Next.js
En Next.js, los componentes del servidor y los componentes del cliente tienen diferentes limitaciones. Next.js proporciona una comprobación de errores automática para la importación de useState en componentes del servidor y aplica la directiva useClientDirective para evitar el uso de código relacionado con el cliente en los lugares equivocados. Next.js también garantiza la seguridad de tipo al lanzar errores para opciones de configuración de segmento inválidas y requiere el atributo alt para los componentes de imagen para mejorar la accesibilidad. Los archivos de configuración en Expo y Next.js tienen diferentes enfoques para incorporar TypeScript, con Expo utilizando el gancho de requerimiento de nodo TS y Next.js soportando la comprobación de tipo a través de jsdoc en el archivo de configuración JS.
El primero está relacionado con los componentes del servidor y los componentes del cliente. No explicaré qué son los componentes del servidor y los componentes del cliente. Si no estás seguro, te recomiendo encarecidamente que leas la documentación para entender qué son. Pero en resumen, no siempre podemos usar como no podemos usar hooks de ciclo de vida o cualquier código relacionado con el cliente en componentes del servidor.
Entonces, primero, Next.js lanzará automáticamente un error si estás importando useState en un componente que no ha sido marcado con la directiva useClientDirective. Y esto es increíblemente útil porque no podemos usar hooks como useState o useEffect o cualquier cosa que debería estar en el cliente y los componentes del servidor. Entonces, en la mayoría de los casos, probablemente solo olvidaste hacer ese componente y los componentes del cliente. Así que esto ayuda a asegurar que no estamos olvidando eso, lo cual es bastante fácil de hacer. Y además, Next.js también lanzará un error de tipo si has usado la directiva useClientDirective en cualquier lugar que no sea en la parte superior de tu archivo. Como te dirá que lo muevas a la parte superior del archivo. Y este es fácil de olvidar o pasar por alto. Así que tener esa seguridad de tipo adicional ayuda a evitar estos errores confusos que pueden habernos costado muchas horas tratando de debug algo tan sencillo. Next.js también lanza un error si el o si tienes valores inválidos para las opciones de configuración de segmento. Así que las opciones de segmento de ruta te permiten configurar el comportamiento de una página, un diseño, o un manejador de ruta exportando variables. Y esas variables solo pueden tener valores específicos, como puedes ver aquí. Así que Next.js ayuda a asegurar que estás estableciendo estas variables exportadas a valores que son realmente válidos, lo cual también es muy útil. El soporte de TypeScript en Next.js también ayuda con la accessibility, por ejemplo, requiriendo que el atributo alt esté establecido en los componentes de imagen. Y esto significa que cada vez que usamos esos componentes de imagen, TypeScript te recordará que establezcas el alt que es, ya sabes, esencial para los lectores de pantalla y en general para la accessibility web. A menudo es algo que los desarrolladores pasan por alto. Así que tener este pequeño empujón ayuda a asegurar que, ya sabes, tu aplicación web es más inclusiva por defecto. Y por último, uno pequeño pero importante es los archivos de configuración. Así que los archivos de configuración deben ser un archivo JavaScript ya que no se analiza con Babel o TypeScript. Y la forma en que tanto Expo como Next.js manejan esto es un poco diferente. Así que en Expo para usar TypeScript en sus archivos de configuración como webpack metro o app, puedes usar el gancho de requerimiento de nodo TS, y primero tienes que instalar eso. Y esto te permite importar un archivo TypeScript en el archivo de configuración JS. Así que, por ejemplo, podemos crear un TypeScript en config.ts. Podemos importar el tipo de configuración de Expo y luego podemos escribir nuestra configuración como queramos y todo se auto completará y luego podemos importar este archivo en el archivo de configuración de la app usando TS node. Así que ahora todavía tenemos un archivo de configuración válido, pero también tenemos esa seguridad de tipo adicional al costo de tener un archivo adicional, pero eso puede valer la pena. Ahora en Next.js, así que el JS de configuración de Next.js te permite añadir un poco de comprobación de tipo en tu IDE usando jsdoc. Es esta línea de importación
7. Beneficios de TypeScript y Conclusión
Al habilitar el enrutamiento seguro por tipo, detectamos posibles problemas en tiempo de compilación, asegurando rutas robustas y enlaces no rotos. Muchos otros marcos de trabajo y herramientas aprovechan TypeScript para empoderar a los desarrolladores y ofrecer experiencias libres de errores a los usuarios.
que ves aquí. Puede que lo hayas visto antes también en otros
frameworks o herramientas. Así que ahora cuando lo importamos en la parte superior de nuestro archivo, también tenemos
type safety. Así que esto no requiere un archivo adicional, pero usa jsdoc. Para concluir esta breve visión general, hemos visto cómo Xfo y
Next.js utilizan
TypeScript para mejorar la
developer experience, lo que a su vez también mejora la
user experience. Y al habilitar, ya sabes, el enrutamiento seguro por tipo, podemos detectar posibles problemas en tiempo de compilación, asegurando que nuestras rutas son robustas, nuestros enlaces no están rotos, nuestras aplicaciones son más resistentes al error humano. Por supuesto, hay muchos otros
frameworks y herramientas que aprovechan
TypeScript ofrecen características similares. Para mí, simplemente muestra cómo el
ecosystem de desarrolladores está evolucionando hacia un futuro donde, ya sabes, los desarrolladores están empoderados por sus herramientas y podemos ofrecer experiencias libres de errores de tipo a nuestros usuarios. Así que gracias por unirte a mí hoy. Espero que haya sido útil. Y diviértete programando. Programando de forma segura, de tipo seguro, y siempre intenta ofrecer la mejor
user experience.
React Advanced Conference 2021
