TypeScript hace JavaScript más seguro agregando definiciones de tipo estático. Las definiciones estáticas son maravillosas; evitan que los desarrolladores cometan errores triviales asegurando que cada asignación e invocación se haga correctamente. Una variable tipificada como una cadena no puede ser asignada un número, y una función que espera tres argumentos no puede ser llamada con solo dos. Estas definiciones solo existen en el momento de la compilación; el código que finalmente se ejecuta es solo JavaScript. ¿Pero qué pasa con la respuesta de una solicitud de API? En esta charla, Ethan Arrowood, Ingeniero de Software 2 @ Microsoft, cubrirá varias soluciones para tipificar de manera segura los datos dinámicos en las aplicaciones TypeScript. Esta charla presenta tecnologías populares como Fastify, JSON Schema, Node.js, y más!
This talk has been presented at Node Congress 2021, check out the latest edition of this JavaScript Conference.
FAQ
TypeScript es un superset de JavaScript que añade tipado estático a la sintaxis de JavaScript, lo que permite asegurar que los datos se manejen de manera correcta en tiempo de compilación, incrementando así la seguridad y robustez de las aplicaciones que manejan datos dinámicos.
En Fastify, es posible proporcionar seguridad de tipo utilizando esquemas JSON para validar los datos de entrada en las rutas de la API. TypeBox es una herramienta que permite definir esquemas JSON y derivar tipos estáticos de TypeScript a partir de estos, lo que ayuda a usar estos tipos en las rutas de API para asegurar la consistencia y la correcta validación de los datos.
JSON Schema es una especificación que permite definir la estructura y validar objetos JSON. Se utiliza en el desarrollo de aplicaciones para asegurar que la estructura de los datos recibidos cumple con lo especificado, mejorando la interoperabilidad y la calidad de los datos en aplicaciones que consumen o generan JSON.
TypeBox es una biblioteca que permite definir esquemas JSON y derivar tipos estáticos de TypeScript de esos esquemas. Esto facilita la validación de datos en tiempo de compilación y ejecución, permitiendo una integración más segura y eficaz con TypeScript en aplicaciones que manejan datos dinámicos.
A diferencia de Joi, que es una biblioteca para definir esquemas y realizar validaciones en tiempo de ejecución, TypeBox se enfoca en la creación de esquemas JSON que pueden ser usados para derivar tipos TypeScript, sin incluir funcionalidades de validación o serialización propias.
TypeBox mejora la seguridad de tipo en aplicaciones Fastify al permitir definir esquemas JSON que se transforman en tipos TypeScript. Estos tipos se pueden utilizar en las rutas de Fastify para asegurar que los datos de entrada coincidan con los tipos esperados, proporcionando una validación más rigurosa y reduciendo los errores en tiempo de ejecución.
Esta charla discute el manejo seguro de datos dinámicos con TypeScript utilizando JSON Schema y TypeBox. Fastify, un marco web, permite a los desarrolladores validar datos entrantes utilizando el esquema JSON, proporcionando seguridad de tipo y manejo de errores. TypeBox es una biblioteca poderosa 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 tipo y la validación de datos dinámicos.
Hola a todos. Hoy voy a hablarles sobre cómo manejar de manera segura los datos dinámicos con TypeScript. Utilizamos datos de diversas formas como desarrolladores de software, como rutas de API, formularios, cargas de autenticación y comunicación entre grandes sistemas. 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 ingeniero de software para Microsoft y hoy voy a hablarles sobre cómo manejar de manera segura los datos dinámicos con TypeScript.
Entonces, manejo de data. ¿Qué es data? Como desarrolladores de software, utilizamos mucho de ello y de muchas formas diferentes. Algunos buenos ejemplos, al menos de cómo lo uso, es dentro de las rutas de API, al construir un servicio de back end, lidiando con forms en el front end, y también las cargas de authentication y todas las cosas que rodean la authentication en una aplicación de pila completa. Y esta es solo una lista corta. Solo puedes imaginar cuán larga puede llegar a ser cuando empiezas a tratar con bases de datos o ciencia de data y, en general, cualquier tipo de comunicación entre grandes sistemas. Entonces, 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, empresa, edad y proyectos. Estamos representando a una persona. Tal vez esto sea un directorio de empleados o tal vez sea un directorio de usuarios para un sitio como LinkedIn donde tenemos un usuario, queremos obtener su nombre, queremos 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 muchos primitivos geniales que están basados en JavaScript, y puede ser bastante extenso. De hecho, las API completas están alimentadas solo por proyectos JSON a través del formato de esquema abierto. Entonces, hablando de las API de backend, echemos un vistazo a una ruta de Fastify. En este caso, estamos definiendo una ruta de publicación. 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 podría ser el cuerpo? ¿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 code, la ruta de Fastify no tiene idea de lo que es porque en el contexto de Fastify como un framework, no estamos seguros de lo que el desarrollador tiene la intención de que llegue a través de su solicitud. Y no hay forma de que Fastify lo sepa cuando se está escribiendo el code o incluso compilando. Bueno, tal vez no cuando se está compilando. Hablaremos de eso más tarde.
2. Manejo de cuerpos de solicitud desconocidos con JSON Schema
Short description:
Al observar el objeto JSON anterior o tomar una porción de la mirada en el 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 el moldeado de tipo básico donde podemos decir body.name como cadena. Pero en ese caso, no hay verificación. Ahí es donde quiero presentar JSON Schema. JSON Schema es una API súper poderosa, te permite definir un objeto JSON con más JSON. JSON Schema utiliza un estándar o una especificación para permitir a un desarrollador definir la forma de un objeto JSON, dadas cosas como el tipo, listando las propiedades, diciendo qué propiedades son requeridas o no, listando si hay propiedades adicionales o no, e incluso siendo capaz de definir tipos más complejos. JSON schema, y esto solo raspa la superficie de JSON schema. Puedes usar expresiones regulares, puedes usar referencias, puedes usar operaciones lógicas como todas o cualquier y o algunas, y es simplemente tan poderoso cuando aprovechas JSON schema para definir tus objetos JSON.
Así que echemos otro vistazo aquí. Al observar el objeto JSON anterior o tomar una porción de mirada en el ID y el nombre, hay claves de cadena y valores de cadena. Y luego mirando la ruta de publicación nuevamente, sabemos que el cuerpo es desconocido que estamos desestructurando del objeto de solicitud. Entonces, ¿qué sería body.name? En este caso, imagina que el objeto JSON se está enviando a esta ruta como el cuerpo en la solicitud de publicación. 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é es eso? Bueno, es porque la propiedad del cuerpo proviene de esa solicitud objeto. Porque es desconocido. No se pueden derivar otros tipos de él de manera segura, en TypeScript. TypeScript dice, no, no, no, detente aquí. No quiero que sigas y uses propiedades en este objeto porque como el compilador de TypeScript, no sé qué es. Y no puedo proporcionarte la type safety que estás buscando. Entonces, aunque, como usuario, podríamos pensar, ah, la propiedad del nombre, siempre va a ser una cadena, no hay ifs-ans o peros al respecto. En este caso, TypeScript es como, bueno, no me dijiste eso. No tengo forma de asegurar eso. Entonces, hay algunos patterns que podemos usar. Puedes usar el moldeado de tipo básico donde podemos decir body.name como cadena, y le diremos a TypeScript que es una cadena. Pero en ese caso, no hay verificación. No hay forma de decir que asegurando que esa propiedad del nombre es realmente una cadena porque TypeScript es un type safety solo en tiempo de compilación. Durante el tiempo de ejecución, todo es solo JavaScript. No hay type safety en tiempo de ejecución. Entonces, ¿cuáles son algunas otras soluciones? Ahí es donde quiero presentar JSON Schema. JSON Schema es un API súper poderosa, te permite definir un objeto JSON con más JSON. ¿No es eso maravilloso? Bromas aparte, JSON Schema es en realidad increíblemente detallado, incluso más detallado que el objeto JSON que probablemente está definiendo. JSON Schema utiliza un estándar o una especificación para permitir a un desarrollador definir la forma de un objeto JSON, dadas cosas como el tipo, listando las propiedades, diciendo qué propiedades son requeridas o no, listando si hay propiedades adicionales o no, e incluso siendo capaz de definir tipos más complejos. Como puedes ver en el ejemplo de code, la propiedad de proyectos es de tipo array y luego podemos ir aún más lejos y decir que los elementos de ese array son de tipo cadena. JSON schema, y esto solo raspa la superficie de JSON schema. Puedes usar expresiones regulares, puedes usar referencias, puedes usar operaciones lógicas como todas o cualquier y o algunas, y es simplemente tan poderoso cuando aprovechas JSON schema para definir tus objetos JSON. Entonces, dicho todo esto, aunque, JSON schema, creo que incluso en su especificación, está destinado a la validation. La validation en el sentido de aquí está un esquema y
3. Seguridad de tipo con JSON Schema y TypeBox
Short description:
Le das eso a un validador y le dices que se asegure de que mi objeto JSON es realmente lo que estoy diciendo que se supone que debe ser a través del esquema. Lanza un error o dame alguna salida especial si no lo es. Así que con eso, tenemos nuestro objeto JSON, esa carga útil de antes en una mano. Ahora sabemos que podemos definir un esquema para él en la otra mano. Así que permíteme presentarte a TypeBox. TypeBox es una fantástica biblioteca que te permite no solo definir esquemas JSON utilizando una API similar a fluent, 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 type box. Y luego, en el bloque final 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 enviará ese tipo de esquema de cuerpo T a la propiedad de cuerpo del objeto de solicitud. Y eso es genial. Ahora hemos tipado la propiedad de cuerpo del objeto de solicitud.
aquí está un objeto JSON. Le das eso a un validador y le dices que se asegure de que mi objeto JSON es realmente lo que estoy diciendo que se supone que debe ser a través del esquema. Lanza un error o dame alguna salida especial si no lo es. Así que con eso, tenemos nuestro objeto JSON, esa carga útil de antes 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 type safety todavía? Realmente no. Todo lo que podemos hacer es validar que ese cuerpo entrante es lo que queremos que sea usando JSON schema. Pero vamos ahora. Es 2021. Hay algunas cosas bastante geniales que podemos hacer.
Así que, permíteme presentarte a TypeBox. TypeBox es una fantástica biblioteca que te permite no solo definir esquemas JSON utilizando una API similar a fluent, sino también derivar un tipo estático de ese esquema JSON en tu código TypeScript. Así que, 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, tipo, que está configurado 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 usaríamos esquema JSON, en cualquier nivel de validation o serialización.
Pero en esa última línea de la muestra, puedes ver tipo T igual a estático y luego el genérico parámetro tipo de T, que es esa constante declarada en la segunda línea. Y ahora ese tipo T es un string. La biblioteca de type box es lo suficientemente inteligente 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 type box. Puedes ver que comenzamos con type dot object y luego hemos enumerado nuestras seis propiedades, id y nombre, son de tipo string, y luego employed company age y projects son todos simplemente tipo opcional. Y luego dentro de esos tipos opcionales, definimos tipo Boolean para employed, string para company, número para age. Y en projects, puedes ver que estamos haciendo tipo string dentro de type array, que es la forma de type box de decir un array de strings. Y luego estamos definiendo un tipo T body schema va a ser igual a la resolución estática del tipo de ese esquema de cuerpo de type box. Y luego, en el bloque final 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 enviará ese tipo de esquema de cuerpo T a la propiedad de cuerpo del objeto de solicitud. Y eso es genial.
4. Paso de 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 respuesta saliente usando el esquema JSON. Ese paso de validación ocurre antes de que se ejecute la función del manejador. Entonces, si el paso de validación falla, entonces toda la ruta dará error y devolverá un error al usuario diciendo cuerpo inválido.
Ahora hemos tipado la propiedad del cuerpo del objeto de solicitud. Pero aún nos falta un paso clave aquí, pero este code ya lo resuelve. Es el paso de validation. Como puedes ver debajo de la cadena de agregar usuario, hay otro argumento añadido a esta ruta. Y es esquema y luego el objeto del cuerpo y luego es el esquema del cuerpo. Y no te confundas. Ese esquema del cuerpo es el JSON definido, devuelto por la API de TypeBox. Fastify tiene esta opción de esquema que permite a los desarrolladores verificar los data entrantes de una solicitud y la forma de respuesta saliente usando el esquema JSON. Bajo el capó, pasamos eso a otro validador JSON y validamos el contenido basado en los esquemas proporcionados. Ese paso de validation ocurre antes de que se ejecute la función del manejador. 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 función, entonces toda la ruta dará error y devolverá un error al usuario diciendo cuerpo inválido. Y luego creo que también incluye
5. Seguridad de Tipo y Validación con Fastify
Short description:
Dentro del manejador de funciones, Fastify valida la propiedad del cuerpo 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. El esquema JSON, TypeBox y Fastify juntos son herramientas poderosas.
el error del validador JSON también. Y con todo eso junto, dentro de nuestro manejador de funciones ahora, para cuando Fastify llegue allí, podemos pensar, está bien. Fastify ha validado la propiedad del cuerpo del objeto de solicitud utilizando el esquema que hemos definido usando TypeBox. También hemos proporcionado el tipo para esa propiedad del cuerpo utilizando los parámetros genéricos que es un tipo que es derivado directamente del mismo esquema JSON utilizado para validar esa propiedad. Y así, ahora, dentro de nuestro manejador de funciones, esa propiedad del cuerpo de la solicitud va a tener el tipo de esquema tbody. Y acceder a algo como body.name de hecho, devolverá una cadena segura de tipo. Y si estás accediendo a una de las propiedades opcionales, será de ese tipo. En este caso, body.number o indefinido. Y esta es mi parte favorita de todo esto. Pero también de alguna manera rompe un poco el problema en primer lugar. Donde TypeScript es una seguridad de tipo solo en tiempo de compilación, no basada en tiempo de ejecución. Y así, estamos dentro de un manejador de ruta y estás tomando ese cuerpo del objeto de solicitud. Si olvidamos el hecho de que Fastify va a validar nuestros datos entrantes para nosotros, tienes que recordar que puedes decir de manera insegura que el cuerpo es de este tipo. Y luego seguir con tu ruta. Y eso es más o menos 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 ponemos una línea dura o si confiamos lo suficiente en Fastify para decir que este manejador de ruta no se ejecutará si el paso de validación no tiene éxito, entonces podemos decir con confianza que el tipo de esa propiedad dentro de ese manejador de ruta va a ser lo que queremos que sea, lo que creemos que va a ser. Porque confiamos en ese paso de validación. Si ese paso de validación lógicamente es incorrecto y dejará pasar algo que no estamos preparados para, entonces vamos a tener un problema. Y desafortunadamente, incluso una aplicación de JavaScript no sería capaz de responder a eso. Sabes, probablemente tendría que dar un error. Si estás intentando acceder a una propiedad que no existe, porque de alguna manera se salta el paso de validación. Así que en resumen, el esquema JSON más TypeBox más Fastify es súper, súper poderoso. Y brevemente quiero saltar a VSCode y mostrarles todo esto en tiempo real para que puedan entender cómo se verá realmente en una aplicación Fastify real. Así que 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 plugin de servidor de creación. Vamos a hacer una espera, app.ready, obtener la dirección, y luego imprimir algunas cosas bonitas en la consola. Por 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 T de TypeBox con un genérico de estos parámetros genéricos nombrados. Los genéricos son increíblemente poderosos hoy en día. Dentro de este manejador de funciones, ahora puedes confiar más seguramente en la seguridad de tipo de tus datos dinámicos que se basa en el mismo esquema JSON que se utiliza para validarlos al mismo tiempo.
nuestro esquema del cuerpo. Y puedes ver que tiene una forma realmente interesante. El tipo de esquema del cuerpo es un objeto T de TypeBox con un genérico de estos parámetros genéricos nombrados. Donde la primera propiedad ID es de tipo T string. Name es de tipo T string. Employed es de tipo T Optional con el genérico parámetro T Boolean y así sucesivamente. De hecho, el proyecto uno se corta, pero va a ser T array, T string. Y podemos sortear eso viendo qué sería este proyecto. Puedes ver en el IntelliSense que es T Optional, T array, T string. Los genéricos son increíblemente poderosos hoy en día. Puedes ver aquí abajo este tipo, en el tipo T body schema, se ve un poco raro. Tenemos objeto vacío y objeto vacío y objeto, optional employed, optional company, optional age, optional projects, y luego y otro objeto ID y name. Bajando a nuestra ruta Fastify, puedes ver que estamos pasando ese esquema del cuerpo que se define aquí. Es un esquema JSON real a la propiedad body de nuestro parámetro de esquema aquí para Fastify. Y en este post genérico, estamos pasando ese tipo T body schema. Y si pasamos el cursor sobre body dentro del manejador de funciones puedes ver que estamos obteniendo ese tipo de objeto estático. Y pasa ese mismo genérico parámetro genérico nombrado que proviene del esquema del cuerpo. Y ahora cuando haces body.name, obtienes type string. Y si haces body.age, vas a obtener number o undefined. Y así, dentro de este manejador de funciones, ahora puedes confiar más seguramente en la seguridad de tipo de tus datos dinámicos que se basan en el mismo esquema JSON que se utiliza para validarlos al mismo tiempo. Así que volviendo atrás, quiero dar un gran agradecimiento a la colección de ilustraciones de Undraw Graphics. Sin ella, mi presentación sería mucho, mucho más aburrida. Y también todo esto fue construido con HighlightJS y la biblioteca TMCW Big. Lo recomiendo encarecidamente si tú mismo estás trabajando en una presentación. Quiero dar un gran agradecimiento por asistir a mi charla hoy. Espero que hayas aprendido algo. Y espero responder a tus preguntas en un poco. Si te gustaría seguirme en Twitter, ahí está mi cosa. También puedes seguirme en GitHub también. Me encanta conectar 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 todavía 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.
amigos. Me encanta hablar sobre Node.js y TypeScript. Y sí, espero verlos a todos por aquí. Gracias de nuevo. Hola. Wow. Hey. ¿Qué te parecen los resultados de la encuesta? Creo que estuvo genial. Creo que esa fue la respuesta que estaba esperando, 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 tocado. Y espero que, después de esta charla y quizás esta sesión de preguntas y respuestas, le den una oportunidad. Sí. Eso sería increíble, por supuesto. Bueno, por eso la gente viene a estos eventos, ¿verdad?, para conocer cosas nuevas y esperamos jugar con ellas y usarlas en sus empresas en producción.
QnA
Validación en Express y Fastify
Short description:
Express no tiene una 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 nuestros miembros de la audiencia es de Walker MAA, y él dice, gran charla. ¿Es Express también capaz de validar el cuerpo contra el esquema como Fastify? Sí. Entonces, Express, creo, así que no uso Express como mantenedor de Fastify. Tiendo a simplemente usar Fastify. Creo que no está incorporado en Express, pero hay validadores de esquema JSON muy similares que funcionarán de la misma manera que Fastify con Express que puedes usar como un middleware. Y la cosa con Fastify es que está incorporado, así que es como por defecto, no tienes que cargar ningún plugin especial. No hay, no hay nada que tengas que pasar al servidor. Utilizará un esquema según lo proporcionado a las rutas. Y bajo el capó, 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 allí. Entonces, la mayoría de la gente está familiarizada con algo como Joy, que proviene del conjunto de herramientas del marco web Happy. Pero para Fastify usamos AJV, resultó ser el más rápido, y fue el que más cumplió con las especificaciones en cuanto a la rapidez con la que itera tu esquema 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 características de validación y serialización. Typebox se centra únicamente en la construcción de esquemas JSON y puede ser utilizado con cualquier validador JSON.
Genial. La siguiente pregunta es de Christina, ¿es Typebox la versión de TypeScript de Joy? Sí, Joy es una gran biblioteca. Hace muchas cosas. En primer lugar, tiene una API similar a Typebox, que te permite construir tus esquemas JSON utilizando la API de Joy. Esa parte de es muy similar a Typebox, pero donde difieren es que creo que Joy todavía hará validación en el...tiene características de validación y serialización basadas en los esquemas que son generados por la API de Joy. Typebox no tiene ninguna validación, no tiene ninguna serialización. Es solo la parte de construcción de esquemas JSON. Funcionará bien con cualquier validador JSON.
Uso de Swagger OpenAPI y JSON Schema
Short description:
Swagger y OpenAPI se implementan en JSON schema. Puedes usar sus esquemas JSON para hacer que tus rutas Fastify sean seguras en términos de tipo al implementar un servidor API.
Bien, genial. La siguiente pregunta es de Zero Carol. Vale, genial, pero ¿por qué no usar Swagger OpenAPI? Esta es una excelente 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, están implementados en JSON schema. Todo lo que exportan tiene sus propios fragmentos de esquemas JSON que puedes usar y conectar a otras cosas, otras herramientas, como los sitios web automáticos de swagger que ves. Todos están alimentados 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, podrías usar esos mismos esquemas JSON para hacer que tus rutas Fastify sean seguras en términos de tipo cuando estás implementando ese servidor API.
Typebox e Interfaces TypeScript
Short description:
Typebox es una herramienta que genera tipos TypeScript y esquemas JSON, eliminando la necesidad de escribir y mantener esquemas e interfaces separados. Al confiar en 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 próxima charla es después de ti, 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 TypeScript así como el esquema JSON. Podrías hacerlo tú mismo a mano. Puedes escribir tu interfaz que implementa tu propio esquema JSON. La idea aquí es clásica de programador, no te repitas. ¿Por qué escribir dos esquemas? Además, si haces un cambio en el esquema, tienes que asegurarte de hacer ese cambio en la interfaz. No hay muchas formas geniales de validar que la interfaz que escribiste es realmente correcta. La implementación correcta de el esquema JSON. Los usuarios cometen errores todo el tiempo. Así que al dejar a una herramienta hacer esa traducción y convertir el esquema en un tipo o viceversa o ambos al mismo tiempo, eso es mucho más confiable. Sí, añade un poco de capa de seguridad.
Uso de JSON Schema para la Seguridad de Tipo
Short description:
La razón por la que animo encarecidamente a la gente a usar el esquema JSON en lugar de simplemente pasar una interfaz de tipo a su ruta es porque Fastify validará la cosa para la que estás proporcionando un tipo y es ese paso de validación el que realmente proporciona la seguridad de tipo que estás usando TypeScript en primer lugar. Otra pregunta de David Lime, ¿podría TypeBox ser utilizado para generar OpenAPI también? Creo que podrías encontrar algún nivel de interop allí donde podrías definir tus objetos o esquemas OpenAPI usando TypeBox y tener ese esquema JSON para usar donde quieras que uses tu esquema OpenAPI. Tenemos otra pregunta de Marnice preguntando si hay algo como TypeBox para el front end. TypeBox o APIs similares deberían funcionar en el front end. Todo depende de qué otras herramientas JSON tengas.
que las cosas no se queden obsoletas y desincronizadas. Genial. La siguiente pregunta es de Max Zdzadorov. ¿Por qué debería usar el esquema JSON y no simplemente declarar las interfaces de TypeScript? Bueno, creo que ya hemos tocado un poco ese tema, pero ¿tienes algunas ideas más que quieras compartir? Sí, compartiré un poco más. Así que, la razón por la que animo encarecidamente a la gente a usar el esquema JSON en lugar de simplemente pasar una interfaz de tipo a su ruta es porque Fastify validará la cosa para la que estás proporcionando un tipo y es ese paso de validación el que realmente proporciona la seguridad de tipo que estás usando TypeScript en primer lugar y esto entra un poco en la ética de, ¿qué es la seguridad de tipo? ¿Es realmente seguro si va a ser algo que ocurre en tiempo de ejecución y es ese nivel de seguridad y seguridad y si podemos acercarnos lo más posible a eso eso es más o menos el mejor escenario posible y llegar a ese punto, acercarse lo más posible a la seguridad o la seguridad de tipo es posible es tener que confiar en una herramienta como esta donde es el esquema JSON para la validación y el tipo es inferido por ese mismo esquema. Sí, genial.
Entonces, otra pregunta de David Lime, ¿podría TypeBox ser utilizado para generar OpenAPI también? Buena pregunta. No estoy muy familiarizado con OpenAPI, pero creo que sí. Creo que podrías encontrar algún nivel de interop allí donde podrías definir tus objetos o esquemas OpenAPI usando TypeBox y tener ese esquema JSON para usar donde quieras que uses 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, sólo lo devuelve durante el tiempo de ejecución. Está en el código. Dicho esto, es JSON en una variable. Puedes 100% convertirlo en 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. Vale. Creo que esa es la última pregunta que tenemos en este momento. Tenemos otra. Esta pregunta es de Marnice. ¿Sabes algo como TypeBox pero para el front end? TypeBox o APIs similares deberían funcionar en el front end. Todo depende de qué otras herramientas JSON tienes. TypeBox es sólo un módulo de JavaScript que tiene una API funcional muy fácil de usar que devuelve un objeto JSON. No creo que esté usando nada especial de node JS. Si lo hay, creo que la interop con el navegador estaría bien. De lo que puedo recordar, no sé si TypeBox puede simplemente conectarse y jugar con un navegador. Debería estar bien. Si no, definitivamente hay herramientas alternativas que podrían ser. O PRs Bienvenidos. Sí, exactamente. Alguien agradable. Si no tienes nada que hacer durante el fin de semana, puedes probarlo en tu front end.
Conclusión de la Sesión de Preguntas y Respuestas
Short description:
Gran charla, Ethan, mi favorita del día hasta ahora. Muchas gracias por tu gran charla y esta informativa sesión 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. Genial. Gran charla, Ethan, mi favorita del día hasta ahora. Puedes llevarte eso a casa y decirle a tu mamá que tienes un gran fan.
Y con eso, me gustaría terminar esta sesión de P&R. Muchas gracias por tu gran charla y esta informativa sesión de P&R y espero verte de nuevo 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.
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.
Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.
¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.
¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos. Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side.
Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana! Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into: - Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.
Comments