Seguridad de tipo en tiempo de ejecución en TypeScript

Rate this content
Bookmark

Todos sabemos que TypeScript nos ayuda de muchas maneras. El compilador nos guía durante nuestro trabajo, asegurando que cada dato se coloque en su lugar correspondiente.

Pero hay algunas limitaciones. TypeScript fue diseñado para ayudarnos durante el tiempo de desarrollo. Después del paso de compilación, aún no podemos estar seguros al 100% de lo que puede suceder durante la ejecución...

¡A menos que hagamos algo al respecto y nos defendamos contra errores no deseados en tiempo de ejecución! Esta charla sirve como una introducción al problema y explica cómo podemos enfrentarlo para hacer nuestras aplicaciones más a prueba de errores.

FAQ

TypeScript es un superconjunto de JavaScript, lo que significa que cualquier código JavaScript es también código TypeScript válido. TypeScript se compila a JavaScript para ser interpretado por diferentes entornos de ejecución como Node.js o navegadores.

No, TypeScript fue diseñado para realizar verificaciones de tipos en tiempo de compilación y no en tiempo de ejecución. Esto significa que una vez que el código se compila a JavaScript, se pierden todas las interfaces y tipos definidos.

Para la validación de tipos en tiempo de ejecución en TypeScript, se pueden utilizar validadores de tipos en tiempo de ejecución, validadores de esquemas o decodificadores JSON. Existen varias bibliotecas que ofrecen estos servicios, permitiendo elegir según criterios como rendimiento o popularidad.

Algunas de las principales bibliotecas para la validación de tipos en tiempo de ejecución en TypeScript incluyen Yap, AJV, Zad, IOTS y Runtypes. Estas bibliotecas ofrecen diferentes enfoques y rendimientos para la validación de datos.

ZAD ofrece esquemas primitivos para tipos básicos y permite crear esquemas más complejos para objetos o matrices. Con ZAD, se pueden analizar datos en tiempo de ejecución, validando si cumplen con el esquema definido y devolviendo el valor o un error según el resultado del análisis.

ZAD es frecuentemente mencionado en el ecosistema de React por su sencilla API y la eficacia en la validación de tipos en tiempo de ejecución, lo que facilita la integración y el manejo de datos dinámicos en aplicaciones React.

Puedes encontrar información detallada sobre el rendimiento de diferentes bibliotecas de tipos en tiempo de ejecución en el repositorio de GitHub 'TypeScript runtime type benchmarks'. Este repositorio proporciona estadísticas y benchmarks de rendimiento para ayudarte a elegir la biblioteca más adecuada.

Kajetan Świątek
Kajetan Świątek
8 min
29 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

TypeScript no tiene verificación de tipos en tiempo de ejecución, pero existen bibliotecas disponibles para la validación de tipos en tiempo de ejecución. ZAD es una popular biblioteca de validación de tipos en tiempo de ejecución en el ecosistema de React, que ofrece primitivas de esquema para validaciones específicas en tipos primitivos y soporte para datos complejos como objetos y matrices. ZAD también proporciona métodos para analizar valores y manejar el análisis correcto o fallido con objetos de error.

1. Introducción a TypeScript y Tipos en Tiempo de Ejecución

Short description:

Hola a todos, hoy me gustaría hablarles sobre un tema muy interesante relacionado con TypeScript, es decir, la seguridad de tipos en tiempo de ejecución. TypeScript no es perfecto y nunca cumplirá todas las expectativas de todos los usuarios. En las etapas iniciales de TypeScript, surgió la pregunta sobre la posibilidad de tener un sistema de tipos en tiempo de ejecución, pero se estableció que la verificación de tipos en tiempo de ejecución queda fuera de los objetivos de diseño. TypeScript se compila a JavaScript, por lo que no hay validación de tipos en tiempo de ejecución. Una solución potencial es utilizar tipos o validadores en tiempo de ejecución, y existen varias bibliotecas disponibles. Puedes elegir una biblioteca en función de criterios como rendimiento y popularidad. Las cinco principales bibliotecas de tipos en tiempo de ejecución según las estrellas de GitHub son Yap, AJV, Zad, IOTS y Runtypes.

Hola a todos, hoy me gustaría hablarles sobre un tema muy interesante relacionado con TypeScript, es decir, la seguridad de tipos en tiempo de ejecución, pero antes de eso, me gustaría presentarme. Soy Kejtan Świątek, soy un desarrollador front-end de Wrocław, y pueden encontrar mi trabajo en Twitter, en kejtansw, o en mi blog kejtan.dev, donde ocasionalmente escribo sobre programación funcional en el front-end y cosas que aprendo en el camino.

Permítanme comenzar esta presentación afirmando que TypeScript no es perfecto, y sé que es una afirmación bastante audaz, considerando que esta es una conferencia de TypeScript, y espero que los organizadores no me prohíban de por vida por ello, pero lo que quiero decir es que TypeScript, al igual que cualquier otra herramienta, nunca cumplirá todas las expectativas de todos sus usuarios. Y en las etapas iniciales de TypeScript, una de las expectativas era tener un sistema de tipos en tiempo de ejecución, y la comunidad preguntó si era una pieza faltante del ecosistema de TypeScript. Esta pregunta fue respondida bastante temprano y en 2014 se estableció que la verificación de tipos en tiempo de ejecución queda fuera de los objetivos de diseño de TypeScript. Y como pueden ver, esto generó sentimientos encontrados en la comunidad. Pero creo que después de ocho años desde esa respuesta, esto se ha asentado en nuestras mentes como desarrolladores de TypeScript. Y nos hemos acostumbrado bastante al hecho de que TypeScript en su núcleo es simplemente JavaScript. Y lo que quiero decir con eso es que después de que terminamos nuestro trabajo con nuestro código, se compila a JavaScript para ser interpretado por diferentes entornos de ejecución como Node.js o nuestros navegadores. Así que nos deshacemos de todas nuestras interfaces y tipos. Por lo tanto, no tenemos validación de tipos en tiempo de ejecución.

Y el ejemplo más simple de eso puede ser obtener algunos datos de APIs externas. Este es un código común en nuestros proyectos de TypeScript. Tenemos una interfaz para nuestros datos en tiempo de ejecución. Obtenemos estos datos de alguna API y analizamos la respuesta a un objeto JSON. Pero pueden ver en la línea 7 que declaramos que nuestro valor en tiempo de ejecución es de tipo Hero, pero la pregunta aquí es ¿qué tan seguros estamos de que el objeto de retorno aquí es realmente de tipo Hero? Y les puedo asegurar que en este ejemplo, no estamos 100% seguros de eso. Entonces, ¿cuál es la solución potencial a este problema? Podrían ser los tipos en tiempo de ejecución, también conocidos como validadores en tiempo de ejecución o validadores de esquemas o decodificadores JSON. Y ¿qué hay del ecosistema de TypeScript? Como con casi todos los problemas, podemos implementarlo nosotros mismos o usar una biblioteca para ello. Afortunadamente, para los tipos en tiempo de ejecución o los validadores en tiempo de ejecución, existen varias bibliotecas que hacen precisamente eso. Y puedes elegir una biblioteca que se adapte a tus necesidades. Hay diferentes criterios que puedes utilizar. Por ejemplo, el rendimiento de dicho análisis. Y la mejor fuente de información al respecto se llama TypeScript runtime type benchmarks. Es un repositorio de GitHub y puedes encontrarlo bajo el código QR aquí en la esquina. Básicamente, te brinda diferentes estadísticas sobre diferentes tipos de análisis y afirmación de tipos, y te proporciona benchmarks de rendimiento de esos para diferentes bibliotecas. Y al igual que con cualquier otra biblioteca, otro criterio que puedes utilizar para encontrar la que se adapte a tus necesidades es la popularidad. Y a todos nos gusta medir la popularidad por las estrellas de GitHub. Así que aquí lo tienes, las cinco principales bibliotecas de tipos en tiempo de ejecución según el número de estrellas de GitHub. Y esas son Yap, AJV, Zad, IOTS y Runtypes. Aquí me gustaría darles un pequeño adelanto de una de esas bibliotecas.

2. ZAD: Biblioteca de Validación de Tipos en Tiempo de Ejecución

Short description:

ZAD es una biblioteca de validación de tipos en tiempo de ejecución que se utiliza a menudo en el ecosistema de React. Proporciona primitivas de esquema para JavaScript y TypeScript, lo que permite validaciones específicas en tipos primitivos como cadenas y números. ZAD también admite la creación de esquemas para datos complejos como objetos y matrices, con la capacidad de extraer tipos inferidos del esquema creado. Además, ZAD ofrece combinadores para extender y fusionar esquemas de objetos, así como seleccionar y omitir campos. En la práctica, ZAD proporciona métodos como parse y SaveParse para analizar valores y manejar el análisis exitoso o fallido con objetos de error.

ZAD: Biblioteca de Validación de Tipos en Tiempo de Ejecución

Y para eso he elegido ZAD. Y no porque sea el más rendimiento o el más popular, simplemente porque se menciona con frecuencia en el ecosistema de React y también tiene una API bastante sencilla.

Comenzando desde lo básico, ZAD tiene algo llamado primitivas de esquema, es decir, esquemas primitivos para cada tipo primitivo de JavaScript y TypeScript, como cadenas, números, booleanos, incluso fechas o tipos vacíos como undefined o null. A partir de ahí, podemos ser más específicos. Por ejemplo, crear un esquema para una cadena que tenga un número máximo de caracteres o que tenga un formato de correo electrónico o de URL, algo así. Y también para números, como un número mayor que algún valor o menor que algún valor o un valor entero y muchos otros métodos específicos para esas primitivas de esquema.

También podemos crear esquemas para datos más complejos como objetos o matrices. Por ejemplo, con el método object, creamos nuestro esquema para el tipo de perro pasando la estructura deseada con nombre y edad. Pero en lugar de valores, pasamos las primitivas de esquema para esos campos. Lo que también es genial de ZAD es que podemos extraer el tipo inferido del esquema creado, por lo que podemos crear un tipo de perro utilizando el tipo inferido de ZAD. Si también estás interesado en reutilizar nuestros esquemas, hay algunos combinadores para extender y fusionar esquemas de objetos y para seleccionar y omitir algunos campos del esquema de objeto.

¿Cómo podemos usar nuestros esquemas en la práctica? Por ejemplo, creemos un esquema para un tipo de cadena básico. Luego podemos usar el método parse para analizar nuestro valor. Pasamos nuestro valor en tiempo de ejecución y si el análisis es exitoso, simplemente devuelve nuestro valor sin cambios. Pero si falla, muestra un error de ZAD. Pero si no nos gusta lanzar errores, podemos usar el método SaveParse y devuelve un objeto con información sobre si el análisis fue exitoso o no. Y si lo es, devuelve nuestros datos como carga útil o nuestro objeto de error si el análisis falla.

Eso es todo de mi parte. Les he dado toda la teoría detrás de los validadores en tiempo de ejecución, les he dado una lista de posibles soluciones y también les he presentado una de ellas. Ahora es su turno de probarlo en su proyecto. Muchas gracias por escuchar y asistir a esta conferencia y que tengan un buen día.

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

TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.
Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
No pensamos en React como si tuviera sus propios tipos. Pero los tipos de React son una parte fundamental del marco de trabajo - supervisados por el equipo de React, y coordinados con las principales lanzamientos de React.En esta charla de codificación en vivo, veremos todos los tipos que te has estado perdiendo. ¿Cómo obtienes el tipo de props de un componente? ¿Cómo sabes qué ref toma un componente? ¿Deberías usar React.FC? ¿Y qué pasa con JSX.Element?Te irás con un montón de ideas emocionantes para llevar a tus aplicaciones de React, y esperamos que con una nueva apreciación por las maravillas de React y TypeScript trabajando juntos.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Cuanto más trabajas en una aplicación, más complicado se vuelve su enrutamiento y más fácil es cometer un error. "¿Se llamaba la ruta usuarios o usuario?", "¿Tenía un parámetro id o era userId?". Si solo TypeScript pudiera decirte cuáles son los nombres y parámetros posibles. Si solo no tuvieras que escribir una sola ruta más y dejar que un complemento lo haga por ti. En esta charla repasaremos lo que se necesitó para traer rutas automáticamente tipadas para Vue Router.
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
TypeScript Congress 2023TypeScript Congress 2023
31 min
Haciendo Magia: Construyendo un Marco de Trabajo Primero-TypeScript
Voy a profundizar en los internos de Nuxt para describir cómo hemos construido un marco de trabajo primero-TypeScript que está profundamente integrado con el IDE del usuario y la configuración de comprobación de tipos para ofrecer seguridad de tipo de pila completa de extremo a extremo, sugerencias para diseños, middleware y más, opciones de configuración de tiempo de ejecución tipadas e incluso enrutamiento tipado. Además, destacaré lo que más me emociona hacer en los días venideros y cómo TypeScript hace eso posible no solo para nosotros sino para cualquier autor de bibliotecas.
Compilaciones de TypeScript más rápidas con --isolatedDeclarations
TypeScript Congress 2023TypeScript Congress 2023
24 min
Compilaciones de TypeScript más rápidas con --isolatedDeclarations
Top Content
La verificación de tipos en una base de código TypeScript puede ser lenta, especialmente para monorepos que contienen muchos proyectos que necesitan usar el verificador de tipos para generar archivos de declaración de tipos. En esta charla, presentamos, por primera vez, una nueva característica de TypeScript en la que estamos trabajando llamada “Declaraciones Aisladas” que permite que los archivos DTS se generen sin usar el verificador de tipos en absoluto. ¡Esto abre la puerta a una generación de declaraciones más rápida en TypeScript mismo, así como en herramientas externas escritas en otros lenguajes como ESBuild y swc. Verás cómo usar esta nueva opción, y tal vez (solo tal vez) te convencerás de los beneficios de los tipos de retorno explícitos. Lo más importante, mostraremos cómo las Declaraciones Aisladas permiten compilaciones paralelas para distribuir el trabajo a través de tus núcleos de CPU para mejorar significativamente la velocidad de compilación de tus proyectos TypeScript.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
¿Por qué estamos los desarrolladores tan obsesionados con desacoplar cosas que son de naturaleza acoplada? tRPC es una biblioteca que reemplaza la necesidad de GraphQL o REST para APIs internas. Al usarla, simplemente escribes funciones de backend cuyas formas de entrada y salida se infieren instantáneamente en tu frontend sin ninguna generación de código; haciendo que la escritura de esquemas de API sea cosa del pasado. Es ligera, no está vinculada a React, se puede almacenar en caché HTTP y se puede adoptar de forma incremental. En esta charla, daré un vistazo a la DX que puedes obtener de tRPC y cómo (y por qué) empezar.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿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.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Workshop
Josh Goldberg
Josh Goldberg
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.
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
Workshop
Maurice de Beijer
Maurice de Beijer
En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.
 
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
 
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
 
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.
Tipos avanzados de TypeScript para diversión y confiabilidad
TypeScript Congress 2022TypeScript Congress 2022
116 min
Tipos avanzados de TypeScript para diversión y confiabilidad
Workshop
Maurice de Beijer
Maurice de Beijer
Si estás buscando sacar el máximo provecho de TypeScript, este masterclass es para ti! En este masterclass interactivo, exploraremos el uso de tipos avanzados para mejorar la seguridad y previsibilidad de tu código TypeScript. Aprenderás cuándo usar tipos como unknown o never. Exploraremos el uso de predicados de tipo, guardias y verificación exhaustiva para hacer tu código TypeScript más confiable tanto en tiempo de compilación como en tiempo de ejecución. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapeo de tipos. Y comenzaremos a programar en el sistema de tipos de TypeScript utilizando tipos condicionales e inferencia de tipos.
¿Estás familiarizado con los conceptos básicos de TypeScript y quieres profundizar? Entonces únete a mí con tu computadora portátil en este masterclass avanzado e interactivo para aprender todos estos temas y más.
Puedes encontrar las diapositivas, con enlaces, aquí: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
Y el repositorio que utilizaremos está aquí: https://github.com/mauricedb/ts-advanced
Dominando Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Dominando Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner es moderno, rápido y no requiere bibliotecas adicionales, pero entenderlo y usarlo bien puede ser complicado. Aprenderás a utilizar Node.js test runner a su máximo potencial. Te mostraremos cómo se compara con otras herramientas, cómo configurarlo y cómo ejecutar tus pruebas de manera efectiva. Durante la masterclass, haremos ejercicios para ayudarte a sentirte cómodo con el filtrado, el uso de afirmaciones nativas, la ejecución de pruebas en paralelo, el uso de CLI y más. También hablaremos sobre trabajar con TypeScript, hacer informes personalizados y la cobertura de código.