Manejo seguro de datos dinámicos con TypeScript

Rate this content
Bookmark

TypeScript hace que JavaScript sea más seguro al agregar definiciones de tipos estáticos. Las definiciones estáticas son maravillosas; evitan que los desarrolladores cometan errores triviales asegurando que cada asignación e invocación se realice correctamente. Una variable de tipo string no puede recibir un número y una función que espera tres argumentos no puede ser llamada con solo dos. Sin embargo, estas definiciones solo existen en tiempo de compilación; el código que se ejecuta finalmente es simplemente JavaScript. Pero, ¿qué sucede con la respuesta de una solicitud a una API? En esta charla, Ethan Arrowood, Ingeniero de Software 2 en Microsoft, cubrirá diversas soluciones para tipar de forma segura datos dinámicos en aplicaciones TypeScript. Esta charla presenta tecnologías populares como Fastify, JSON Schema, Node.js y más!

29 min
24 Jun, 2021

Video Summary and Transcription

Esta charla discute el manejo seguro de datos dinámicos con TypeScript utilizando JSON Schema y TypeBox. Fastify, un framework web, permite a los desarrolladores validar datos entrantes utilizando JSON schema, brindando seguridad de tipos y manejo de errores. TypeBox es una poderosa biblioteca que permite a los desarrolladores definir esquemas JSON y derivar tipos estáticos en TypeScript. La combinación de JSON schema, TypeBox y Fastify proporciona herramientas poderosas para la seguridad de tipos y validación de datos dinámicos.

Available in English

1. Introducción al manejo de datos dinámicos

Short description:

Hola a todos. Hoy les hablaré sobre el manejo seguro de datos dinámicos con TypeScript. Como desarrolladores de software, utilizamos datos de diversas formas, como rutas de API, formularios, cargas de autenticación y comunicación entre sistemas grandes. Veamos un ejemplo de un objeto JSON que representa a una persona. JSON es una forma detallada de representar datos y se utiliza ampliamente en las API. Ahora, exploremos una ruta de Fastify y los desafíos de manejar cuerpos de solicitud desconocidos.

Hola a todos. Mi nombre es Ethan Erewood. Soy un ingeniero de software en Microsoft y hoy les hablaré sobre el manejo seguro de data dinámicos con TypeScript.

Entonces, el manejo de data. ¿Qué es data? Como desarrolladores de software, lo utilizamos de muchas formas diferentes. Algunos ejemplos de cómo lo uso son en las rutas de API al construir un servicio backend, al lidiar con forms en el frontend y también en las cargas de authentication y todo lo relacionado con la autenticación en una aplicación de pila completa. Y esta es solo una lista corta. Puedes imaginar lo extenso que puede ser cuando comienzas a lidiar con bases de datos o ciencia de data y simplemente cualquier tipo de comunicación entre sistemas grandes. Así que echemos un vistazo a un ejemplo de un registro de data. En este caso, estoy usando un objeto JSON. Tenemos un montón de claves aquí. ID, nombre, empleado, compañía, edad y proyectos. Estamos representando a una persona. Tal vez este sea un directorio de empleados o tal vez sea un directorio de usuarios para un sitio como LinkedIn donde queremos obtener su nombre, saber si están empleados o no, que es un valor booleano. Queremos saber para qué empresa trabajan. Queremos saber cuántos años tienen. Y también podríamos querer listar sus proyectos. Y como muchos saben, JSON es una forma muy detallada de representar data. Tiene muchas primitivas excelentes que se basan en JavaScript, y puede ser bastante extenso. De hecho, las API completas se basan únicamente en proyectos JSON a través del formato de esquema abierto.

Hablando de API de backend, echemos un vistazo a una ruta de Fastify. En este caso, estamos definiendo una ruta post. La ruta es agregar usuario, y el controlador de solicitud aquí tiene dos argumentos, solicitud y respuesta, y estamos desestructurando el cuerpo de ese objeto de solicitud. ¿Alguien sabe qué tipo de cuerpo podría ser? ¿Es un registro, un objeto, es de cualquier tipo? Pregunta trampa. Es desconocido. La propiedad del cuerpo de ese objeto de solicitud, echando un vistazo nuevamente al código, la ruta de Fastify no tiene idea de qué es porque en el contexto de Fastify como marco de trabajo, no estamos seguros de lo que el desarrollador pretende que se envíe a través de su solicitud. Y no hay forma de que Fastify lo sepa cuando se está escribiendo el código o incluso cuando se está compilando. Bueno, tal vez no cuando se está compilando. Llegaremos a eso más adelante.

2. Manejo de cuerpos de solicitud desconocidos con JSON Schema

Short description:

Al observar el objeto JSON anterior o tomar una parte del ID y el nombre, hay claves de cadena y valores de cadena. TypeScript lanzará un error. El objeto es de tipo desconocido. Entonces, hay algunos patrones que podemos usar. Puedes usar una conversión de tipo básica donde podemos decir body.name como string. Pero en ese caso, no hay verificación. Ahí es donde quiero presentar JSON Schema. JSON Schema es una API súper poderosa que te permite definir un objeto JSON con más JSON. JSON Schema utiliza una especificación para permitir que un desarrollador defina la estructura de un objeto JSON, especificando el tipo, listando las propiedades, indicando qué propiedades son requeridas o no, listando si hay propiedades adicionales o no, e incluso pudiendo definir tipos más complejos. JSON Schema, y esto solo raspa la superficie de JSON Schema. Puedes usar expresiones regulares, referencias y operaciones lógicas como todas, alguna o ninguna, y es muy poderoso cuando aprovechas JSON Schema para definir tus objetos JSON.

ID y el nombre, hay claves de cadena y valores de cadena. Y luego, al observar nuevamente la ruta post, sabemos que body es desconocido y lo estamos desestructurando del objeto de solicitud. Entonces, ¿qué sería body.name? En este caso, imagina que el objeto JSON se envía a esta ruta como el cuerpo de la solicitud en la solicitud POST. Entonces, ¿qué sería el nombre? Probablemente una cadena, ¿verdad? Bueno, otra pregunta trampa. TypeScript lanzará un error. El objeto es de tipo desconocido. ¿Por qué? Bueno, es porque la propiedad body proviene de ese objeto de solicitud. Debido a que es desconocido, no se pueden derivar otros tipos de manera segura en TypeScript. TypeScript dice: no, no, no, detente aquí. No quiero que sigas usando propiedades en este objeto porque como compilador de TypeScript, no sé qué es. Y no puedo proporcionarte la seguridad de tipos que estás buscando. Entonces, hay algunos patrones que podemos usar. Puedes usar una conversión de tipo básica donde podemos decir body.name como string, y le diremos a TypeScript que es una cadena. Pero en ese caso, no hay verificación. No hay forma de asegurar que la propiedad name sea realmente una cadena porque TypeScript solo proporciona seguridad de tipos en tiempo de compilación. Durante el tiempo de ejecución, todo es simplemente JavaScript. No hay seguridad de tipos en tiempo de ejecución. ¿Cuáles son algunas otras soluciones? Ahí es donde quiero presentar JSON Schema. JSON Schema es una API súper poderosa que te permite definir un objeto JSON con más JSON. ¿No es maravilloso? Bromas aparte, JSON Schema es increíblemente detallado, incluso más detallado que el objeto JSON que probablemente esté definiendo. JSON Schema utiliza una especificación para permitir que un desarrollador defina la estructura de un objeto JSON, especificando el tipo, listando las propiedades, indicando qué propiedades son requeridas o no, listando si hay propiedades adicionales o no, e incluso pudiendo definir tipos más complejos. Como puedes ver en el ejemplo de código, la propiedad projects es de tipo array y luego podemos ir aún más lejos y decir que los elementos de ese array son de tipo string. JSON Schema, y esto solo raspa la superficie de JSON Schema. Puedes usar expresiones regulares, referencias y operaciones lógicas como todas, alguna o ninguna, y es muy poderoso cuando aprovechas JSON Schema para definir tus objetos JSON. Dicho esto, JSON Schema, creo que incluso en su especificación, está destinado a la validación. La validación en el sentido de aquí tienes un esquema y

3. Type Safety with JSON Schema and TypeBox

Short description:

Le das eso a un validador y le dices que se asegure de que mi objeto JSON sea realmente lo que estoy diciendo que debería ser a través del esquema. Lanza un error o dame alguna salida especial si no lo es. Entonces, con eso, tenemos nuestro objeto JSON, esa carga anterior en una mano. Ahora sabemos que podemos definir un esquema para él en la otra mano. Así que déjame presentarte a TypeBox. TypeBox es una biblioteca fantástica que te permite no solo definir esquemas JSON utilizando una API similar a un lenguaje fluido, sino también derivar un tipo estático de ese esquema JSON en tu código TypeScript. Y así, en un ejemplo más complejo, redefinamos nuestro esquema de cuerpo usando TypeBox. Y luego, en el último bloque de este código, Fastify.post, puedes ver que ahora estamos usando un parámetro genérico. Es un objeto, un nombre, me gusta llamarlos parámetros genéricos de nombre. Y hemos asignado ese tipo de esquema de cuerpo T al cuerpo de ese parámetro genérico. El sistema de tipos de Fastify transmitirá ese tipo de esquema de cuerpo T a través de la propiedad de cuerpo del objeto de solicitud. Y eso es genial. Ahora hemos tipado la propiedad de cuerpo del objeto de solicitud.

Aquí tienes un objeto JSON. Le das eso a un validador y le dices que se asegure de que mi objeto JSON sea realmente lo que estoy diciendo que debería ser a través del esquema. Lanza un error o dame alguna salida especial si no lo es. Entonces, con eso, tenemos nuestro objeto JSON, esa carga anterior en una mano. Ahora sabemos que podemos definir un esquema para él en la otra mano. Así que volviendo a la aplicación Fastify y esa ruta, ¿podemos proporcionar alguna seguridad de tipo todavía? No realmente. Todo lo que podemos hacer es validar que el cuerpo entrante sea lo que queremos que sea utilizando JSON Schema. Pero vamos, estamos en 2021. Hay cosas bastante geniales que podemos hacer.

Así que déjame presentarte a TypeBox. TypeBox es una biblioteca fantástica que te permite no solo definir esquemas JSON utilizando una API similar a un lenguaje fluido, sino también derivar un tipo estático de ese esquema JSON en tu código TypeScript. Entonces, dado este ejemplo muy básico, puedes ver en la segunda línea, constante T igual a type.string. Eso va a devolver type.string, un objeto con una propiedad, type, que está establecida como string. Este es un objeto de esquema JSON válido. Estamos diciendo que la variable T es el tipo de esquema JSON string. Y podemos usar ese esquema JSON que se asigna a la variable T en cualquier lugar donde usemos esquema JSON, en cualquier nivel de validación o serialización.

Pero en esa última línea del ejemplo, puedes ver type T igual a static y luego el parámetro genérico tipo de T, que es esa constante declarada en la segunda línea. Y ahora ese tipo T es un string. La biblioteca TypeBox es lo suficientemente inteligente como para derivar el tipo de un esquema JSON en esa forma estática. Y así, en un ejemplo más complejo, redefinamos nuestro esquema de cuerpo usando TypeBox. Puedes ver que comenzamos con type.object y luego hemos enumerado nuestras seis propiedades, id y name, de tipo string, y luego employed, company, age y projects son todos de tipo opcional. Y luego, dentro de esos tipos opcionales, definimos type Boolean para employed, string para company, number para age. Y en projects, puedes ver que estamos usando type string dentro de type array, que es la forma de TypeBox de decir un array de strings. Y luego estamos definiendo un tipo T body schema que será igual a la resolución estática del tipo de ese esquema de cuerpo de TypeBox. Y luego, en el último bloque de este código, Fastify.post, puedes ver que ahora estamos usando un parámetro genérico. Es un objeto, un nombre, me gusta llamarlos parámetros genéricos de nombre. Y hemos asignado ese tipo de esquema de cuerpo T a la propiedad de cuerpo de ese parámetro genérico. El sistema de tipos de Fastify transmitirá ese tipo de esquema de cuerpo T a través de la propiedad de cuerpo del objeto de solicitud. Y eso es genial.

4. Validación y Manejo de Errores

Short description:

Pero aún nos falta un paso clave aquí, pero este código ya lo resuelve. Es el paso de validación. Fastify tiene esta opción de esquema que permite a los desarrolladores verificar los datos entrantes de una solicitud y la forma de la respuesta saliente utilizando JSON Schema. Ese paso de validación ocurre antes de que se ejecute la función controladora. Entonces, si el paso de validación falla, toda la ruta generará un error y devolverá un mensaje de error al usuario diciendo que el cuerpo es inválido.

Ahora hemos tipado la propiedad de cuerpo del objeto de solicitud. Pero aún nos falta un paso clave aquí, pero este código ya lo resuelve. Es el paso de validation. Como puedes ver debajo de la cadena add user, se agrega otro argumento a esta ruta. Y es el esquema y luego el objeto cuerpo y luego el esquema de cuerpo. Y no te confundas. Ese esquema de cuerpo es el JSON real definido, devuelto por la API de TypeBox. Fastify tiene esta opción de esquema que permite a los desarrolladores verificar los datos entrantes de una solicitud y la forma de la respuesta saliente utilizando JSON Schema. Bajo el capó, pasamos eso a otro validador JSON y validamos el contenido en función de los esquemas proporcionados. Ese paso de validation ocurre antes de que se ejecute la función controladora. Entonces, si el paso de validation falla, si el cuerpo de la solicitud entrante no coincide con el esquema que hemos establecido en ese segundo argumento de la función, entonces toda la ruta generará un error y devolverá un mensaje de error al usuario diciendo que el cuerpo es inválido. Y creo que también incluye

5. Type Safety and Validation with Fastify

Short description:

Dentro del controlador de funciones, Fastify valida la propiedad body utilizando el esquema definido. Esto proporciona seguridad de tipo para acceder a propiedades como body.name. Sin embargo, la seguridad de tipo en tiempo de compilación de TypeScript no se basa en tiempo de ejecución. Con la capa de validación de Fastify, podemos acercarnos a la seguridad de tipo para datos dinámicos. JSON Schema, TypeBox y Fastify juntos son herramientas poderosas.

Con el error del validador JSON también. Y con todo eso junto, dentro de nuestro controlador de funciones ahora, cuando Fastify llegue allí, podemos pensar, bien. Fastify ha validado la propiedad body del objeto de solicitud utilizando el esquema que hemos definido usando TypeBox. También hemos proporcionado el tipo para esa propiedad body utilizando los parámetros genéricos que es un tipo que se deriva directamente del mismo esquema JSON utilizado para validar esa propiedad. Y así, ahora, dentro de nuestro controlador de funciones, esa propiedad body de la solicitud tendrá el tipo de esquema tbody. Y acceder a algo como body.name, de hecho, devolverá una cadena segura en términos de tipo. Y si estás accediendo a una de las propiedades opcionales, será ese tipo. En este caso, body.number o undefined. Y esta es mi parte favorita de todo esto. Pero también rompe un poco el problema en primer lugar. Donde TypeScript es solo una seguridad de tipo en tiempo de compilación y no se basa en tiempo de ejecución. Y así, estamos dentro de un controlador de ruta y estás tomando ese body del objeto de solicitud. Si olvidamos el hecho de que Fastify va a validar nuestros datos entrantes por nosotros, debes recordar que puedes decir de manera insegura que body es de este tipo. Y luego seguir con tu negocio y tu ruta. Y eso es todo. Sabes, no hay una verdadera seguridad de tipo allí. Pero con la capa de validación que Fastify agrega, podemos acercarnos lo más posible a la seguridad de tipo para datos altamente dinámicos. Porque si establecemos una línea dura o si confiamos lo suficiente en Fastify como para decir que este controlador de ruta no se ejecutará si el paso de validación no tiene éxito, entonces podemos decirle a TypeScript con confianza que el tipo de esa propiedad dentro de ese controlador de ruta será lo que queremos que sea, lo que creemos que será. Porque confiamos en ese paso de validación. Si ese paso de validación es lógicamente incorrecto y permite algo para lo que no estamos preparados, entonces tendremos un problema. Y desafortunadamente, incluso una aplicación JavaScript no podría responder a eso. Sabes, probablemente tendría que generar un error. Si estás tratando de acceder a una propiedad que no existe, porque de alguna manera se salta el paso de validación. En resumen, JSON Schema más TypeBox más Fastify es súper, súper poderoso. Y quiero pasar brevemente a VSCode y mostrarte todo esto en tiempo real para que puedas entender cómo se verá en una aplicación Fastify real. Entonces, en mi aplicación Fastify aquí, tengo esta función básica de ejecución que va a crear una nueva aplicación Fastify. Vamos a registrar nuestro complemento create server. Vamos a esperar app.ready, obtener la dirección y luego imprimir algunas cosas bonitas en la consola. Aquí en el servidor, puedes ver que hemos importado esa API de TypeBox. Hemos definido

6. Utilizando Genéricos en el Esquema del Cuerpo de TypeScript

Short description:

El tipo de esquema del cuerpo es un objeto de tipo T de TypeBox con un genérico de este llamado parámetro genérico. Los genéricos son increíblemente poderosos en la actualidad. Dentro de este controlador de funciones, ahora puedes confiar con mayor seguridad en la seguridad de tipo de tus datos dinámicos, todo basado en el mismo esquema JSON que se utiliza para validarlo al mismo tiempo.

Vamos a ver nuestro esquema del cuerpo. Y puedes ver que tiene esta forma realmente interesante. El tipo de esquema del cuerpo es un objeto de tipo T de TypeBox con un genérico de este llamado parámetro genérico. Donde la primera propiedad ID es de tipo T string. Name es de tipo T string. Employed es de tipo T Opcional con el parámetro genérico T Boolean y así sucesivamente. De hecho, el uno de proyectos se corta, pero va a ser un array de T string. Y podemos verlo al pasar el cursor sobre eso y ver qué sería este proyectos. Puedes ver en el IntelliSense que es T Opcional, array de T string. Los genéricos son increíblemente poderosos en la actualidad. Puedes ver aquí abajo este tipo, en el tipo T esquema del cuerpo, se ve un poco extraño. Tenemos objeto vacío y objeto vacío y objeto, empleado opcional, empresa opcional, edad opcional, proyectos opcionales y luego otro objeto ID y nombre. Bajando a nuestra ruta de Fastify, puedes ver que estamos pasando ese esquema del cuerpo que está definido aquí. Es un esquema JSON real para la propiedad body de nuestro parámetro de esquema aquí para Fastify. Y en este genérico post, estamos pasando ese tipo T esquema del cuerpo. Y si pasamos el cursor sobre body dentro del controlador de funciones, puedes ver que obtenemos ese tipo de objeto estático. Y pasa ese mismo parámetro genérico llamado genérico que proviene del esquema del cuerpo. Y ahora, cuando haces body.name, obtienes el tipo string. Y si haces body.age, obtendrás number o undefined. Y así, dentro de este controlador de funciones, ahora puedes confiar con mayor seguridad en la seguridad de tipo de tus datos dinámicos, todo basado en el mismo esquema JSON que se utiliza para validarlo al mismo tiempo. Así que volviendo, quiero agradecer a la colección de ilustraciones de Undraw Graphics. Sin ella, mi presentación sería mucho más aburrida. Y también todo esto fue construido con HighlightJS y la biblioteca TMCW Big. Lo recomiendo mucho si estás trabajando en una presentación. Quiero agradecerles por asistir a mi charla hoy. Espero que hayan aprendido algo. Y espero responder a sus preguntas en un momento. Si desean seguirme en Twitter, aquí está mi información. También pueden seguirme en GitHub. Me encanta conectarme con

7. Reflexión sobre los resultados de la encuesta

Short description:

Los resultados de la encuesta muestran que muchas personas están familiarizadas con el tema, pero aún hay algunas que nunca lo han utilizado. El objetivo es que los asistentes lo prueben después de la charla y la sesión de preguntas y respuestas.

gente. Me encanta hablar sobre Node.js y TypeScript. Y sí, espero verlos a todos por aquí. Gracias de nuevo. Hola. Wow. Oye. ¿Qué opinas de los resultados de la encuesta? Creo que estuvo genial. Creo que esa fue la respuesta que esperaba, donde parece que una buena parte de la audiencia al menos sabe qué es, lo ha utilizado antes en diferentes niveles de experiencia. Y todavía hay un grupo de personas que nunca lo han probado. Y con suerte, después de esta charla y tal vez esta sesión de preguntas y respuestas, lo intentarán. Sí. Eso sería increíble, por supuesto. Bueno, por eso la gente viene a estos eventos, ¿verdad?, para conocer cosas nuevas y esperemos jugar con ellas y usarlas en sus empresas en producción.

QnA

Express Validation and Fastify

Short description:

Express no tiene validación de esquema JSON incorporada como Fastify, pero puedes usar validadores de esquema JSON similares como middleware. Fastify utiliza AJV como su validador, que es rápido y cumple con las especificaciones.

La primera pregunta de uno de los miembros de nuestra audiencia es de Walker MAA, y él dice, gran charla. ¿Express también puede validar el cuerpo contra un esquema como Fastify? Sí. Entonces, Express, creo, no lo uso como mantenedor de Fastify. Tiendo a usar simplemente Fastify. Creo que no está incorporado en Express, pero hay validadores de esquema JSON muy similares que funcionarán igual que Fastify con Express y que puedes usar como middleware. Y lo bueno de Fastify es que está incorporado, por lo que, por defecto, no tienes que cargar ningún complemento especial. No hay nada que tengas que pasar al servidor. Usará un esquema proporcionado a las rutas. Y en el fondo, usamos un validador llamado AJV, que es otro validador JSON, y creo que hay otra pregunta aquí que pregunta sobre una de las otras opciones disponibles. La mayoría de las personas están familiarizadas con algo como Joy, que proviene del conjunto de herramientas del framework web Happy. Pero para Fastify usamos AJV, que resulta ser el más rápido y cumple mejor con la forma en que se iteran los esquemas JSON.

Comparación entre Joy y Typebox

Short description:

Joy y Typebox tienen una API similar para construir esquemas JSON, pero Joy también proporciona funciones de validación y serialización. Typebox se enfoca únicamente en la construcción de esquemas JSON y se puede utilizar con cualquier validador JSON.

Genial. La siguiente pregunta es de Christina, ¿es Typebox la versión de TypeScript de Joy? Sí, Joy es una biblioteca grande. Hace muchas cosas. En primer lugar, tiene una API similar a Typebox, donde te permite construir tus esquemas JSON utilizando la API de Joy. Esa parte es muy similar a Typebox, pero donde difieren es que creo que Joy todavía realizará validación en... tiene funciones de validación y serialización basadas en los esquemas que se generan a través de la API de Joy. Typebox no tiene ninguna función de validación, no tiene ninguna función de serialización. Es solo la parte de construcción de esquemas JSON. Funcionará correctamente con cualquier validador JSON.

Using Swagger OpenAPI and JSON Schema

Short description:

Swagger y OpenAPI se implementan en JSON Schema. Puedes usar sus esquemas JSON para que tus rutas de Fastify sean seguras en cuanto a tipos al implementar un servidor de API.

De acuerdo, genial. La siguiente pregunta es de Zero Carol. De acuerdo, bien, pero ¿por qué no usar Swagger OpenAPI? Esta es una gran pregunta. Esto surge con frecuencia todo el tiempo. La respuesta es más o menos la misma pregunta. ¿Por qué no? Adelante. Swagger y OpenAPI, creo, se implementan completamente en JSON Schema. Todo lo que exportan tiene sus propios bloques de esquemas JSON que puedes usar e integrar en otras cosas, otras herramientas, como los sitios web automáticos de Swagger que ves. Todos ellos están impulsados por los esquemas JSON y eso es exactamente el tipo de cosa que puedes pasar a tus rutas aquí, donde si usas el formato OpenAPI para definir tu API REST, puedes usar esos mismos esquemas JSON para que tus rutas de Fastify sean seguras en cuanto a tipos cuando estés implementando ese servidor de API.

Typebox and TypeScript Interfaces

Short description:

Typebox es una herramienta que genera tipos de TypeScript y esquemas JSON, eliminando la necesidad de escribir y mantener esquemas e interfaces separados. Al depender de una herramienta como Typebox, te aseguras de que la traducción entre el esquema y el tipo sea precisa y confiable, reduciendo el riesgo de errores e inconsistencias.

Genial. La siguiente charla es después de la tuya, pero primero tenemos una pregunta de Johnny Gat. ¿No es Typebox lo mismo que las interfaces de TypeScript? Sí, lo es. Typebox es una herramienta que generará tipos de TypeScript así como el esquema JSON. Podrías hacerlo tú mismo a mano. Puedes escribir tu interfaz que implemente tu propio esquema JSON. La idea aquí es clásica de los programadores, no te repitas a ti mismo. ¿Por qué escribir dos esquemas? Además, si haces un cambio en el esquema, debes asegurarte de hacer ese cambio en la interfaz. No hay muchas formas excelentes de validar que la interfaz que escribiste sea realmente correcta. La implementación correcta del esquema JSON. Los usuarios cometen errores todo el tiempo. Entonces, al dejar que una herramienta haga esa traducción y convierta el esquema en un tipo o viceversa, o ambos al mismo tiempo, eso es mucho más confiable. Sí, agrega una capa de seguridad adicional.

Using JSON Schema for Type Security

Short description:

La razón por la que animo a la gente a utilizar JSON Schema en lugar de simplemente pasar una interfaz de tipo a su ruta es porque Fastify validará lo que estás proporcionando un tipo y es ese paso de validación el que proporciona la seguridad de tipo que estás utilizando TypeScript en primer lugar. Otra pregunta de David Lime, ¿se podría utilizar TypeBox para generar OpenAPI también? Creo que podrías encontrar algún nivel de interoperabilidad allí donde podrías definir tus objetos o esquemas OpenAPI utilizando TypeBox y utilizar ese esquema JSON donde quieras utilizar tu esquema OpenAPI. Tenemos otra pregunta de Marnice preguntando si hay algo similar a TypeBox para el front-end. TypeBox u otras APIs similares deberían funcionar en el front-end. Todo depende de las herramientas JSON que tengas.

para que las cosas no se vuelvan obsoletas y desincronizadas. Genial. La siguiente pregunta es de Max Zdzadorov. ¿Por qué debería usar JSON Schema en lugar de simplemente declarar interfaces de TypeScript? Bueno, creo que acabamos de tocar ese tema, pero ¿tienes más información que quieras compartir? Sí, compartiré un poco más. Entonces, la razón por la que animo a la gente a utilizar JSON Schema en lugar de simplemente pasar una interfaz de tipo a su ruta es porque Fastify validará lo que estás proporcionando un tipo y es ese paso de validación el que proporciona la seguridad de tipo que estás utilizando TypeScript en primer lugar y esto se relaciona con la esencia misma de la seguridad de tipo, ¿es realmente seguro de tipo si es algo que ocurre en tiempo de ejecución? y ese nivel de seguridad y si podemos acercarnos lo más posible a eso, ese es el mejor escenario posible y llegar a ese punto, llegar lo más cerca posible de la seguridad o seguridad de tipo es tener que depender de una herramienta como esta donde es JSON Schema para la validación y el tipo se infiere a partir de ese mismo esquema. Sí, genial.

Entonces, otra pregunta de David Lime, ¿se podría utilizar TypeBox para generar OpenAPI también? Gran pregunta. No estoy muy familiarizado con OpenAPI, pero creo que sí. Creo que podrías encontrar algún nivel de interoperabilidad allí donde podrías definir tus objetos o esquemas OpenAPI utilizando TypeBox y tener ese esquema JSON para usar donde quieras utilizar tu esquema OpenAPI y tener los tipos resultantes. Lo único que diré es que creo que con OpenAPI, una gran parte del objetivo es obtener ese objeto JSON como su propio archivo y luego pasar ese archivo. Donde TypeBox, solo lo devuelve durante el tiempo de ejecución. Está en el código. Dicho esto, es JSON en una variable. Puedes convertirlo completamente en una cadena y escribirlo en un archivo. Pero ese segundo paso de operación podría ser un poco diferente a lo que muchos usuarios de OpenAPI están acostumbrados. De acuerdo. Creo que esa es la última pregunta que tenemos en este momento. Tenemos otra. Esta pregunta es de Marnice. ¿Conoces algo similar a TypeBox pero para el front-end? TypeBox u otras APIs similares deberían funcionar en el front-end. Todo depende de las herramientas JSON que tengas. TypeBox es solo un módulo de JavaScript que tiene una API funcional muy fácil de usar que devuelve un objeto JSON. No creo que esté utilizando nada especial de Node.js. Si lo está, creo que la interoperabilidad con el navegador estaría bien. De memoria, no sé si TypeBox se puede usar directamente en un navegador. Debería estar bien. Si no, definitivamente hay otras herramientas alternativas que podrían serlo. O se aceptan solicitudes de extracción. Sí, exactamente. Alguien agradable. Si no tienes nada que hacer durante el fin de semana, puedes probarlo en tu front-end.

Conclusion of Q&A Session

Short description:

Excelente charla, Ethan, mi favorita hasta ahora. Muchas gracias por tu excelente charla y esta sesión informativa de preguntas y respuestas. No olvides que Ethan estará en su chat espacial si tienes más preguntas para él.

Tenemos un comentario de DC boy CM, que tiene un avatar de Batman. Creo que es fan de DC. Excelente material. Excelente charla, Ethan, mi favorita hasta ahora. Puedes llevar eso a casa y decirle a tu mamá que tienes un gran fan.

Y con eso, me gustaría terminar esta sesión de preguntas y respuestas. Muchas gracias por tu excelente charla y esta sesión informativa de preguntas y respuestas y espero verte nuevamente pronto.

Por supuesto. Gracias a todos. Que tengan un buen día. No olvides que Ethan estará en su chat espacial si tienes más preguntas para él. Adiós. Adiós.

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 Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
React Day Berlin 2022React Day Berlin 2022
29 min
Get rid of your API schemas with tRPC
Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
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 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Workshop
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid