Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React

Rate this content
Bookmark
SlidesGithub

En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.
 
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
 
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
 
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.

131 min
28 Sep, 2023

AI Generated Video Summary

Esta masterclass cubre una variedad de técnicas de TypeScript, incluyendo la comprobación de tipos, la compilación de código, el uso del operador satisfies, la creación de mapeos de tipos, la manipulación de tipos con cadenas de texto literales y el uso de tipos opacos para la seguridad de tipos. También introduce Next.js y los Componentes de Servidor React para la renderización en el servidor y la obtención directa de datos. Se enfatiza la importancia de la comprobación de tipos y la configuración de CI, junto con el uso de los operadores satisfies y pick. Se exploran los mapeos de tipos personalizados y sus aplicaciones, así como el uso de tipos opacos y afirmaciones de tipos para una mejor comprobación de tipos. La masterclass también destaca los beneficios de prevenir errores indefinidos y el uso de opciones estrictas en TypeScript.

1. Introducción a la Masterclass de TypeScript

Short description:

Bienvenidos a esta masterclass. Voy a mostrarles una gran cantidad de técnicas de TypeScript que les ayudarán a ser más productivos y a crear mejores aplicaciones. Cubriremos temas como la compilación de código para detectar errores, el uso del operador relativamente nuevo satisfies, la creación y uso de mapeos de tipos, la manipulación de tipos con cadenas de texto literales, el uso de tipos opacos para la seguridad de tipos, la exploración de opciones estrictas en TypeScript, y la observación de mejoras de rendimiento para la importación de archivos JSON. La masterclass será interactiva, así que les animo a que escriban cosas y practiquen. Necesitarán Node, MPM y Git para instalar y ejecutar la aplicación. He proporcionado enlaces al repositorio de GitHub y a las diapositivas para su referencia. ¡Empecemos!

Así que bienvenidos a esta masterclass. Mi nombre es Muriste Baeijer, también conocido como el solucionador de problemas. Entre otras cosas, soy instructor MVP de Microsoft, solucionador de problemas, desarrollador de front end, y he hecho muchas cosas a lo largo de los años. Pero mi enfoque siempre ha estado en la industria del producto, muchas cosas a lo largo de los años. Pero eso no es sobre mí. Así que vamos a saltar rápidamente esa diapositiva. ¿De qué vamos a hablar? Bueno, voy a mostrarles muchas técnicas de TypeScript. Algunas de ellas podrían serles familiares. Algunas de ellas podrían no serlo. Pero todas son cosas de productividad que les ayudarán a ser más productivos y a hacer mejores aplicaciones. Así que para practicar esas cosas tengo una aplicación de muestra que es una aplicación de React, Next.js usando los nuevos React server components porque realmente me gustan. Realmente no necesitan saber React para nada de lo que vamos a hacer en este curso, aunque es un poco útil. Si no están claros sobre algo allí, simplemente pregunten. En su mayor parte, se trata del script de tipo, la tipificación y todo eso. Así que algunas de las cosas que dije que vamos a compilar código para detectar errores, vamos a usar un operador relativamente nuevo que satisface. Vamos a crear y usar mapeos de tipos, tanto usar los existentes como principalmente crear nuevos que pueden ser realmente poderosos. Usaremos cadenas de texto literales para manipular tipos. Usaremos tipos opacos para la seguridad de tipos. Veremos las opciones estrictas para el script de tipo y descubriremos que simplemente configurar estricto a verdadero es bueno, pero no tan estricto como puede ser. Puedes configurarlo aún más estricto. Veremos las mejoras de rendimiento para si estás importando archivos JSON y más cosas así.

Así que vamos a hacer muchos ejercicios. Todo esto se supone que es muy interactivo. Y en su mayor parte, recomendaría simplemente escribir cosas. Les proporcionaré enlaces a todo el código que voy a escribir. Pueden copiarlo de allí. Todo está en el repositorio de GitHub. Pueden ver los cambios y copiarlos de allí. Y en algunos casos, voy a hacer eso simplemente por cuestión de tiempo. Pero en su mayor parte, si eso es todo lo que hacen, serán mucho mejores copiando y pegando, lo cual la mayoría de los desarrolladores suelen ser bastante buenos. Y no mejorarán mucho en TypeScript. Así que, hacerlo realmente, cometer errores de tipeo, corregirlos va a ser mucho más útil. Así que, les recomiendo mucho hacer eso. Ahora, por supuesto, necesitamos algunos requisitos previos para poder instalar y ejecutar la aplicación. Nada extraño. Esperaría que todos estén preparados. Si están usando TypeScript, son desarrolladores de front-end o de Node.js. No tengo las versiones más recientes. Esta terminal muestra lo que tengo actualmente. Versión 16 de Node, si no me equivoco, la última es la 18, pero no hay necesidad de estar en la vanguardia. Pero necesitarán Node, necesitarán NPM, que viene por defecto al menos en casi todos los casos con Node. Y necesitarán Git para clonar el repositorio de Git. Pero incluso allí, podrían prescindir de Git y simplemente descargar un archivo zip. También necesitarán una copia del repositorio. Y más importante aún, las diapositivas porque verán muchas diapositivas como esta donde hay una pequeña muestra. Todos esos son enlaces. Y por supuesto, eso se abre en mi otra ventana. Aquí está. Así que verán que abre enlaces al repositorio o a commits específicos, describiendo un cambio específico allí. Déjenme mover esto de nuevo por un momento. No quería ir a la siguiente diapositiva. Quería abrir ese enlace. Este es la presentación de PowerPoint. Recomendaría mucho mantener eso abierto en el navegador. Y déjenme compartir eso en el chat aquí en Zoom. También ya lo añadí a la ventana de chat en Discord. Así que si tienen eso abierto, pueden ver un enlace a esto también. Así que esas son las diapositivas. ¿Dónde estaba el otro? ¿Dónde? Aquí. Ese es el repositorio. Así que lo añadí al chat también. Volveré a eso en un minuto. Pero asegúrense de abrir simplemente las diapositivas y luego pueden encontrar todos los otros enlaces allí. Así que solo para dar un poco de contexto, no necesitamos hacer eso ahora, ya lo hice. Pero creé la siguiente aplicación usando Create Next app, prácticamente tomé los valores predeterminados allí. Así que obviamente TypeScript, porque es una conferencia de TypeScript. Pero incluso si no lo fuera, todavía usaría TypeScript porque soy un fanboy de TypeScript. Usé ESLint, aunque en realidad no vamos a usar eso. Pero es el predeterminado. Usé Tailwind porque es el predeterminado. Y también me gusta Tailwind. Usé la carpeta de origen, no es tan importante, pero es una buena práctica. Más importante aún, dije sí a usar el enrutador de la aplicación, esta pregunta aquí. Si quieres usar React server components, tienes que usar el enrutador de la aplicación.

2. Introducción a Next.js y Componentes de Interfaz de Usuario

Short description:

Next.js tiene dos enrutadores diferentes: el antiguo con la carpeta de páginas y el nuevo con la carpeta de aplicación. El enrutador de la aplicación te permite usar los componentes del servidor React y los nuevos componentes asíncronos. Los componentes de interfaz de usuario de ShedCM se utilizan para hacer las cosas más bonitas. Cada ejercicio en el repositorio es un commit separado, lo que te permite ver los cambios realizados. Jean-Luc Picard es tu señal para tomar acción. La masterclass es práctica, con explicaciones seguidas de ejercicios prácticos.

Básicamente, Next.js tiene actualmente dos enrutadores diferentes, el antiguo con la carpeta de páginas y el nuevo con la carpeta de aplicación, que se llama enrutador de aplicación, que te permite usar los React server components y los nuevos componentos asíncronos allí y muchas capacidades geniales. Lo vamos a usar, no es el enfoque principal pero aún así es bastante agradable y dejé el alias de importación predeterminado allí. Luego, solo para hacer las cosas un poco más bonitas, utilicé los componentes de interfaz de usuario de chat-cn. No estoy seguro si estás familiarizado con ellos pero son como el nuevo chico en el vecindario para los componentes de interfaz de usuario y realmente populares en este momento. Realmente me gustaron. No son como los componentes tradicionales donde instalas una gran biblioteca y los usas sino que realmente instalas componente por componente y el código fuente para que puedas ir y modificarlos si quieres agregar estilos, agregar opciones allí, lo que te guste. Así que agregué esos y un montón de componentes.

En el repositorio también encontrarás muchos commits. Básicamente, cada ejercicio que hicimos es un commit separado. Así que si voy aquí por un minuto, hago esto un poco nervioso, haremos algo sobre el uso de solo lectura. Si haces clic en ese commit, verás exactamente aquí cuál fue el cambio que hice. Antes solo había una película con una foto y luego cambió a una versión de solo lectura de eso. Y algo que por supuesto, error de compilación o no por supuesto el error de compilación sin esa solo lectura. También verás a Jean-Luc Picard pasar. Esa es básicamente tu señal para hacer algo. Te lo recordaré, por supuesto, en este caso, aún no tienes que hacer nada. Pero todas las otras veces que aparezca. Es como, okay, ahora es tu turno de hacer algo. La configuración básica es que voy a explicar algo. Lo voy a hacer y luego tú tienes que hacerlo.

3. Configuración de la Aplicación y Visión General

Short description:

Para comenzar, clona el repositorio e instala las dependencias. Prisma ya está configurado con una pequeña base de datos. Abre Visual Studio Code para ver la estructura de la aplicación. Ejecuta el script dev para iniciar el servidor de desarrollo de Next.js. La aplicación es simple, con películas, un carrito de compras y un formulario de pago. Cambia a la rama de inicio antes de comenzar la masterclass. Asegúrate de que todo funcione sin problemas. ¿Algún problema? RJ Perry, avísame si puedo ayudar.

Es bastante práctico. Ahora, lo primero que necesitamos hacer es clonar el repositorio. Así que si vuelvo al repositorio por un momento, encuentro la ventana correcta, copio el enlace al repositorio, voy a la ventana del terminal y lo estándar, git clone con ese enlace y eso se clona. Y por cierto, quizás lo hayas notado por mi voz, pero tengo un poco de resfriado, un caso leve de gripe. Así que mis estornudos ocasionales, etc. Lo siento por eso. Intentaré silenciar a Mike si tengo que estornudar, pero podría ser un poco tarde. Así que hemos clonado el repositorio, simple, no es grande. Así que eso no va a llevar mucho tiempo. El siguiente paso es hacer un npm install para instalar las dependencias. Deberías ver lo usual de npm install, pero también he configurado Prisma con una pequeña database con algunos data aquí. Así que deberías ver algunos mensajes iniciales como los que ves en la pantalla aquí sobre espasmos. Así que deberías ver algunos mensajes iniciales como los que ves en la pantalla aquí sobre Prisma ejecutando una migración y luego ejecutando un comando de semilla y agregando algunos data allí. Así que vamos y hacemos esto, cambiamos a la carpeta correcta, npm install o npm ci. Mismo efecto. Realiza la instalación como debería configurando Prisma. Hoy sería bueno, ahí está hecho. Así que ves que está instalado en Prisma. Así que deberías ver ese Prisma generado clientes y ejecutando comandos de semilla. Realmente me dice que hay una actualización pero la ignoraremos.

Abre Visual Studio Code aquí. Solo una rápida visión general de la aplicación. Hay una carpeta SRC que contiene una fuente. Hay una carpeta de aplicación que contiene las páginas y el diseño general. Hay una carpeta de Componentes con componentes que escribí. Hay una carpeta lib con algunas cosas adicionales. Hay una carpeta de Servidor con algo de código del lado del servidor al que llegaremos. En los Componentes hay una carpeta de UI con los componentes de shadcm. Se instalan allí por defecto. Y luego un poco más arriba hay una carpeta Prisma con todas las cosas de Prisma pero, realmente no vamos a mirar eso. Si voy a los scripts de NPM, debería haber un script dev allí y puedo ejecutarlo y eso debería encender el Servidor de Desarrollo de Next.js y eso debería servir la aplicación en localhost puerto 3000. ¿Dónde fue eso? En algún lugar de aquí. Deberías ver la aplicación funcionando en localhost puerto 3,000. Ahí está.

Así que la aplicación es realmente simple. Puedes hacer clic en Películas, para subir un montón de películas. Puedes seleccionar la siguiente página. Puedes agregar una o más películas al carrito de compras. Hay un pequeño formulario de pago. Especifica algún nombre y algunas cuentas. Hay un poco de validation por aquí. Como el número de cuenta tiene que ser de cuatro caracteres de largo. Así que uno, dos, tres, cuatro. Puedo presionar okay. Y si vuelvo a Visual Studio Code, aquí abajo ves un pequeño mensaje sobre el pago. Puedes seleccionar películas por general, y eso debería funcionar, excepto no vayas a horror. Porque si vas a horror, será literalmente eso y obtendrás un error de runtime. Pero volveremos a ese error de runtime y veremos qué podemos hacer al respecto más tarde. Por ahora podemos ver que está funcionando. No hubo errores en absoluto en la consola. Así que todo se ve bien. Antes de comenzar la masterclass real, quieres cambiar a la rama de inicio. Así que déjame hacer eso. Puedes hacerlo yendo al menú de herramientas puedes usar los comandos allí o simplemente ir a este pequeño main aquí, la rama principal y seleccionar origin slash 00 start. La aplicación, ¿dónde está?, por aquí seguirá pareciendo exactamente la misma pero esto no es lo que todos los cambios que vamos a hacer. La rama principal era en realidad un poco más completa. Así que asegúrate de hacer esto antes de que realmente comencemos cualquiera de los ejercicios. Y como acabo de tener, puedes ejecutarlo en la consola o como hice desde Visual Studio Code y debería parecer que funciona como una aplicación normal de Next.js. Sin errores, nada. Así que la aplicación en ejecución y por favor ve y haz eso. Okay, todos están de vuelta. Así que noté que RJ Perry tuvo algunas dificultades. Tal vez solo tenga que mirar. Avísame si hay algo en lo que pueda ayudar. ¿Todos los demás tuvieron éxito en la configuración de la aplicación?

4. Verificación de tipos y compilación en Next.js

Short description:

Al configurar una aplicación Next o similar, es importante agregar scripts para compilar y verificar el código. Los entornos de desarrollo a menudo priorizan la velocidad, lo que significa que el compilador de TypeScript puede no ser llamado para verificar el código. Esto puede llevar a errores no detectados. SWC, utilizado en este caso, elimina los tipos y trata a TypeScript como JavaScript, lo que puede ocultar errores. Para abordar esto, se puede agregar un script para verificar manualmente el tipo de código. Otra opción es utilizar la función de observación de TypeScript, que vuelve a ejecutar automáticamente las verificaciones de tipo en los cambios de código. Es importante verificar el tipo de todo el código, no solo el código que se envía. Los errores de TypeScript pueden ser legibles, pero pueden requerir herramientas adicionales para mejorar la legibilidad. En este caso específico, hay un error con una incompatibilidad de tipo de argumento debido a una operación de selección que extrae solo un subconjunto de propiedades del tipo de película.

Sí, está bien. Prácticamente cada vez que configuro una aplicación next o algo similar lo primero que hago es agregar algunos scripts para comenzar a compilar y verificar el tipo de código. La razón es que la mayoría de los entornos de desarrollo están configurados para la velocidad y eso tiene sentido. Quieres una retroalimentación rápida, escribes algo de código, quieres guardarlo y quieres ver el resultado de inmediato. Y como resultado, cosas como ESBuild o SWC se están volviendo mucho más populares con el desarrollo de TypeScript.

Y en general, es como hacemos lo menos posible para hacerlo lo más rápido posible, lo cual tiene mucho sentido. Pero eso significa que, al menos en la mayoría de los entornos de desarrollo, el compilador de TypeScript en sí no se llama realmente en la base de código para verificar el tipo de código. Y podría haber errores allí y nunca lo sabrías. De hecho, hay errores en el código aquí y de hecho ejecuté algo del código justo ahora donde había errores, pero no llegamos a ver ninguno de esos en la consola o en cualquier lugar. Es como si no existieran. Bueno, en este caso, es una aplicación ExJS, por lo que utiliza swc, que está escrito en Rust. Y eso pretende compilar el código de TypeScript, pero en realidad, lo que hace, no hace ninguna verificación de tipo. Simplemente elimina todos los tipos y trata el TypeScript resultante como JavaScript moderno, lo cual es bastante cierto. Como si eliminas todas las anotaciones de tipo de TypeScript, es para el 99.9% solo JavaScript moderno. Y eso está bien, eso es bueno en la mayoría de los casos, excepto cuando hay errores. Y en algunos casos, notarás esos errores.

Como si voy a Visual Studio Code y detengo esto por un minuto, y comienzo el siguiente build para construir el código, debería poder ver uno de esos errores, pero no aparece hasta que realmente hago un build. Y eso es algo que no hago en el ciclo de desarrollo porque lleva demasiado tiempo. Así que ahora está haciendo un linting y verificando la validez, y ahí, realmente aparece con el error. Pero es bastante posible que tengas errores de tipo en tu código que en realidad no aparecen cuando haces un build. Por ejemplo, podrías tener errores de tipo en tus pruebas unitarias, y esas no están incluidas en los builds porque son pruebas unitarias que solo se usan en tiempo de desarrollo. Nunca se envían realmente con el paquete del cliente o del servidor. Por lo tanto, nunca se tocan ni se verifican como parte de esa etapa de construcción. Así que queremos algo que nos dé retroalimentación un poco más rápido que solo cuando construimos, y también queremos verificar el tipo de todo el código, no solo el código que enviamos. Entonces, una cosa que puedes hacer es esta. Puedes agregar un pequeño script. Lo llamo compilar o verificar el tipo, en este caso lo llamé compilar, pero en realidad no está compilando, es más una verificación de tipo. Y simplemente estoy llamando al TSC, al compilador de TypeScript, que tienes porque TypeScript está instalado, y en realidad tengo la opción noomit aquí solo por claridad, pero de hecho puedes dejar eso fuera porque ya está en el archivo de configuración de TS en casi todos los casos. Entonces, si agrego eso y dejo que vaya a la packagiation. No, no el siguiente build. TSC. No hemos hecho. Ahora puedo, ¿dónde está ese script, ahí está? puedo ejecutar el script. Y eso me dirá cuando hay un error de compilación. Un poco más rápido que hacer ese siguiente build. Aún así, es algo que tienes que hacer manualmente. En un programa grande, lleva un tiempo. Eso es lo que realmente hago. Pero en un programa pequeño con una base de código relativamente pequeña como esta, eso es bastante rápido. Entonces, lo que realmente agrego es un segundo donde uso una característica adicional de TypeScript watch. Así que agregaremos esa opción. Y eso aparece allí. Así que ejecutaremos este. Hace exactamente la misma acción de verificación de tipo, pero ahora permanece activa. Y cada vez que hago un cambio en el código, se vuelve a ejecutar automáticamente. Ahora, con un programa pequeño como este, esto es lo que normalmente hago en modo de desarrollo. Con programas más grandes, donde tienes un equipo grande trabajando en él, solo tienes una verificación de tipo como esa. Se vuelve un poco más lento, así que no hago esto. Lo muevo a un gancho de pre-commit o tal vez a un gancho de pre-push o algo así. Y también lo ejecutaré en el servidor. Pero vamos a verificar cuál es el error aquí. Entonces, aparentemente hay un error aquí, tarda un poco en aparecer. Pero hay algún tipo de argumento de tipo y hay una selección con un montón de cosas allí. No hay mucho algo más. Tienes que amar esos errores de TypeScript. Son realmente legibles. Larga lista de cosas. Esto en realidad lo hace un poco mejor. Tengo un plugin, una extensión de Visual Studio Code, que hace que el error sea más legible. Pero incluso allí, todavía es algo así como, ese objeto no es asignable a algo de esta forma. Entonces, ¿cuál es realmente el caso aquí? Bueno, si volvemos atrás. Entonces, esa Película es una prop que se envía a este componente. Eso se define aquí arriba. Y eso usa el mapeo de tipo pic de TypeScript para tomar un tipo de película y luego extrae solo un montón de propiedades. Entonces, no todos ellos. Así que esta película es solo un subconjunto de la forma completa de la película. Eso se envía a una Función de Agregar Película. Y esa Función de Agregar Película se define justo aquí y espera una película, que es una película completa. Todas las propiedades.

5. Verificación de tipos y configuración de CI

Short description:

En esta sección, nos encontramos con un error relacionado con la selección de un subconjunto de una película. El mensaje de error indica que el uso de un subconjunto de una película no coincide con el tipo de película completo, lo cual tiene sentido porque el carrito de compras solo necesita información mínima sobre una película. Para resolver esto, creamos un mapeo de tipos específicamente para el proceso de pago, definiendo las propiedades requeridas como 'ID' y 'título'. Esto asegura que la película utilizada en el proceso de pago se adhiere a este tipo específico. En resumen, hemos discutido cómo abordar un error de tipo, la importancia de la verificación de tipos local y la necesidad de integrar las verificaciones en la tubería de CI/CD, como GitHub Actions. Esto ayuda a detectar errores temprano y asegura la compatibilidad del código con componentes externos.

Ahora esa selección solo tomó un subconjunto. Entonces, básicamente, el error nos está diciendo que un subconjunto de una película no refleja toda la película. De hecho, en el carrito de compras, no necesitamos toda la película. No necesitamos saber cuál es el número de votos y la calificación y toda la descripción, y los carteles de una película. Solo necesitas saber qué película es, por lo tanto, la ID, y tal vez el título para imprimirlo. Así que vamos a crear un pequeño mapeo de tipos aquí, también, para solucionar eso. Tipo de película o pago. Este es el pic que agregué en la otra película y en este caso solo quiero la propiedad id y quiero el título. y qué está mal aquí y eso no debería ser una coma sino que debería ser una R. Entonces, ahora si digo que la película que necesitamos aquí es en realidad de ese tipo específico, reemplazo todos los tipos de la película, guardo. Y no hay errores, el compilador de TypeScript está completamente satisfecho. Antes de que realmente hiciera todo el flujo de pago, así que hicimos el flujo de pago con este error de tipo. Y aunque lo teníamos, no hubo errores en absoluto. Así que tener esta acción de verificación de tipo y observar esos errores que es por lo que normalmente los abro en VSCode en sí es bastante útil. Así que los scripts que agregué, el error que tuvimos cuando ejecutamos la verificación de tipos, la corrección que hice y el resultado es ningún error. Así que por favor ve y haz esto. Así que normalmente, como mencioné esto es una de las primeras cosas que haré cuando comience un nuevo producto. Configurar el compilador de TypeScript, verificar el tipo de código localmente. Pero, por supuesto, no quieres depender de cada desarrollador en el equipo haciendo todas las verificaciones localmente, ejecutando todas las pruebas unitarias, tal vez ejecutando prettier y teniendo todo eso cuidado localmente. Así que normalmente quieres hacer eso parte de tu CI. Así que en mi caso eso normalmente significa GitHub. Es bastante popular. Pero, por supuesto, no es la única opción. Así que la gente podría estar usando algo más. Pero solo voy a asumir GitHub por ahora. Quiero asegurarme de que se hagan todas las verificaciones de tipo, etc. Así que quiero ejecutar ese compilador de TypeScript, que acabamos de hacer localmente. Cada vez que creo una solicitud de extracción y tengo que verificar el servidor CI. Pero también quiero hacer otras cosas, como a menudo trabajaré con GraphQL y habrá otro equipo haciendo el trabajo de GraphQL. Así que dos repositorios separados y con bastante frecuencia me encuentro con un caso donde han hecho cambios en el servidor de GraphQL y nuestro código cliente compila Simplemente sucede que compila contra una definición de tipo desactualizada del servidor de GraphQL. Y lo mismo podría suceder con bases de datos, con open, con servicios de descanso, si usas algo como Swagger o OpenAI y haces generación de tipos de esa manera. Así que normalmente quiero regenerar esos como parte de mi CI y asegurarme de que compilo todo contra la última versión y detecto errores lo más rápido posible. Así que asumiendo GitHub por un momento, podría tener una acción que se vea algo así. Así que en cada push a main o cada pull request contra la rama principal, ejecutaré una serie de pasos, revisaré los códigos fuente, configuraré mis dependencias de NPM. Luego ejecutaré el compilador de Typescript, ejecutaré Lint, ejecutaré pruebas. En realidad no configuré ninguna prueba unitaria aquí, así que eso no funcionará. Ejecutar la construcción. Así que asegúrate de tener todos los artefactos, guarda esos artefactos correctamente, para que podamos reutilizarlos, no reconstruir todo el tiempo. No voy a hacer esto ahora, pero está en el repositorio. Así que si haces clic en la imagen, llegarás a ese script real que puedes usar como base. Hay mucho más que puedes hacer aquí. Normalmente tengo play write para pruebas de extremo a extremo. Lo incluiré aquí también. Y luego podría configurarlo con múltiples trabajos paralelos para acelerar un poco las cosas. Todo depende de cuán grande y complejo sea el proyecto.

6. Introducción a los Componentes de Servidor de React

Short description:

Los Componentes de Servidor de React permiten la renderización en el servidor de los componentes y la obtención directa de datos desde una base de datos. Tradicionalmente, React asumía que los componentes se volverían a renderizar en el cliente, requiriendo pasos adicionales para acceder a los datos. Esta complejidad puede ralentizar la aplicación.

Pero la siguiente cosa de la que quiero hablar brevemente son los React componentes de servidor. ¿Qué son, por qué son nuevos y por qué estoy tan emocionado con los React componentes de servidor? Porque tradicionalmente React ha sido puramente un entorno del lado del cliente. Y eso no es completamente cierto, porque también había renderización en el servidor con React, donde podrías renderizar componentes en el servidor y enviarlos al cliente. Pero React siempre asumió que todos esos componentes se volverían a renderizar en el cliente, serían re-ejecutados y básicamente harían todo allí. Así que la renderización en el servidor era una opción, pero era solo una optimización, para que no empezaras con una página en blanco y consiguieras algo allí. Pero eso también significa que si quieres obtener algunos datos de, digamos, una base de datos, bueno, tus componentes tienen que ser capaces de correr en el cliente, en el navegador, y no puedes acceder a la base de datos directamente desde un navegador. Así que normalmente tienes que añadir servicios REST allí o GraphQL o algo por el estilo para comunicarte con ese tipo de recursos. Y eso significaba pasos adicionales que tenías que seguir y esos hacen la vida un poco más compleja

7. Componentes de Servidor de React

Short description:

En una aplicación típica de React, los componentes se renderizan sin datos y utilizan un hook de efecto para obtener los datos requeridos. Este proceso gradual puede ser mejorado para un ciclo de retroalimentación más rápido. Los componentes de servidor de React permiten la renderización en el servidor, la obtención de datos directamente de una base de datos y esperar a que se carguen. El cliente recibe el resultado renderizado sin volver a ejecutarlo. Los componentes interactivos aún se ejecutan en el cliente, mientras que la obtención de datos y la renderización ocurren en el servidor.

y hacer que la aplicación funcione un poco más lento. En una aplicación típica de React, si necesitabas algunos datos, digamos, necesitabas una lista de películas como la que tenemos, tu componente se renderizaría sin tener ningún dato. Luego usaría, use un hook de efecto para desencadenar un efecto secundario, que en este caso es la obtención de esos datos de la película. Y luego, cuando eso se completara, actualizaría algunos estados locales, haciendo que el componente se volviera a renderizar con los datos de la película actual. Por supuesto, los enlaces a las imágenes sólo estarían disponibles entonces, así que entonces el navegador se pondría en marcha y diría, oh, bueno, quieres mostrar algunas imágenes para estos, déjame ir a buscarlas. Así que es muy, bueno, gradual. Hay muchos pequeños pasos antes de que realmente tengas todo en la página. Desafortunadamente, los navegadores son bastante rápidos y las redes en estos días tienden a ser relativamente rápidas. Así que no está mal, pero es bueno tener las cosas un poco más integradas. Una cosa que siempre me impulsa es un ciclo de retroalimentación rápida. Quiero tener retroalimentación cuando estoy desarrollando lo más rápido posible. Quiero tener retroalimentación para los usuarios finales lo más rápido posible. Para los usuarios finales porque hace que su experiencia sea más agradable. Si primero abres una aplicación web, renderiza una página en blanco, luego renderiza algo, bueno... muy poca UI y sólo entonces empieza a renderizar la UI real. Esa no es una experiencia tan agradable. Para el desarrollador, si tienes que pasar por muchos aros diferentes antes de que realmente veas algo que podría estar mal, eso no es tan agradable. Quiero tener una retroalimentación rápida. Ciclos cortos allí. Bueno, antes de React cliente, React componentes de servidor, los React componentes se verían más o menos así. Así que todos ellos se renderizarían en el cliente en el navegador y no en el servidor. Y estoy ignorando un poco la renderización en el servidor aquí, pero con la renderización en el servidor, como si tuvieras algo así, bueno, la aplicación se renderizaría en el servidor. Los componentes de la lista de películas podrían pre-renderizarse en el servidor, pero no obtendrían ningún dato. Así que básicamente las tarjetas de películas y etc., no se renderizarían. Todo eso básicamente sería delegado al cliente. Bueno, con los React componentes de servidor, podemos hacer eso mucho más directamente. Podemos hacer que la aplicación se renderice en el servidor. Obtiene datos directamente, digamos de una base de datos y el componente realmente espera a que esos elementos se carguen desde la base de datos. Puede manejar un solo alcance directamente. Renderiza todas esas tarjetas de películas. Y todo eso ocurre en el servidor. El resultado se envía al cliente, pero no se vuelve a ejecutar en el cliente. Así que el cliente es mucho más simple, sólo muestra eso. Ahora, eso funciona para esos porque no son interactivos. Es básicamente una lista estática. Sí, puedes navegar entre las páginas, pero toda esa navegación es interactiva. Bueno, esos en realidad tienen que correr en el cliente. Así que podría haber un componente de calificación de películas donde puedes darle un pulgar arriba a una película, pulgar abajo. O hay un editor de películas donde puedes cambiar detalles de la película. Esos serían componentes de cliente renderizados en el cliente. Pero todas las demás cosas, la obtención de datos, etc., se renderizan en el servidor.

8. Aprovechando los Componentes de Servidor de React con Prisma

Short description:

Los componentes de servidor de React permiten la renderización en el servidor de los componentes y la obtención directa de datos de una base de datos. React tradicional asumía que los componentes se volverían a renderizar en el cliente, requiriendo pasos adicionales para acceder a los datos. Esta complejidad puede ralentizar la aplicación. Los componentes de servidor en Next.js permiten la renderización en el servidor, la obtención de datos directamente de una base de datos y esperar a que se carguen. El cliente recibe el resultado renderizado sin volver a ejecutarlo. Los componentes interactivos aún se ejecutan en el cliente, mientras que la obtención de datos y la renderización ocurren en el servidor. Todo el código del lado del servidor solo se ejecuta en el servidor, no en el cliente, lo que lo hace seguro y reduce el tamaño de los paquetes del cliente. Para usar los componentes de servidor de React en una aplicación existente, se requiere TypeScript 5.1 o posterior.

Entonces podemos ver que, por ejemplo, si voy a la página de películas. Ahí, la página de películas. Este es un componente de servidor de React. Y a primera vista no hay mucho que decir, es solo un componente de React. Tiene un montón de marcado aquí, JSX. La única pequeña diferencia aquí es que esto es en realidad async, que es nuevo con el componente de servidor de React. Podemos tener componentes async. Y aquí en realidad llama a este componente getMovies o getMovieData, debería decir, y espera eso. Si miramos eso, getMovies, es una función async, pero ¿qué hace aquí abajo? En realidad usa Prisma y va directamente a la database para buscar data. Así que no hay solicitudes AJAX aquí, etc. Todo es mucho más directo. Si voy a mi definición de Prisma y cambio algunos campos, como podría cambiar la descripción general a descripción, entonces obtendré errores de compilación inmediatos aquí diciendo, bueno, la película con la que estamos trabajando, que es la película Servidores de Prisma ya no funciona. Ahora, si has trabajado con Next.js antes, podrías pensar, bueno, ¿no teníamos ya eso? Teníamos get server-side props, y en una página como esta, no sería async, pero podrías llamar a get server-side props y podrías ejecutar lógica de database allí. Y eso es cierto. Podrías, pero eso era solo para páginas. Si vuelvo a la aplicación por un momento, ¿dónde está? Ahí. Aquí tenemos la lista de géneros de películas y puedo seleccionar un género y decir, solo dame los elementos para eso. Y en parte, he dejado de ejecutar la aplicación. Eso comenzó de nuevo. ¿Está funcionando? Hoy sería bueno. Sí. Así que ahora puedo cambiar entre diferentes géneros. Así que esta lista de géneros obviamente no está codificada, necesito buscarla, pero eso es un componente en algún lugar de una barra de navegación, no una página. Bueno, en Next.js con GetServerSideProps solo podrías trabajar a nivel de página. Ahora puedo hacer eso a nivel de cliente. Entonces, si voy a la navegación... ¿Dónde está? Bueno, ese es el componente real. Así que este es un componente que se renderiza dentro de la barra de navegación. Todavía podría ser async. Todavía puede ir a las bases de datos de Prisma, solo encuéntreme todos los géneros, ordénelos, clasifíquelos, fíltrelos, haga lo que quiera hacer. Y luego se va a otro componente, que tiene la interacción Y luego se va a otros componentes, que tienen las cosas interactivas. Porque esto reacciona a los clics, comienza a filtrar, etc. Así que puedo hacer eso con cualquier componente que quiera, lo cual es realmente agradable. Y el GetServerSidePropsFromNext era específico de next. Esto es estándar React. Así que en este momento, Next.js es prácticamente el único marco que admite esto. En el futuro, esto será soportado por todos los demás también. Y es aprender una vez y ejecutar en todas partes. Así que los Componentes de Servidor de React, realmente agradables. Una cosa realmente interesante es que todo el código del lado del servidor en realidad solo se ejecuta en el servidor. No en el cliente. Así que todo ese código no se agrupa en el paquete del cliente. Lo que significa que si tienes que usar secretos para acceder a una database, claves de API, ese tipo de cosas es completamente seguro. Nunca se envía al cliente. También significa que los paquetes del cliente son más pequeños porque hay menos código enviado allí. Ahora, si quieres hacer esto con una aplicación existente, tienes que tener en cuenta que requiere TypeScript 5.1. Antes de TypeScript 5.1, TypeScript no era capaz de trabajar con componentes asíncronos tenían su propia definición de cómo se veía el componente de React. Parecía. Ahora, en realidad actualizaron eso para seguir las definiciones de tipo oficiales y son completamente capaces de trabajar con componentes asíncronos.

9. Componentes de Servidor y Cliente en React

Short description:

Los componentes de servidor se consideran componentes de renderizado en el lado del servidor, mientras que los componentes de cliente son componentes interactivos en React. Se utiliza la cadena de cliente para especificar un componente de cliente. TypeScript introduce el operador satisfies, que tiene varios casos de uso. Ahora nos centraremos en algunos conceptos puros de TypeScript.

Entonces, si tenemos componentes de servidor, probablemente también tengamos algo llamado componentes de cliente y los componentes de cliente son los que en React son interactivos y en realidad especificas que algo es un componente de cliente colocando esta pequeña cadena en la parte superior, use client. Podría parecer familiar en el pasado en JavaScript, teníamos esta cadena es un you strict que puso a JavaScript en un modo más estricto. Algo así como el predeterminado ahora, pero se apoyaron en eso, tomaron prestada esa idea y simplemente la pusieron en la parte superior. Así que cualquier cosa que no sea un componente de cliente como este se considera un componente de servidor. Así que aquí componente de servidor, como acabo de mostrar. Ahora vamos a usar eso, veremos un poco más de eso más tarde. Pero primero volvamos a algunas cosas puras de typescript y eso es un operador de typescript relativamente nuevo.

10. Entendiendo el Operador Satisfies en TypeScript

Short description:

El operador satisfies en TypeScript ayuda a identificar posibles errores en el código. Al usarlo, podemos detectar errores relacionados con propiedades faltantes en tiempo de compilación. Este operador es particularmente útil al trabajar con estructuras de datos complejas y seleccionar propiedades específicas. Asegura que las propiedades seleccionadas sean precisas y previene errores en tiempo de ejecución. Además, el operador satisfies proporciona una forma más confiable de definir el tipo de las propiedades seleccionadas, haciendo que el código sea más robusto y mantenible.

Entonces, el operador setupice. Quizás lo hayas visto. No es exactamente del mes pasado, pero es uno de esos operadores donde la mayoría de las personas piensan, hmm, bueno, es interesante, pero ¿dónde obtenemos la mayor información la mayoría de las personas piensan hmm, bueno, es interesante, pero ¿dónde lo uso? Y al principio, realmente no pude encontrar muchos casos de uso para él tampoco, pero resulta que hay algunos casos de uso interesantes porque tenemos una aplicación que compila, pero en realidad hay algunos errores potenciales allí. Permíteme introducir un error. Como está funcionando, podemos renderizar películas. Solo ve aquí. No hay problema, no hay errores, no hay errores aquí en la ventana de la consola tampoco. Todo eso funciona perfectamente. Esas tarjetas de películas son renderizadas por este componente de película y hay este promedio de votos. Como este. Pero ¿qué es un esfuerzo de voto si no sabes cuántos votos? Como este es un esfuerzo de voto de 8.7, pero si solo hay dos personas que alguna vez votaron por esto y hay un millón que votó aquí, entonces eso sesga un poco esos números. Resulta que la película, una película en realidad tiene. eso. Aquí podemos decir, también quiero el recuento de votos, cuántos votos se hicieron. Así que lo agregué aquí. Um, no hay errores de compilación. Así que vamos a usarlo. Um, así que incluiremos el recuento de votos aquí. Tantos votos. No hay errores de compilación. nada. No hay runtime errores en la UI. Incluso si reviso la consola. Hay un pequeño mensaje allí sobre la infra, pero nada más. Pero aún así, si miramos aquí, dice, bueno, corchete abierto voto en blanco. Así que no hay data real allí. Y podría decir, bueno, en realidad quiero hacer esto en un formato algo agradable. Así que haremos dos cadenas locales y porque estoy en los Países Bajos, quiero esto en el idioma holandés y hagamos lo mismo para ese promedio de votos. Y supongo que necesito un corchete más allí. Aún no hay errores de compilación, excepto ahora, viene con un error de compilación y no lo esperaba. ¿Por qué es eso? No se puede leer la propiedad. Interesante. Oh, en realidad no estoy mirando el script de compilación. Estaba mirando el runtime, que estaba esperando allí. Sí. No hay errores de compilación. Pero si voy a la aplicación, tal como acabamos de ver,. Ahora tenemos un error de runtime porque el recuento de votos en realidad está indefinido. Bueno, quiero ese error antes de ejecutar realmente la aplicación. Quiero saber de TypeScript que hay algo mal, pero no hay errores de compilación. ¿Cómo es eso? ¿Y cómo podemos solucionar eso? En la página de películas aquí, he importado esa tarjeta de película y he establecido los requisitos de la película para las tarjetas son básicamente la definición de esa propiedad de película y ese recuento de votos está allí, es un número. Sin embargo, en mis películas, si reviso los resultados, afirma que está devolviendo todo. Dice que el recuento de votos está allí, pero hay una fecha de lanzamiento, hay un camino de póster, hay un camino de fondo, descripción general del título, etc. Popularidad, hay géneros allí. Pero si miro lo que estoy seleccionando, solo estoy seleccionando estos campos de Prisma. Así que la ID, el título, la descripción general, el fondo y el promedio de votos. El recuento de votos no está aquí. Entonces, ¿cómo puedo hacer esto un poco más confiable? Bueno, ahí es donde entra el operador satisfies. Entonces, si en lugar de decir, este Select es de tipo MovieSelect, que es básicamente el tipo que Prisma generó, que puedo usar para el Select, puedo decir, no, satisface MovieSelect. Y ahora de repente, tengo un error de compilación. Y de hecho se queja de que voteCount no está allí. Entonces, ¿cuál es la diferencia entre, déjame deshacer este cambio, entre tener esto, donde digo que Select es de este tipo, o usando el Satisfieds? Bueno, en este caso, si miro el resultado de Select, y tengo que mirar aquí, es un poco difícil de leer. Pero hay un mapeo donde toma todas las propiedades del objeto Movie y las establece como de tipo Booleano. Entonces puedes seleccionarlos, sí o no, y hace que todos sean opcionales. Pero el resultado es que este objeto Select variable según TypeScript conoce todas esas claves. Entonces, ¿qué piensa TypeScript? Porque usamos ese Select aquí en el Find Many, piensa que este resultado es todas las claves que están listadas allí, si realmente los seleccionamos o no. Todo porque el Select es de un tipo específico. Ahora, si rehago mi cambio con el operador Satisfies, ahora el tipo de Select son solo las propiedades listadas allí. Y ahora TypeScript es consciente eso es donde devuelvo películas, solo contiene estas propiedades. Y la función está configurada para devolver todas ellas, incluyendo el voteCount, que no lo hace. Así que ahora puedo agregar voteCount y estamos listos para ir, sin errores. Ahora déjame comentar eso porque una cosa que también podrías preguntarte es ¿no puedes simplemente hacer esto? Esto también me da un error de compilación. La desventaja, sin embargo, es suponer que cometo un error de tipeo aquí, y agrego ese voteCount de nuevo. Ahora en realidad se queja de voteAverage, así que déjame hacer esto otro error. No puede ser, como esto.

11. Uso de Satisfies y Pick en TypeScript

Short description:

El operador satisfies en TypeScript nos permite verificar que un tipo es válido y contiene todas las propiedades necesarias. Al usar satisfies, podemos detectar errores relacionados con propiedades faltantes en tiempo de compilación. Sin embargo, hay limitaciones para satisfies, como no poder seleccionar propiedades específicas de un tipo sin copiarlas. Para solucionar esto, podemos crear un nuevo tipo y usar el operador pick para seleccionar solo las propiedades que necesitamos. Además, podemos hacer que todas las propiedades seleccionadas sean obligatorias utilizando otro mapeo de tipos. Esto asegura que obtengamos errores de compilación para cualquier propiedad faltante o inválida. En general, el uso de satisfies y pick puede ayudarnos a optimizar nuestro código y prevenir la obtención de datos innecesarios.

Estoy seleccionando algunos data completamente desconocidos, por lo que la propiedad no existe pero no hay ningún error, La propiedad no existe pero no hay ningún error, así que con el satisfies, ¿qué era, película? No quiero eso. ¿Dónde estaba, Prisma.movieSelect, creo. Espera un segundo. Vale. Así que ahora realmente se queja aquí, ya sabes, bueno, esta propiedad no existe. Así que satisfecho en casos como este nos da lo mejor de ambos mundos. No cambia el tipo, pero sí comprueba que el tipo es válido y que tienes todo lo que necesitas en él. Déjame guardar para que compile de nuevo. No hay errores de compilación y no hay errores de runtime y los esfuerzos de voto para el número real de votos se imprimen allí de manera agradable. Así que el cambio que hice usando el operador satisfied aquí. Así que por favor, haz esto, y después de eso, veremos cómo podemos hacer que este select sea aún mejor, lo cual es bastante agradable. Hemos solucionado en cierto modo el problema de que no estamos consultando suficientes data desde los clientes y si lo hacemos, entonces obtenemos un error de compilación inmediato, no un error de runtime, pero solucionar el problema de la otra manera donde estamos obteniendo más data de las que necesitamos sería bastante agradable también. Porque ahora mismo podría entrar y decir, seleccionaremos un montón de cosas y necesitamos ese vector path, pero también hay un poster path, así que también seleccionemos eso, y necesita una coma allí. Se ejecuta, compila bien, sin problemas. Si voy al navegador, se renderiza bien, pero estamos obteniendo más data de las que necesitamos. Ahora, ¿es esto terrible? No, pero hace que nuestra aplicación sea un poco más lenta, y si podemos prevenirlo fácilmente, eso es bastante agradable. Bueno, ahí es donde Satisfye se rompe. Satisfye básicamente dice, okay, estamos seleccionando data que está disponible al tener ese satisfied Prisma Movie Select, pero tenemos las claves que realmente necesitamos, y en lugar de usar el Satisfye para todo ese Prisma Movie Select, podemos hacerlo un poco más restrictivo y decir, bueno, solo queremos seleccionar los data que realmente necesitamos. Así que hacer eso no es tan difícil. Básicamente podemos crear un nuevo tipo. Hacer un pequeño mapeo de tipos, así que podríamos decir Movie2Select, por ejemplo. Es, y luego podríamos empezar diciendo, ¿dónde está eso? ¿Es ese Movie Select? Al menos escribamos esto correctamente. Movie2Select. Pondremos un Satisfye aquí. Y ahora básicamente tenemos exactamente lo mismo. Porque he creado el alias de tipo diciendo que tengo un tipo Movie2Select que simplemente apunta a Movie2Select, no es gran cosa. Pero ahora puedo decir, bueno, no quiero todo para Movie2Select. Quiero un subconjunto de eso. Y al igual que hice en las tarjetas de películas donde establecí, ¿o fue aquí? Tenemos un tipo de película, pero con Pick puedo decir, bueno, solo necesitamos estas propiedades. Puedo hacer algo parecido. Así que podría copiar esto y decir que vamos a hacer un Pick aquí. Pasar esas propiedades. Si puedo escribir Pick correctamente. Así. En realidad me dice, okay, PosturePath no debería estar ahí. Pero esto es algo así como, meh. Porque tuve que copiar todas esas claves de un componente a otro. Y ahora si entro en la tarjeta de película y cambio el número de propiedades que realmente necesitamos de una película. Tengo que actualizar esta lista también. Así que funciona, pero apenas es ideal copiar esos. En cambio, tenemos este tipo aquí, el MovieRequired de las tarjetas, que en realidad, me refiero a las tarjetas de películas, obtengo las propiedades del componente de la tarjeta de película y luego usando esta sintaxis de array con el nombre de la propiedad, película, obtengo el tipo real definido aquí. definido aquí. Así que este componente props básicamente dice, OK, ve y devuelve este tipo de props. Y luego con la notación de corchetes, puedes entrar en eso y obtener cualquier tipo hijo de eso. Así que miro la prop movie, que resulta ser la única, y obtengo el tipo de eso. Así que me gustaría reutilizar eso. Pero no puedo simplemente poner esto aquí, porque eso no es parte de cómo funciona pick. Pick si miras la sintaxis, toma un tipo y luego las k o las claves que quieres seleccionar de ese tipo. Pero con un simple keyOf podemos convertir este tipo en solo una colección de las claves. Y ahora si miramos movie2-select, son solo las diferentes propiedades que queremos. Así que de nuevo, posterPath es inválido. Ahora eso más o menos funciona, pero podría poner esto en falso por ejemplo, o podría eliminar algo más. Y eso significaría que esos no compilan. Déjame llamar a este. Porque eso es definitivamente inválido. Ahora, hay un error aquí en lo que estoy seleccionando, pero ese error solo aparece aquí en el tipo de resultado. Y me gustaría que fuera algo más inmediato. No quiero permitir falso, y el recuento de votos aquí no falta aquí. Porque si miro las películas para seleccionar, todas estas están definidas aquí como opcionales con un signo de interrogación o indefinidas. Así que puedo usar otro mapeo de tipos aquí. Decir, bueno, no quiero solo las partes opcionales. Quiero hacer que todas estas sean realmente opcionales. Así que añade todo esto en otro mapeo de tipos estándar. Y ahora las películas para seleccionar ya no son opcionales. Es como que todas son ID boolean, etc. Así que ahora el error de compilación está aquí. Diciendo, okay, esto no satisface realmente. Así que añade el recuento de votos entonces. Así que añade el recuento de votos de nuevo. Y eso realmente lo satisface. Y si pudiera poner PosterPath de nuevo, eso fallaría. Aún así, no es del todo agradable. Básicamente hay dos pequeños problemas que tengo. En primer lugar, puedo decir si el promedio de votos no debería ser seleccionado especificando falso porque este tipo de selección de películas, bueno, eso es un poco ilegible, tomemos este, no dice si eso debería ser verdadero, es Booleano. Así que puedo seleccionar si quiero seleccionar un campo o no. Así que al no seleccionar el promedio de votos, en realidad obtengo el error de compilación. Pero de nuevo, en algún lugar más abajo, y entonces tengo que tamizar todo esto y averiguar por qué hay un error de compilación allí. Así que esto funciona, pero es como, ¿podríamos hacerlo mejor? Déjame comentar este tipo. Por cierto, el segundo problema que tengo con esto, es como, si quiero entender qué es movie to select para el tipo, es como que tengo que ir e inspeccionar este tipo,

12. Mapeo de tipos personalizado en TypeScript

Short description:

Para crear un mapeo de tipos personalizado en TypeScript, puedes usar la palabra clave 'type' seguida del nombre deseado y la palabra clave 'is' para especificar el tipo. Esto permite un código más legible en comparación con el uso de 'get require', 'pick' y 'keyof'. Los mapeos de tipos personalizados se pueden utilizar para seleccionar propiedades específicas de un tipo y garantizar la comprobación de tipos. El sistema de tipos en TypeScript ofrece muchas capacidades, incluyendo bucles y condicionales, lo que lo convierte en una herramienta poderosa. Un ejemplo es el uso de Zot para crear esquemas de objetos o tipos para la validación. Al usar 'z.infer', puedes inferir el tipo de TypeScript del esquema. Aunque esta es una técnica avanzada, hay casos más sencillos en los que los mapeos de tipos personalizados pueden ser beneficiosos. Para experimentar con mapeos de tipos personalizados, crea un nuevo archivo y juega con diferentes tipos. El mapeo de tipos más básico utiliza la palabra clave 'type' seguida de un nombre y la palabra clave 'is' para especificar el tipo.

que es un poco difícil de leer. Tengo que mirar esto. Bueno, eso es relativamente similar. Tengo que tener en cuenta lo que hace 'pick'. Así que aquí hay un 'keyof'. Así que 'pick' toma todos estos, luego solo toma los que están listados aquí. Y luego 'require' modifica ese tipo de nuevo con ese signo de interrogación menos, que elimina la opcionalidad. Así que hay muchas cosas pasando aquí. Y si quiero entender qué está pasando, hay muchos detalles que mirar y el intellisense hace esto difícil. Pero lo que realmente quiero es que quiero es algo como esta tarjeta requerida de película, pero en lugar de tener los tipos número cadena, solo quiero 'true' allí. Sé que estos son los que necesito seleccionar. Ni siquiera quiero Booleano allí. Solo quiero 'true' allí. Así que podría simplemente copiar esto como una película para seleccionar es esto y luego seleccionar todos estos y decir que deberían ser 'true'. Comento esto porque tenemos la misma definición de tipo dos veces. No estoy seguro de por qué tengo tipo tipo. Creo que hice algo raro cuando estaba copiando y ahora tengo el error aquí diciendo, OK, esto es falso. Póngalo en 'true' y todo está bien. Tuve que publicar su ruta y eso daría un error de compilación allí. Pero ahora estoy de vuelta a, OK, he listado esas mismas propiedades allí. Entonces, ¿cómo podemos prevenir eso? Bueno, usando esa misma 'keyof' Lo que puedo hacer aquí es que podría decir, bueno, quiero o una propiedad en 'keyof' eso y quiero definir eso como 'true'. Así que ahora la película para seleccionar todavía se ve exactamente igual Pero se basa en las claves de lo que requiero. Así que elimina esto y tengo la comprobación de tipos. Vuelvo a la tarjeta de película, digo que quiero algo más, digo Realmente quiero eso ruta de la película ruta del póster que quería decir Ahora, inmediatamente obtengo el error de compilación aquí diciendo que el camino del póster está desaparecido. Añade eso y estamos listos para ir. No lo estoy usando realmente, lo quito, y luego obtengo el error de compilación de que estoy seleccionando demasiados data. Así que Con un mapeo de tipos bastante simple, personalmente, creo que esto es más legible que usar ese require, PIIG, KEOFF etc. Esto simplemente hace que sea mucho más claro ver lo que está pasando y obtener exactamente el mismo resultado. Estaremos haciendo muchos más mapeos de tipos personalizados como este. Así que la primera forma de hacerlo, con una combinación de algunos de los mapeos de tipos estándar, la alternativa, que creo que es un poco mejor, pero lo que prefieras, el resultado final es exactamente el mismo. Así que por favor, ve y haz eso. Y luego, mientras abro las salas de descanso, como, si puedo ayudar a las personas que estaban teniendo problemas para que la aplicación se ejecute mientras tanto. Y veamos si podemos solucionar eso. Y todos los demás pueden continuar con este ejercicio. Así que, nos vemos en un minuto. Estábamos haciendo un poco de mapeo de tipos personalizado antes. Y resulta que el mapeo de tipos personalizado es un proceso bastante interesante. El sistema de tipos en TypeScript en sí es un lenguaje de programación. Puedes hacer muchas cosas interesantes allí con los tipos. Así que solo quiero repasar algunas cosas y mostrarte algunas de las capacidades allí. Puedes usar bucles, condicionales. Eso lleva a algunas cosas bastante avanzadas. Y uno de los buenos ejemplos es, por ejemplo, si usas SOT. Tal vez estés familiarizado con SOT. Tal vez no. Pero es una forma en la que puedes crear un esquema para objetos o tipos y luego validarlos. Así que podrías tener algo como esto. Un esquema SOT con el primer nombre, apellido, edad. Y digamos con el primer nombre, podrías tener cosas allí. Como que debería tener un mínimo de dos caracteres de largo y un máximo de, digamos, 50 caracteres. Y la edad es un número y es opcional como esto, pero también no es menos que cero porque no puedes tener menos de 25 años y es menos de 125 porque nadie tiene 200 años. Cosas así. Pero bastante a menudo necesitas tipos y luego con algo como esto, con Z.infer, así que Z es el objeto ZOT, puedes inferir el tipo real de Typescript de ese esquema. Así que en ese caso, el usuario aquí consistiría en un primer nombre de tipo cadena, un apellido de tipo cadena, y una edad de un tipo número opcional. Ahora, eso es una cosa bastante avanzada si miras cómo se hace, pero hay muchos casos más simples donde puedes empezar a usarlos. Y solo quiero jugar un poco con eso, para que podamos ver algunas de esas cosas. Así que, vamos a crear un nuevo archivo aquí en la carpeta lib, type mapping.ts y podemos jugar con algunos tipos. El mapeo de tipos más simple es simplemente usar la palabra clave tipo y decir darle algún nombre, nuevo tipo es, y IntelliSense aparece con un corchete, pero de hecho podemos decir, es algún otro tipo, película por ejemplo o podría decir, es cadena Así que, eso es un mapeo de tipos realmente simple, pasa el ratón sobre el nuevo tipo dice, es solo una cadena o si digo película es realmente solo otro alias para el tipo de película así que realmente no nos compra mucho pero como vimos antes podemos abrir corchetes y podemos especificar un tipo aquí. Podría hacer x es un número o un número nulo y tenemos un nuevo tipo, como ese. Tipo de tipo fijo

13. Mapeo de tipos y lógica condicional en TypeScript

Short description:

Podemos recorrer las propiedades en la película y definir un nuevo tipo. TypeScript trata dos formas como el mismo tipo si tienen la misma forma, incluso si las declaraciones de tipo son diferentes. Podemos hacer que el tipo sea más general agregando un parámetro. También podemos agregar lógica condicional al mapeo de tipos, especificando diferentes tipos en función de los tipos de propiedad. Podemos usar 'extends' para determinar si un tipo de propiedad coincide con una condición. Podemos filtrar las claves en función de su tipo asociado utilizando la condición 'extends' en la propia clave. Usar 'never' nos permite eliminar propiedades no deseadas del tipo.

pero como vimos antes, también podemos empezar a recorrer, por ejemplo, las propiedades de una película, así que podría hacerlo con corchetes cuadrados para encontrar el nombre de la propiedad y luego decir id para prop en keys of movie y luego pasar algún tipo, por ejemplo, como este así que ahora he tomado todas las claves de la película y he definido el tipo como booleano y tengo un nuevo tipo, así que todas las propiedades que son conocidas del tipo de película están ahí, solo tienen un tipo diferente También puedo usar el tipo original si quiero así que empezamos con la película y usando la notación de corchetes cuadrados, puedo indexar en ese tipo, así que si especifico la propiedad en realidad toma esa misma propiedad, así que ahora el nuevo tipo es una copia de la película, pero es realmente una copia no solo una referencia original, pero efectivamente es lo mismo, porque TypeScript tiene un sistema de tipos donde dice que si dos formas son iguales entonces se considera el mismo tipo, aunque la declaración de tipo podría no serlo, lo cual es realmente agradable, como por ejemplo un lenguaje como C Sharp no tiene eso. Podrías tener una película objetos definidos con un tipo de película y podrías tener otro objeto definido con un tipo que tiene exactamente la misma forma pero una definición diferente, así que son semánticamente exactamente iguales pero TypeScript dirá sí, bueno, no puedes usar una película en lugar de la otra porque oficialmente son un tipo diferente TypeScript no lo hace, dice que tienen la misma forma, así que realmente son equivalentes entre sí, así que si es una forma diferente o no, no importa. Pero aquí podemos ver bien, podemos recorrer eso recorrer las propiedades y las claves en la película e indexar en el tipo de película pero en este caso todavía está codificado en la película así que supongamos que queremos hacer esto un poco más de propósito general no es un tipo muy útil suponiendo que lo sería, y queremos hacer eso podemos agregar, bueno, llamémoslo un parámetro y tradicionalmente verás algo como T allí y luego podemos decir agarrar las propiedades de T y ahora el nuevo tipo en sí no es nada útil, es un mapeo de tipos que todavía necesita un parámetro allí, así que podría hacer decir tipo Nueva Película es un nuevo tipo, y allí se especifican en películas así que esta nueva película cuántos errores tipográficos puedes hacer en una palabra, pero sigue siendo una copia pero ahora está parametrizado, así que también podría hacer algo como definir un tipo en línea aquí digamos que tiene un X de un número y un Y de un número y lo llamaremos ubicación y podemos ver la ubicación, x, y ahora esto todavía es bastante simple, tipo en línea y otro tipo de referencia, y solo hace una copia, así que no hay mucho punto en esto todavía y ahí está mi error tipográfico. Nueva película pero ahora podemos empezar a decir, bueno, si puedo recorrerlo puedo empezar a agregar cosas condicionales también así que si miramos esa nueva película, tiene propiedades de tipo número, cadena, y creo que eso es todo solo número y cadena, así que podría decir, bueno, si es una cadena quiero el tipo original, pero si es un número, quiero el booleano en su lugar así que podemos empezar a hacer lógica ahora ¿cómo haces lógica en los mapeos de tipos? Básicamente miras el tipo y determinas si algo coincide usando extends, así que podría decir esto se extiende cadena, y luego es como antes de la sintaxis, decimos, por ejemplo solo codificaré dos cadenas ahora, cadena o no una cadena y ahora, si miro la nueva película, básicamente he creado un nuevo tipo donde el id es, bueno, era número así que es la cadena, no la cadena, y el título es, ya no es de tipo cadena sino solo una cadena, así que en este caso podría decir que esto debería ser una cadena y esto debería ser quizás un booleano, así que he puesto una lógica aquí diciendo, bueno, si la propiedad es de tipo cadena, entonces va a ser una cadena o va a ser un booleano, y en este caso veremos que el id que era un número se ha convertido en un booleano el título sigue siendo una cadena, etc, y por supuesto en lugar de decir que debería ser una cadena, puedo convertir esto en esta propiedad también, así que solo mantén el original que resulta en exactamente lo mismo también podría, vamos a copiar esto para que lo mantengamos decir que solo quiero propiedades de tipo cadena así que y puedo decir obtendremos cadenas de películas son propiedades de tipo cadena película bueno, ahora por supuesto no hace eso porque acabo de hacer la copia del original así que ahora para cualquier cosa que no fuera una película todavía obtenemos booleano ahora con el mapeo de tipos de TypeScript, si quieres deshacerte de algo puedes usar nunca lo primero que la gente suele intentar es bueno, no quiero este booleano quiero que eso no exista así que pondré un nunca allí lo cual no funciona del todo porque ahora si miro las cadenas de películas dice que ID es nunca pero supongamos que realmente uso este tipo const m es y luego empiezo a llenarlo y luego tengo la ruta de fondo por ejemplo y todas las demás, pero si miro el error en realidad va a quejarse, bueno, necesita un ID pero ese ID se supone que es de tipo nunca entonces ¿qué vas a poner allí si es un nunca. Eso no es válido así que queremos una lógica como esta con esa propiedad extiende cadena y un nunca pero no lo queremos aquí con el tipo, en realidad lo queremos con la clave así que podemos hacer lo mismo usando la S, podemos decir bien si esto se extiende una cadena debería haber copiado eso también entonces realmente queremos la propiedad y si no es una cadena queremos nunca y ahora tengo un error tipográfico allí y estoy fallando en ver cuál es mi ¿signo de interrogación? ah correcto sí así que ahora si miro las cadenas de películas solo las claves que eran de tipo cadena todavía quedan y en realidad no necesitamos todo esto más porque parte de la condicional ya no es válida, solo lo estamos haciendo en la parte clave misma así que estamos filtrando las claves donde el tipo asociado con la clave es una cadena y de lo contrario lo reemplazaremos con nunca lo que hace que desaparezca y por supuesto podría hacer lo mismo diciendo solo queremos un número y tal vez el nombramiento del tipo es un poco extraño ahora cadenas de películas que son un número pero eso funciona o podríamos decir que esto es un booleano y eso nos va a dejar con un objeto vacío nada porque no hay propiedades booleanas allí

14. Haciendo el Tipo Más Flexible

Short description:

Podemos hacer el tipo más flexible añadiendo un segundo objetivo y especificando el tipo deseado. Esto nos permite seleccionar propiedades específicas basadas en el tipo especificado, haciendo el código más flexible y adaptable.

o podría hacerlo más complejo queremos booleano o cadena en cuyo caso volvemos a todas las cadenas porque no había booleanos, pero de lo contrario se combinarían así que si hago número o cadena obtendremos ambos de nuevo obtendremos prácticamente una copia del original de nuevo eso es bastante ordenado pero todavía está codificado a un tipo específico aquí así que ¿podríamos hacer eso otra variable así que ¿podríamos hacer algo como quiero esto pero quiero algo de un tipo especificado así que podemos entrar aquí y añadir un segundo objetivo así que añadimos un objetivo allí tipo B1 solo necesito algún nombre IsPropsOfType película especificada como número por lo que sólo selecciona el número o puedo decir, dame la cadena una vez y sólo obtengo la cadena, o podría decir, cadena o número o Cadena o número o booleano

15. Convenciones de Nomenclatura y Mapeos de Tipo Descriptivos

Short description:

El mapeo de tipos es como una función que se llama en tiempo de compilación para trabajar con tipos en lugar de objetos o variables. Las convenciones de nomenclatura para los mapeos de tipos deben ser descriptivas y significativas. Utilice nombres de variables y parámetros que hagan clara la finalidad del mapeo de tipos.

para hacerlo muy flexible Ahora bien, hubo una cosa que hice aquí, que normalmente no me gusta pero se ve mucho con las definiciones de tipo Normalmente ves estos tipos genéricos así definidos como T o K, una letra y realmente deberías pensar en un mapeo de tipos como este es una función, no una función que llamas en runtime sino una función que llamas en tiempo de compilación para trabajar con tipos en lugar de objetos u otras variables ¿Vas a nombrar tus funciones como dame algo con parámetro T o I o algo así o M para película No, probablemente lo nombrarás película y tal vez en el bucle usarás i Pero normalmente es más probable que uses índice Así que normalmente digo, bueno, esto no debería ser T, debería ser más descriptivo, así que lo refactorizaremos a T objeto, así que el tipo del objeto Te puedes preguntar, bueno, ¿realmente necesitamos esa T? Eso es un poco como una convención de nomenclatura húngara estamos hablando sólo de tipos aquí, así que decir simplemente objeto estaría bien excepto que eso kind of conflicts with the regular object type, so in that case lo dejaría en T Pero podría tener como aquí, tendría objetivos Tal vez fuente, algo así para hacerlo más claro. Verás algunos otros ejemplos más tarde donde he tomado mapeos de tipos de estándar o compartido utilidades de otros donde usan T y K y U y cosas así Cada vez que tengo que leer el mapeo de tipos ¿Cuál es el orden, qué significa qué de nuevo Usa nombres significativos. Realmente es solo un nombre de variable, un nombre de parámetro. Puedes hacer

16. Mapeos de Tipo y Funciones de Utilidad

Short description:

Puede usar parámetros predeterminados y asignar un valor predeterminado para hacer el código más flexible. La sintaxis para los mapeos de tipos es limitada en comparación con el lenguaje TypeScript completo. La depuración puede ser desafiante, pero con experimentación y ajustes, puede crear utilidades útiles que mejoran las capacidades de TypeScript.

lo que quieras con ello. Otra cosa interesante es como podrías decir, normalmente quiero usar esto con una cadena Así que quiero poder usarlo con esto. Tengo un parámetro predeterminado allí. Así que también puedes hacer eso Simplemente asigna un valor predeterminado aquí Entonces, si paso algo, cambiemos este a número Funciona con esto. Así que P1 recoge todos los números Si no paso nada, se tomará por defecto esto cadena. Así que P2 es en realidad todas las propiedades de la película de tipo cadena Útil para hacer que las cosas funcionen Así que es un poco acostumbrarse a la sintaxis porque es limitada. No es casi tan completa como todo el lenguaje TypeScript normalmente, donde puedes escribir sentencias if o usar condicionales en línea tal como puedes hacer aquí. Tienes que hacerlo de esta manera también es más difícil de debug si se vuelven más complejas porque no es como si pudieras simplemente debug a través de esto. Pon un punto de interrupción aquí, digamos que quiero un punto de interrupción aquí y luego lo recorres paso a paso. Al menos no estoy al tanto de ninguna forma de hacer eso. Así que es como si cambiaras cosas, pasas el cursor sobre ellas, ves cuál es el resultado como ¿qué obtengo de esto y luego ajustas de esa manera es un poco más difícil y es un poco limitado pero al final puedes hacer algunas utilidades realmente agradables con esto que ayudarán mucho a tu typescript y harán las cosas mucho más seguras en términos de tipos y más descriptivas y cosas como eso.

17. Mapeos de Tipo y Pruebas

Short description:

Así que tengo algunos ejemplos aquí, básicamente lo que acabo de hacer de copiar un objeto, copiar objetos de un tipo específico. En realidad, puedes poner condicionales aquí también. Las claves no siempre coinciden. Los objetos en JavaScript, las claves no tienen que ser cadenas, pueden ser cadenas, pueden ser números, o pueden ser símbolos. Otra cosa útil, si quieres crear mapeos de tipo como este, también quieres probarlos, al igual que con cualquier otro código. Útil para comprobar el tipo, tus mapeos de tipo reales. Así que por favor ve a hacer eso.

Así que tengo algunos ejemplos aquí básicamente lo que acabo de hacer de copiar objetos, copiar objetos de un tipo específico y básicamente combinar todas esas cosas, oh esto es realmente uno que olvidé mencionar. Lo que podría hacer ahora es si digo props de tipo, podría hacer esto digo y quiero eso de una cadena por ejemplo props de tipo, bueno, realmente no tiene mucho sentido poner cadena allí, esto está diseñado para pasar por un objeto y mapear las claves y ni siquiera estoy seguro de qué simplemente vuelve como cadena aunque dije que quiero las propiedades tipos que son de tipo número. Así que en realidad puedes poner condicionales aquí también así que de nuevo con el extends justo como lo hicimos con la lógica booleana, podemos decir extends algo. Podemos decir, bueno en este caso la fuente debería extender un objeto así que podría decir extiende objeto Resulta que prácticamente todo es un objeto así que eso todavía haría eso válido. Así que usar objeto objeto en sí no es muy útil. O podría usar llaves. Pero si realmente quieres asegurarte de que es un objeto lo que quieres usar es un registro y puedo especificar claves de cadena y no me importan los tipos de propiedad reales aquí así que especifico desconocido. Y ahora el props de tipo dice, bueno este no es válido porque la cadena no es un registro. Porque un registro es básicamente algo que tiene claves allí, en un tipo de prop de película o algún otro tipo. O digamos si hago un tipo en línea, este tipo de número Eso es todo válido. Cambia esto a cuatro. Eso es todo válido Esto no es Ahora esto no es del todo correcto, porque si miras un objeto en javascript, las claves no tienen que ser cadenas, pueden ser cadenas, pueden ser números o pueden ser símbolos. Así que si quieres hacer esto correcto debería ser cadena, número o símbolo Así que eso es más correcto Pero eso es un poco complicado y resulta que hay una forma interesante, no muy intuitiva de acortar esto, así que en lugar de poner esto en puedes hacer key de cualquier Lo cual interesantemente funciona a lo mismo, así que si miro los tipos de prop dice aquí es un registro de cadena o número o símbolo Si me preguntas, ser un poco más explícito aquí es más fácil de entender porque key de cualquier si nunca has visto eso va a ser como key de cualquier, ¿qué es un key de cualquier, eso podría ser cualquier cosa, ¿verdad?, resulta que no lo es, así que es correcto pero funciona a esto otra cosa útil, si quieres crear mapeos de tipo como este, también quieres probarlos al igual que con cualquier otro código, así que quieres asegurarte de que esto realmente causa un error, bueno no puedo ir y comprobar esto, porque entonces mi código no se compilará si yo, ¿todavía tengo mi tarea de compilación en ejecución debería, pero no estoy viendo el resultado por alguna razón vamos a reiniciarlo así que ahora, puedes ver estos errores así que, bueno no puedes comprometerlos, porque tu comprobación de tipo no funciona bueno hay algunos comentarios especiales que puedes añadir comentario añadir y luego ts y son un par. Como podrías decir tsignore, ignora la siguiente línea pero eso es como, simplemente ignóralo. Si guardo esto no tendré un error de compilación en realidad sí lo hago por algo más oh sí, eso no es uno completo, vamos a comentar esto así que no hay errores Si por alguna razón no da error no obtendré un error de compilación tampoco así que si yo quitara esto todavía está bien, así que para algo como esto una cosa mejor es poner en expect error allí Si lo guardo me dará un error de compilación porque esta siguiente línea no causa un error La condición de nuevo encontró cero errores. Esto debería dar error y da error, así que estamos bien Útil para comprobar el tipo tus mapeos de tipo reales

18. Haciendo los Mapeos de Tipo más Fáciles de Leer

Short description:

Así que acabo de tener una pregunta interesante. ¿Cómo puedes filtrar en propiedades de sólo lectura? Todos estos mapeos de tipo son agradables, pero resulta en un problema. Son muy difíciles de leer y entender los tipos. Resulta que podemos hacerlos mucho más fáciles de leer. Podemos hacerlos mucho más fáciles de leer añadiendo otro mapeo de tipo llamado Resolve. Básicamente sólo hace una copia del objeto original. Así que ahora es mucho más fácil ver la forma exacta del objeto. Este mapeo de tipo funciona muy bien y puede manejar estructuras anidadas de objetos también. Es una pequeña utilidad que hace la lectura de tipos más fácil.

Por favor, ve y haz eso Sólo una pregunta interesante. ¿Cómo puedes filtrar en propiedades de sólo lectura? Como aquí donde filtramos en un objetivo específico Filtrar en sólo lectura, y realmente no lo sé Como puedes hacer mucho. Es bastante probable que sea posible pero no sé cómo. Así que si todo el mundo si alguien más lo sabe, por favor háganoslo saber Todos estos mapeos de tipo son agradables pero resulta en un problema y esos son muy difíciles de leer y entender Si vuelvo a VS Code por un momento Vamos a ir a esa página de película Escribe esto un poco diferente Pon en la definición de tipo como esto antes y volveremos a Usando esa definición Si miro la selección de películas Es un poco difícil ver lo que está pasando Luego añadimos otro montón de cosas como requerido y seleccionar encima de eso y si miro la película para seleccionar por sí misma Eso es bastante legible. Puedo ver que hay un montón de propiedades y todas son booleanas Y si voy al objeto select que se define como película para seleccionar, que es legible Si voy aquí. Es como ok, es requerido de seleccionar de algún tipo que no puedo ver lo que es Que toma otro default-args y luego hay un montón de, que supongo que son nombres de claves Entonces, ¿qué se supone que es esto? Y el resultado de eso es, si hay algo mal por ejemplo, obtienes errores, que es algo así como Bueno en este caso es relativamente fácil de ver en la parte superior Falta el promedio de votos. Pero a menudo vas de caza a través de rastros de pila como este donde obtienes Oops, se ha ido, donde obtienes una descripción otra con requerido seleccionar, blahblahblah ¿Qué está pasando? ¿Qué está mal? Resulta que podemos hacer esos mucho más fácil de leer. Y lo interesante, el problema para esos mapeos de tipo, hacen que los tipos sean difíciles de leer es añadir otro mapeo de tipo Es uno que encontré que luego de la cámara de, ¿qué era? Sí, de Effective Type Scripts justo allí, creado. Y básicamente creó este mapeo de tipo resolve, que casos especiales de funciones Pero aparte de eso, si excluyes funciones es básicamente esto. Básicamente sólo hace una copia del objeto original Así que si copio esto de las diapositivas por un momento y lo pondremos en Mapeos de Tipo, y exportar esto Puedo entrar y envolver todo esto en otro más resolver, con e minúscula y queremos que resuelva eso ¿por qué no resuelve, ahora sí así que si paso el ratón sobre la película para seleccionar, parece lo mismo que antes vemos todas las propiedades con el tipo de booleano pero ahora si paso el ratón sobre la selección de películas también vemos la forma exacta que se supone que debe tener lo siento, aquí abajo, la forma que se supone que debe tener y la forma que tiene. No vemos todo el tipo mapeos, toda la parte de definición, que vimos anteriormente así que ahora es mucho más fácil de ver, ok tenemos un id, título, descripción general y no importa qué camino, se llama SelectorPathVoteCount y esperamos id, título, etc, VoteAverage, y VoteCount así que, falta el VoteAverage que es por supuesto porque comenté eso así que, es un mapeo de tipo bastante simple pero funciona muy bien por supuesto otro caso donde, bueno, tiene nombres genéricos muy simples tiene un pequeño problema con esto, que no se muestra porque estos son un objeto relativamente simple pero si te metes en objetos anidados, se vuelven mucho más difíciles de leer y no ves todas las partes anidadas pero lo genial es, puedes hacer estos recursivos así que puedo decir, bueno, ve a resolver ese tipo también ve a resolver recursivamente y aunque tengas estructuras profundamente anidadas de objetos, te va a mostrar exactamente cómo se ven y eso también incluirá sólo lectura cosas opcionales como esa así que, realmente útil para tener y hace las cosas mucho más fácil y podemos hacer lo mismo ¿dónde estaba mi mapeo de tipo aquí? si miro, estos son que son difíciles de leer, bueno ninguno de estos es realmente difícil de leer porque estos son todavía los tipos normalmente se vuelven difíciles de leer si miras un objeto de ese tipo así que, p2 y luego dice aquí puedes ver que aparece me quedé Moví mi ratón un poco demasiado, puedes ver que aparece con lo que se espera, bien algunas propiedades de tipo y luego muestra exactamente cómo está definido en lugar del resultado final así que si hago lo mismo aquí y envuelvo esto, ¿qué es P2, en resultado y ahora si reviso el error me dice exactamente lo que se requiere así que una pequeña utilidad agradable, vamos a comentar esto así que, no nos da un error de tiempo de compilación todo el tiempo

19. Uso de Tipos Opacos en TypeScript

Short description:

El uso de tipos opacos en TypeScript nos permite diferenciar entre tipos de datos primitivos similares, como las cadenas de texto, y hacerlos comprobables por tipo. Esto ayuda a prevenir errores y proporciona una mejor comprobación de tipos. Al crear mapeos de tipos personalizados, podemos especificar los tipos esperados para cada propiedad, como cuentas, cantidades y nombres. Sin embargo, este enfoque todavía permite desajustes y no proporciona la comprobación de tipos deseada. Para abordar esto, podemos usar el tipo opaco, que combina un tipo con un símbolo de solo lectura para crear un tipo único. Esto asegura que los tipos con formas similares no se consideren iguales, proporcionando una comprobación de tipos más precisa.

por favor por favor, ve y añade este resolve y ve la diferencia que hace en Intellisense y en los mensajes de error verás así que todos están de vuelta, estaba haciendo una búsqueda rápida para filtrar solo lectura, pero aún no he podido encontrar nada así que otro mapeo de tipos útil que a veces uso es el uso de tipos opacos La razón de que sea útil es que al final normalmente nos quedamos con tipos básicos como un nombre es una cadena de texto, un número de casa podría ser una cadena de texto una cantidad podría ser un número, cosas así y es relativamente fácil cometer errores allí y pasas digamos un nombre donde pretendías pasar un número de cuenta y simplemente porque ambos son tipos de cadena de texto TypeScript realmente no se da cuenta y de hecho nuestro código sufre de un problema así Así que si yo abro la consola de desarrollo por un momento y vamos a ¿dónde está mi ventana del navegador? Ahí está, lo que hice brevemente al principio añadí algunas películas a mi carrito de compras e hice el check out y especificé algún nombre y un número de cuenta e hice el check out Check out completado, sin problema y luego digo ver aquí un mensaje, check out para 1234 este era el número de cuenta que añadí y dice cargando cuenta, pero ahí obtenemos mi nombre la frase ya sugiere que debería ser un número de cuenta y enviando películas al usuario Riz lo cual tiene sentido ¿de dónde viene eso? Hay una parte del servidor el carrito de compras de check out aquí y hay esta función checkout ShoppingCard que se llama que toma una cuenta un nombre y una propiedad de cantidad, una cadena de texto, cadena de texto, número y luego imprime ese mensaje básicamente llamando a unas pocas funciones aquí, charge account que dice cargar una cuenta, de hecho con un número de cuenta por una cantidad específica así que aunque dice cuenta imprime mi nombre y luego envía la película a un nombre y allí también recibí mi nombre. Así que parece que hay un par de cosas mal Ahora, primero que nada personalmente no soy un gran fan de pasar props así porque si miro donde esto es realmente usado está en un diálogo en el cliente pasas y hay solo un montón de propiedades y es realmente fácil hacer algún tipo de desajuste y de hecho cambié el nombre y la cuenta porque si miro la definición los parámetros son cuenta nombre cantidad pero aquí hice nombre cuenta cantidad pero TypeScript dice que esto es una cadena de texto, esto es una cadena de texto así que una cadena de texto coincide con una cadena de texto, así que realmente no importa en términos de tipo todo coincide por supuesto que está mal y realmente me gustaría algunos errores aquí tengo una función de envío de películas aquí aquí está la definición y espera el nombre de tipo cadena de texto pero aquí estoy pasando la cuenta, no el nombre así que, algo así como, bueno error fácil de cometer, pero difícil de detectar y sin comprobación de tipos así es donde estos tipos opacos van a ayudar nos permiten tomar primitivos tipos de datos, como cadena de texto, números, booleanos, etc y hacerlos, bueno, comprobables por tipo diciendo que una cadena de texto no es igual a otra cadena de texto podemos diferenciar entre el nombre y el número de cuenta, en lugar de tener ambos como cadena de texto los haremos tipos realmente diferentes ahora tu primera oportunidad podría ser crear un mapeo de tipos, entonces diremos tipo cuenta es una cadena de texto y diremos que esto debería ser una cuenta y esto debería ser una cuenta y haremos lo mismo con cantidad así que esa cantidad debería ser una cantidad eso debería ser cantidad y eso debería ser un número no una cadena de texto y eso nos deja con nombre crear un tipo de nombre lo haremos esto y esos así que ahora lo hemos hecho más explícito pero al final esto no nos compra nada si voy y reviso mi paso de compilación todavía no tengo errores y todavía estoy pasando aquí una cuenta a algo que espera un nombre la razón es que TypeScript compara no el nombre de tipo real como cuentas de cantidades, nombre, cuenta, etc pero simplemente dice bueno el nombre es una cadena de texto, la cuenta es una cadena de texto así que las formas realmente coinciden así que queremos algo que es esa forma, todo bien, pero no es así que ese es el error un tipo que encontré en internet hace unos años que he estado usando desde entonces es este opaco, y básicamente dice ok, le daremos un tipo y añadiremos a eso, esta segunda parte esta parte diciendo que añadiremos solo lectura tipo, que es ese símbolo y le daremos algo específico y si esos no coinciden, entonces los tipos en realidad no se consideran para ser los mismos. Ahora, esto parece un poco raro especialmente si miras esto, es declare const tipo, un símbolo único declare const sin asignación en realidad, y luego se usa aquí. Esto es puramente un constructo de tiempo de compilación en tiempo de ejecución eso no existe. No hay una propiedad de tipo subrayado allí para comprobar. Así que es lo que sea tipo que pasas como el primer argumento del tipo genérico opaco es lo que es así que pasas cadena de texto, número, cosas así eso. Teóricamente podrías pasar un objeto aquí así que a podría ser, podría ser una película, pero en este caso no tiene mucho sentido, pero técnicamente eso es completamente legal. Así que déjame

20. Uso de Tipos Opacos y Afirmaciones de Tipo

Short description:

Este es un caso en el que los tipos genéricos A y B necesitan mejores nombres. Utilizamos la palabra clave opaca y asignamos tipos específicos a las cuentas, nombre y cantidad. Esto asegura que se asignen los tipos correctos y previene errores de tiempo de compilación. Las afirmaciones de tipo también se pueden utilizar para validar los tipos. Al crear una función de afirmación de tipo, podemos verificar si un valor es de un tipo específico y lanzar un error si no lo es. Esto proporciona una comprobación de tipos más fiable y previene posibles problemas.

solo copia esto y vamos aquí y este es uno de esos casos en los que los tipos genéricos a y b bueno, son realmente parámetros, pero ¿qué es a? Siempre tengo que mirar así que el primero es el tipo real, así que vamos a darles un mejor nombre, el tipo o tal vez solo tipo y b es un nombre que usaremos y ahora usaremos opaco en estos quise copiar eso así que todos estos se vuelven opacos y tenemos que darles algún tipo y así esto será la cuenta esto será el nombre y esto será la cantidad y ahora de repente en ese envío de películas vemos esperábamos el nombre pero estamos pasando la cuenta y ya no son asignables debido a eso tipo de subrayado siendo incompatible así que ahora realmente obtengo un error de tiempo de compilación allí, así que cambia esto a nombre y esa parte es mejor todavía tenemos otro error de compilación aunque y en nuestro checkout carrito de compras ahora dice, hay un error aquí y aquí dice el nombre es una cadena y la cadena no es de tipo cuenta. Entonces, en primer lugar, el orden estaba mal así que vamos a arreglar eso era cuenta nombre cantidad, así pero eso todavía no soluciona el problema porque todavía piensa bueno, la cuenta es de tipo cadena y espera algo de tipo cuenta la definición justo aquí así que realmente necesitamos validar que ese es el caso Entonces un par de formas podemos hacer que este código pase una forma, es déjame exportar estos puedo usar un costo y decir como cuenta como nombre lo mismo aquí como cantidad así que no más errores de compilación pero déjame romper el orden de nuevo déjame romper el orden pero ahora déjame también voltear estos es un poco más fácil de atrapar si lees que el orden está mal porque ahora estoy diciendo que la cuenta debería actuar como un nombre que parece extraño, pero el tiempo de compilación está perfectamente contento con ello no es tan confiable, así que hay una mejor manera de hacerlo y eso es con afirmaciones de tipo déjame poner estos de nuevo en el orden correcto y deshacerme de estos así que volvemos a tener errores de compilación y vamos a crear una afirmación de tipo ¿cómo se ve una afirmación de tipo? es una función, y esto tiene que ser una función, no puede ser una lambda una función de error gordo función de exportación le daremos algún nombre, normalmente se llaman assert el tipo que quieres afirmar, así que assert cuenta toma algún valor que será el valor original que esperamos así que en este caso una cuenta siempre tendrá que ser algún tipo de cadena y luego, la forma en que esta función se declara es algo especial, en lugar de lo que normalmente haces es decir como un booleano o algo así no vamos a hacerlo exactamente así, ahora vamos a hacer assert ese valor es una cuenta y luego y luego añadiremos algo de cuerpo así que esta sintaxis dice que si esta función pasa, entonces el valor que pasamos puede ser considerado un tipo de cuenta y pasar significa que esto no lanza una excepción así que el cuerpo de esto debería lanzar una excepción si eso cuenta no es una cuenta válida así que haremos algo como si y luego haremos por ejemplo tipo de valor no es una cadena o no, eso no es lo que quiero no es para

21. Afirmaciones de tipo y opciones estrictas en TypeScript

Short description:

En TypeScript, las afirmaciones de tipo pueden mejorar la seguridad de tipo al comprobar los valores en tiempo de compilación y en tiempo de ejecución. Al usar afirmaciones de tipo, puedes detectar errores relacionados con propiedades faltantes y asegurar la corrección de tipo. Las afirmaciones de tipo se pueden usar junto con funciones de validación de tipo o por sí solas. Proporcionan una forma de validar tipos y prevenir posibles problemas. Además, TypeScript ofrece opciones estrictas que van más allá del modo estricto predeterminado. Estas opciones pueden ser útiles para imponer una comprobación de tipo más estricta y prevenir ciertas prácticas de codificación.

a verdadero, nuevo, error, cuenta inválida ahora si te estás preguntando por qué estoy comprobando la longitud de cuatro es porque en mi diálogo de pago estoy usando un esquema, ¿dónde está aquí? y he especificado aquí que la cuenta debe ser exactamente de cuatro dígitos de longitud y el nombre pasado debe tener al menos dos caracteres de longitud por eso se me ocurrió esta comprobación así que ahora puedo tomar esto y ahora mismo dice aquí que es de tipo cadena pero si llamo a esta función de afirmación de cuenta, y paso esa cuenta. Ahora de repente, si compruebo el tipo aquí, se considera lo que quería mostrar, se considera una cuenta porque ha pasado esta función sin ningún problema, sin ningún error de compilación así que puedo hacer lo mismo con el nombre y el monto total déjame copiar esto afirmar nombre y el valor es r al cuadrado longitud nombre inválido y este era un monto y ese valor debería ser un número cambia esto a un número y eso es en realidad suficiente ¿no lo capté porque estamos comprobando si la longitud del valor es mayor que 2 entonces estamos lanzando un error si el valor del nombre es menor que 2 sí, en efecto, tienes razón sí así que si es 2 o más grande es válido así que deberíamos lanzar un error si no es válido así que ahora puedo volver aquí y básicamente hacer lo mismo para los montos y el nombre nombre y la afirmación monto así que eso debería ser monto total y eso debería ser data.nombre así que ahora es seguro la forma en que comprueba todo y no es solo mi código ¿todavía tengo un error de tipeo en algún lugar seguro oh no debería haber puesto estos aquí eso es otra nueva característica de Next nueva característica de Next junto con los componentes del servidor, puedes declarar código como este con el usuario servidor, por lo que tiene que ejecutarse en el servidor. Lo que hace que sea asíncrono y no queremos ir al servidor para eso, así que vamos a moverlos al archivo de mapeo de tipos esto no tiene un servidor de usuario, por lo que puede ser cliente o servidor hacer lo mismo con esos tipos no escuchando conectado así que esos necesitan ser importados de otro lugar ahora en todas las importaciones faltantes eso debería solucionar todos esos y eso debería solucionar esos así que ahora funciona de nuevo puedo agregar algo al carrito, hacer un pago y todo debería estar bien Vamos a DevSteps ahora a ver el formulario de pago revisar la cuenta pero si por alguna razón todavía tengo esos errores déjame cometer un error intencional el nombre como el primero de nuevo y luego decir afirmaremos que el nombre es una cuenta y la cuenta es un nombre, lo cual es un poco extraño solo para que pase la compilación Ahora lo bonito es que verás que en realidad tiene implicaciones en runtime. Así que voy a pagar de nuevo Ahora obtenemos la cuenta inválida, porque ese error es incorrecto, porque en realidad comprueba la cuenta contra el valor del nombre y viceversa, así que obtenemos tanto la compilación como la type safety en runtime Déjame deshacer esto está bien de nuevo, déjame comprobarlo dos veces Así que estamos bien de nuevo Así que es bastante ordenado, cosas como esta pueden hacer la type safety mucho mejor no estoy seguro de qué está apareciendo allí Así que de nuevo un mapeo de tipos relativamente simple, pero añade mucho de type safety. Afirmaciones de tipo como esta Bastante a menudo verás esas afirmaciones de tipo junto con funciones de validation de tipo, que simplemente devuelven verdadero o falso si algo coincide, lo cual en realidad tengo en las diapositivas pero no tienes que usar ambos, como aquí tengo un chequeo de tipo, esta función es cuenta que devuelve verdadero si el valor es una cuenta y luego la afirmación de tipo en realidad usa eso. Pero si no necesitas ambos entonces solo escribe la afirmación como acabo de hacer, en este caso dejé los argumentos de las líneas como cadenas simples y solo los uso en el back-end que funciona igual de bien arregla el carrito de compras y con eso, vamos a hacer esto ejercicio, hagamos un ejercicio más porque creo que es otro útil para conocer y luego vamos a terminar las cosas porque de todos modos hemos cubierto la mayoría del terreno así que lo último que quiero ver es más características estrictas ahora la mayoría de las personas que usan TypeScript están familiarizadas con la opción estricta e incluso si no lo estás si voy al archivo tsconfig la mayoría de las veces generas algunos proyectos ya sea con Next.js o algo más automáticamente obtendrás estricto establecido en verdadero así que incluso si no estás consciente de ello normalmente corres con estricto pero la mayoría de las personas piensan que bueno, estoy corriendo con estricto así que TypeScript está en modo estricto y eso es todo pero resulta que TypeScript puede ser más estricto que estricto hay un montón de ajustes y hasta donde yo sé esta es la lista completa pero tal vez hay en realidad otro que no está afectado y hay algo como permitir código irrazonable o permitir etiquetas no utilizadas que podrías argumentar, bueno no estoy tan seguro, necesito establecer eso especialmente permitir código irrazonable es incómodo porque ahora no puedes simplemente atajar una función diciendo devolver verdadero en la parte superior, si solo quieres saltarte algún código

22. Previniendo Errores Indefinidos en TypeScript

Short description:

Habilitar la opción 'no unchecked index access' en TypeScript ayuda a prevenir errores causados por el acceso a propiedades indefinidas. Al habilitar esta opción, el compilador de TypeScript detecta valores potencialmente indefinidos y proporciona una comprobación de tipo más precisa. En un ejemplo específico, el acceso a la propiedad 'topMovie' causó un error porque el array de películas estaba vacío, resultando en indefinido. Al renderizar condicionalmente la propiedad 'topMovie' solo cuando existe, podemos prevenir el error. Se recomienda habilitar la opción 'no unchecked index access' en todos los proyectos para mejorar la comprobación de tipo y prevenir errores comunes.

para debug cosas etc, así que no soy un gran fan de esos pero puedes usarlo pero hay uno aquí y eso es no unchecked index access que es realmente útil y déjame mostrarte un ejemplo donde lo usaría como mencioné al principio podemos filtrar películas podemos mostrar todas o podemos filtrarlas por género y te dije que no uses horror porque nos meteremos en una situación de horror y aquí mismo estamos teniendo un error no se puede leer la propiedad indefinida para leer títulos así que algo está mal aquí pero la comprobación de tipo está bien o al menos lo estaba, sin errores y eso ocurrió en alguna parte de esa página de película y si bajo un poco el error ocurre aquí con esa película mejor valorada y si paso el cursor sobre esa película superior, dice es la mejor película pic de lo que sea pero no hay razón para parecer que debería ser indefinida y como aquí simplemente elige el primer elemento de las películas pero solo quiero mostrar el fondo si bajo es no película, película superior no hay o indefinido aquí, define que la película superior es siempre un objeto de película pero ¿es eso cierto? Estamos tomando el primer elemento de un array de películas ¿qué pasa si ese array está vacío? ¿qué será la película superior en runtime? Porque recuperar algo fuera de los límites válidos de un array es perfectamente legal en JavaScript, por lo que es legal en TypeScript así que si este array de películas está vacío indexar cero significa el primer elemento, así que en realidad obtenemos indefinido de vuelta que es exactamente lo que está causando este error este género, horror no tiene ninguna película allí y ahí es donde entra esa opción, el no unchecked index axis así que, vamos a habilitar eso, no unchecked index axis, por defecto es falso pero lo pondremos a verdadero, guardaré e inmediatamente el compilador de TypeScript detecta que hay un error y ahora dice donde estaba hace un minuto, sin errores ahora realmente dice que la película superior es posiblemente indefinida y si paso el cursor sobre el tipo, parece lo mismo pick de ese tipo completo pero ahora justo en la parte inferior ves intenta de nuevo, ves aquí, o indefinido así que ahora realmente sabemos que puede ser potencialmente indefinido pero tenemos que comprobar primero ahora una cosa que podríamos hacer es tener un bucle, tener una condición aquí decir si las películas punto longitud es mayor que cero y en ese caso la película superior está garantizada muéstrame el tipo todavía dice que es posiblemente indefinido aunque ahora solo podemos entrar aquí si tenemos más de cero películas pero de todos modos, eso no funcionaría realmente en este caso porque ahora eso variable película superior aquí no es válida, solo es declarada dentro del alcance y la solución es separada solo queremos renderizar esto condicionalmente así que hacemos esto una expresión y decimos, si tenemos película superior entonces queremos renderizar esto y si no queremos renderizar nada quizás la película mejor valorada si hay algo o obtenemos una página vacía pero con algo más en realidad muestra la película mejor valorada o podríamos decir potencialmente que queremos renderizar algo más digamos quitar el null no hay películas o algo así Así que, ahora al menos es un poco más amigable porque hay un mensaje allí o podrías querer usar condicional allí como renderizar el título de la película o no renderizar nada diferentes formas de resolver el problema, pero al menos ahora obtenemos un error de tiempo de compilación y cuando no comprobamos y porque comprobamos, ese error desaparece Así que recomiendo encarecidamente habilitar no hay unchecked index access en todos tus proyectos, esto hace que la comprobación de tipo sea mucho mejor porque este es un error relativamente común donde piensas que un tipo está definido como algo pero en realidad es algo o indefinido bastante a menudo El nodo unchecked index access en realidad no va a hacer el ejercicio, porque estamos más allá del final del tiempo Tenía algunas cosas más sobre read-only y deep-read-only

23. Resumen de Mapeos de Tipos y Tipos Opacos

Short description:

Vimos muchas cosas útiles con los mapeos de tipos. Proporciona más información al compilador de TypeScript con simples mapeos de tipos. Read-only y deep read-only son grandes utilidades. Importar archivos JSON grandes puede ralentizar el compilador de TypeScript. Usa la característica estricta con no unchecked index access. Compila tu código y actualiza los tipos generados. Los tipos opacos con funciones de aserción existen en tiempo de compilación y en tiempo de ejecución. Mejoran la seguridad de tipo y previenen errores. En tiempo de ejecución, las funciones de aserción comprueban el tipo y lanzan un error si es inválido.

pero voy a ir a la conclusión entonces, muchas cosas útiles vimos con los mapeos de tipos hay mucho que puedes hacer allí pero es una inversión que vale la pena en mi opinión, así que recomendaría hacerlo puedes darle al compilador de TypeScript mucha más información con un puñado de mapeos de tipos relativamente simples read-only es otro, estándar, que puedes usar en el código de muestra, encontrarás el deep read-only o recursive read-only, que es otro gran utilidad para agregar si estás importando archivos JSON grandes también recomendaría echar un vistazo a ese último ítem donde puedes hacer que el compilador de TypeScript sea mucho más rápido porque si importas archivos JSON el compilador de TypeScript en realidad analiza el archivo JSON completo para determinar el tipo devuelto y eso puede ser lento, pero sólo con archivos JSON más grandes Así que muchas cosas útiles, la característica estricta con no unchecked index access, muy recomendada asegúrate de compilar tu código, asegúrate de actualizar tus tipos generados si estás usando algo como Generación de tipos Graph Quilt o Generación de tipos OpenAPI y cosas así Así que con eso, me gustaría terminar ya es hora si hay alguna pregunta, ahora sería un buen momento para desactivar tu micrófono y hacerlas si no, gracias por estar aquí, espero que haya sido útil mis disculpas por mis toses ocasionales no estoy completamente al 100%, pero no hay mucho que pueda hacer al respecto, un poco desafortunado me estaba poniendo bastante caliente también, aquí me siento mejor ahora, pero ¿alguna pregunta antes de terminar? ok. Entonces tengo una sobre los tipos opacos que declaramos con las funciones de aserción en realidad no usamos en la función de aserción propiedades de solo lectura de nuestro nombre de cuenta ¿deberíamos conectarlo, o fue solo un separado...no, la cosa donde se fue aquí, como hemos definido el tipo opaco aquí en la cuenta que es del tipo string y tiene este nombre adicional de cuenta que es almacenado aquí. Esto sólo existe en tiempo de compilación, no existe en tiempo de ejecución, en tiempo de ejecución nunca se añade así que nunca está allí. Estas funciones de aserción funcionan tanto en tiempo de compilación como en tiempo de ejecución. En tiempo de compilación es básicamente TypeScript diciendo si pasamos esta función no hubo ninguna excepción allí. Entonces podemos considerar que esta cuenta pasada era del tipo cuenta de lo contrario debería haber lanzado. En tiempo de ejecución esta función realmente se ejecuta así que en tiempo de compilación no se ejecuta porque aún no hay valor sólo considera, bueno, si esto pasa, entonces esto debe ser cierto en tiempo de ejecución esto se ejecuta y realmente comprobará ¿es el valor pasado de tipo String? ¿Es la longitud de 4? Y si ese no es el caso, lanzará un error en tiempo de ejecución y causará que el programa se bloquee o para atrapar el error o algo así que podrías estar preguntándote, tengo valor definido como String aquí y luego en tiempo de ejecución estoy comprobando de nuevo si es de tipo String eso es de nuevo, el tiempo de compilación vs tiempo de ejecución si hago un assertAccount y paso un número, es imposible que sea válido si el compilador de TypeScript sabe que el valor que paso es un número, así que hago algo como assertAccounts12 el compilador va a poner squiggles aquí y decir, bueno, es imposible que esto sea válido porque es un número pero si quiero ser astuto, puedo hacer esto lo lanzo como Any ahora el compilador de TypeScript, y probablemente no lo harás así, pero probablemente será algún tipo Any que se pasa, el compilador de TypeScript no tiene información sobre lo que se pasa, así que es sólo una comprobación en tiempo de ejecución y aunque esto tiene string en tiempo de ejecución todavía podría ser un número o potencialmente si estás construyendo una biblioteca que se utiliza desde JavaScript que no es de tipo comprobado, podrías pasar un número o un booleano o lo que sea en lugar de un string así que eso es por qué es como doble. Esto es para tiempo de compilación, esta parte es para tiempo de ejecución Eso explica. Tiene mucho sentido. Gracias Y eso es todo entonces supongo. Gracias a todos por asistir lo siento, fue un poco desordenado, no me siento muy bien pero espero que aún sea útil y tal vez sigas otra masterclass mía en algún momento en un mes o así estoy haciendo una sobre componentes de servidor de React y Next.js para la Conferencia React Advanced

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!