Zod === TypeScript, pero en tiempo de ejecución en tus aplicaciones de React

¡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.

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. ♪♪♪