Explorando la arquitectura TypeScript-first de los marcos modernos

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

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

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

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.

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