En esta charla, quiero mostrar cómo podemos usar Zod para garantizar el tipo en una aplicación de React en tiempo de ejecución. Las variables de entorno, las solicitudes HTTP, los formularios, etc., pueden crear problemas en nuestras aplicaciones, principalmente si contienen tipos inesperados. Usando Zod, podemos crear esquemas para garantizar los tipos esperados en nuestro editor en tiempo de ejecución. De esta manera, podemos reaccionar rápidamente cuando falta una variable de entorno o cuando alguien cambia el contrato de la API sin informarnos.
Una pequeña capa de validación en nuestras aplicaciones puede prevenir una mala experiencia de usuario y notificarnos de inmediato, para que podamos solucionar el problema lo antes posible y mitigar la visualización de datos incorrectos.
Video Summary and Transcription
La charla de hoy discute cómo Zod, una biblioteca de NPM, puede garantizar el sistema de tipos en tiempo de ejecución, proporcionando todos los beneficios de TypeScript. El método parse de Zod permite verificar si los objetos coinciden con el esquema, creando una capa de validación entre las aplicaciones y las API. Al combinar TypeScript con Zod, los desarrolladores pueden garantizar la seguridad de tipos tanto en tiempo de ejecución como en tiempo de compilación, evitando la ejecución de código con datos incorrectos y mejorando la experiencia del usuario.
1. Garantizando el sistema de tipos en tiempo de ejecución con Zod
Hoy hablo sobre cómo puedes garantizar tu sistema de tipos en tiempo de ejecución usando Zod. TypeScript no puede verificar los tipos en tiempo de ejecución, pero Zod, una biblioteca de NPM, te permite crear un esquema personalizado que permanece activo en tiempo de ejecución. Zod te ayuda a obtener todos los beneficios de TypeScript y garantiza tu sistema de tipos en tiempo de ejecución. Cada esquema expone un método llamado parse para verificar si el objeto cumple con el esquema esperado. Zod puede crear una capa de validación entre tu aplicación y la API, permitiéndote verificar si el resultado de la API cumple con lo esperado durante el desarrollo.
¡Hola! Soy Luca De Pupo y hoy hablo sobre cómo puedes garantizar tu sistema de tipos en tiempo de ejecución usando Zod. Así que, primero que nada, ¿quién soy yo? Soy Luca De Pupo, trabajo como ingeniero de software en Dreams, amante de JavaScript y TypeScript, y en mi tiempo libre intento mantener contenido en mi canal de YouTube y también escribir algunos artículos de blog. Me encanta correr, hacer senderismo y los animales.
Por cierto, quiero comenzar con una historia. Hoy, hace casi 10 años, nació TypeScript y probablemente todos los desarrolladores de JavaScript en el mundo estaban felices. Comenzamos a crear nuestras interfaces, nuestros tipos, y así sucesivamente. El mundo era perfecto, pero un día, un desarrollador de backend decidió cambiar una API y, desafortunadamente, cambió una propiedad de String a Number o de Number a String, y el resultado en nuestra aplicación fue algo como esto: NaN, una cadena, y así sucesivamente. Esto se debe a que TypeScript no puede verificar los tipos en tiempo de ejecución, ya que el código que se ejecuta en tu navegador es JavaScript. Pero, ¿cómo podemos prevenir este error? Nuestro superhéroe es Zod. Zod es una sencilla biblioteca de NPM que te permite crear un esquema personalizado. En este caso, el esquema es un objeto JavaScript, por lo que el esquema permanece activo también en tiempo de ejecución. Este esquema contiene una definición de tu tipo. En este caso, como puedes ver, el esquema del cliente es un objeto con cuatro propiedades: id de tipo Number, name, email y phone de tipo String. Luego, también puedes convertir este tipo, este esquema, en un tipo TypeScript, en este caso usando el método type. Es bastante sencillo, puedes usar el esquema y convertirlo a TypeScript. Esto te ayuda a obtener todos los beneficios de TypeScript, pero también garantiza tu sistema de tipos en tiempo de ejecución.
Por último, pero no menos importante, cada esquema expone un método llamado parse. Este método se utiliza para verificar si el objeto cumple con el esquema esperado. En este caso, si el objeto analizado por el método parse cumple con lo esperado, la variable customer es de tipo Customer y contiene el objeto. De lo contrario, parse genera un error. Este error es de tipo ZodError y contiene el problema y el error para entender qué está mal. ¿Cuáles son los beneficios de usar Zod en nuestra aplicación? Típicamente, cuando creas una aplicación, tienes tu aplicación de React y una API para obtener los datos. Usando Zod, puedes crear una capa de validación entre tu aplicación y la API. En tiempo de ejecución, puedes verificar si el resultado de la API cumple con lo esperado durante el desarrollo y, en este caso, solo puedes ejecutar el código si los tipos respetan el tipo esperado. De lo contrario, puedes mostrar un error al usuario y enviar una notificación a Datadog o tal vez a Sentry para solucionar el problema lo antes posible.
Ahora es el momento de ver una demostración sencilla para entender cómo podemos usar Zod y los beneficios de usarlo. La demostración es bastante simple. Hay una lista de pedidos y cada pedido tiene una propiedad diferente en este caso. Por ejemplo, si cambio mi backend, en este caso cambio el monto de número a cadena, y vuelvo a la aplicación y actualizo la página. Como puedes ver, en este caso Zod muestra un error y describe el problema.
2. Implementando Esquemas y Conclusiones
En esta sección, vimos cómo identificar y solucionar problemas en el esquema. También exploramos cómo implementar esquemas utilizando .object y tipos de unión. El esquema se puede convertir en tipos y utilizar para validar los resultados de la API. TypeScript comprende el resultado del método parse y garantiza la seguridad de tipos. En conclusión, TypeScript, combinado con Zod, te permite garantizar tu sistema de tipos tanto en tiempo de ejecución como en tiempo de compilación. Esto ayuda a prevenir la ejecución de código con datos incorrectos y garantiza una mejor experiencia de usuario. También puedes recibir notificaciones y tomar medidas para solucionar cualquier problema rápidamente. ¡Gracias por unirte a esta charla!
Como puedes notar en la propiedad issue, puedes ver información sobre el problema. En este caso, en el path, el primer elemento de la lista contiene un objeto total que tiene una propiedad amount y esta propiedad amount es de tipo string, pero Zod espera un tipo number. Como puedes notar, puedes tener un error legible y tal vez solucionar el problema rápidamente si quieres.
Entonces, vuelvo a eso, retrocedo y soluciono el error y ahora es el momento de ver cómo podemos implementar este tipo de cosas. Por ejemplo, en este caso, creo un archivo más grande con todo el esquema que está compuesto usando .object y, por ejemplo, la moneda contiene un amount de tipo number y la moneda es un tipo de unión entre dólar y euro, por ejemplo, lo mismo ocurre con el pedido y así sucesivamente. Luego, si quieres, también puedes convertir el esquema en tipos. Bastante simple usando el método type y luego puedes usar el esquema para pasar el resultado de la API, por ejemplo.
En este caso, usando un fetch, podemos llamar al backend. Usando el método JSON, podemos pasar el resultado y luego usando el esquema del array de pedidos, podemos pasar el resultado de los datos y asegurarnos de que los datos sean del tipo del modelo de pedido y respeten nuestra firma del tipo, por ejemplo. Por ejemplo, si uso const res = "", puedes ver que el resultado es un array de pedidos y también TypeScript es capaz de entender que el resultado del parse es un array del modelo de pedido. Entonces, si vuelvo al navegador y actualizo nuevamente, como puedes notar, ahora todo está bien porque la respuesta es perfecta como se esperaba.
Ahora es el momento de llegar a la conclusión. Entonces, conclusión. TypeScript es increíble, pero sin Zod no puedes garantizar tu sistema de desarrollo también en tiempo de ejecución si quieres. Crear una capa de validación entre tu aplicación y el exterior te ayuda a prevenir la ejecución de código con datos incorrectos y tal vez a evitar que veas datos incorrectos o extraños en la interfaz de usuario. Y también puedes recibir una notificación... Puedes enviar una notificación a Datadog o a Sendit para solucionar el problema lo antes posible. Por último, pero no menos importante, usando Zod, puedes garantizar tu sistema de tipos tanto en tiempo de ejecución como en tiempo de compilación. Y esto es perfecto, supongo, también para ti. Bueno, eso es todo. Aquí puedes encontrar las diapositivas de la charla. Aquí puedes encontrar mis contactos, están abiertos. Si quieres chatear conmigo, eres bienvenido. Espero que hayas disfrutado esta charla y adiós. ♪♪♪
