Asegurando la Calidad del Código TypeScript con expect-type

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

La tipificación estática de TypeScript detecta muchos errores, pero ¿cómo aseguramos que nuestras definiciones de tipo sean correctas? Esta charla introduce las pruebas de tipos y demuestra su implementación usando expect-type, una biblioteca ligera para esto exactamente.

Cubriremos:

- El concepto de pruebas de tipos y su importancia en proyectos de TypeScript
- Un análisis profundo de las características y API de expect-type
- Ejemplos prácticos de uso de expect-type para detectar errores sutiles de tipo
- Integración de expect-type en proyectos existentes y pipelines de CI
- Casos de uso avanzados y mejores prácticas

Basándonos en escenarios del mundo real, exploraremos cómo expect-type puede usarse como una biblioteca independiente, o a través de Vitest que lo incluye de forma nativa, para mejorar la seguridad de tipos y la calidad del código.

Adecuado para desarrolladores de TypeScript de todos los niveles, esta charla te equipará con las herramientas y el conocimiento para escribir código más robusto y seguro en tipos usando expect-type.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

Misha Kaletsky
Misha Kaletsky
9 min
21 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Expect Type es una biblioteca para pruebas a nivel de tipos en TypeScript. Te permite escribir pruebas para tus tipos, asegurando que se mantengan como deseas a medida que tu base de código evoluciona. La biblioteca admite una amplia gama de características de TypeScript, incluidos los type guards, características avanzadas y pruebas de tipos genéricos. También se integra con varios marcos de prueba, incluido VTest. Las mejores prácticas incluyen probar solo cosas útiles, hacer que los genéricos sean específicos y ejecutar pruebas como parte de los pipelines de CI. Comprender los mensajes de error y corregir errores de tipo son aspectos importantes del uso de la biblioteca.

1. Introducción a la biblioteca Expect Type

Short description:

Expect Type es una biblioteca para pruebas a nivel de tipo en TypeScript. Te permite escribir pruebas para tus tipos, asegurando que se mantengan como deseas a medida que tu base de código evoluciona. Esta biblioteca es una buena manera de mejorar tus habilidades en TypeScript y entender cómo TypeScript interactúa con tu base de código. No tiene paso de compilación, dependencias ni sobrecarga en tiempo de ejecución. Puedes usarla en código de producción para tipos complejos sin preocupaciones de rendimiento. El uso básico implica hacer afirmaciones sobre valores usando la función expect type.

Hola, mi nombre es Misha Koletsky. Soy ingeniero de software y soy el autor de Expect Type, una biblioteca para pruebas a nivel de tipo en TypeScript. Entonces, ¿qué es? Es una biblioteca disponible a través de npm que te permite escribir pruebas para tus tipos. Así que, si estás familiarizado con escribir pruebas para el comportamiento en tiempo de ejecución, esto es muy similar, y será una sintaxis muy familiar para cualquiera que esté familiarizado con la funcionalidad Expect de Jest o VTest, pero esto te permite escribir pruebas para los tipos reales de tu código TypeScript en lugar del comportamiento en tiempo de ejecución o los valores reales.

Esto es útil para asegurarte de que tus tipos son lo que piensas que son, pero también asegura que se mantengan como deseas a medida que pasa el tiempo. Así que, puede ayudarte a protegerte contra colegas o tu futuro yo de cometer un error al retroceder tipos, agregar anys y ese tipo de cosas a medida que tu base de código evoluciona. Esto también es una muy buena manera de mejorar tus propias habilidades en TypeScript. Así que, si quieres aprender más sobre TypeScript y evaluar cómo TypeScript interactúa con tu base de código, esta es una muy buena manera de hacerlo y de documentar cómo TypeScript funciona en tu equipo.

Todo esto viene sin paso de compilación. Así que, no hay ningún CLI extra que necesites ejecutar. No hay ninguna extensión de IDE VS code que necesites instalar o algo por el estilo. Todo aparecerá en cualquier IDE que uses, y los errores, si los hay, aparecerán cuando ejecutes TSC, el CLI de TypeScript, que con suerte ya estás usando si estás usando TypeScript. No hay dependencias, así que no hay bloat que agregue a tus node modules. Si miras el GitHub después de esta charla, verás que son solo un puñado de archivos TypeScript. Hay algunos genéricos complicados en su implementación, pero nada de eso debería ser algo de lo que debas preocuparte como usuario de expect type. No hay una versión de parche multi-megabyte de TypeScript que se envíe con ella. Son solo tipos bastante simples. Y tampoco hay sobrecarga en tiempo de ejecución. Así que, hemos visto algunos equipos usando expect type en su código de producción, de hecho. No tiene que ejecutarse como parte de un conjunto de pruebas.

Así que, si tienes tipos muy, muy complejos, genéricos, inferidos que son muy difíciles de acceder desde otros módulos, incluido el código de prueba, puedes simplemente poner afirmaciones de expect type directamente en tu código de producción, y no hay preocupación de rendimiento porque todas las funciones que vienen con la biblioteca no tienen sobrecarga en tiempo de ejecución. Así que, no necesitas ningún truco especial de compilador para evitar la sobrecarga de rendimiento. Y como se mencionó, tampoco hay dependencias.

Así que, esto es lo que parece el uso básico. La exportación principal es esta función expect type a la que pasarás un valor, y luego básicamente harás afirmaciones sobre ese valor. Así que aquí, estamos diciendo que esperamos que 42 sea un número. Esperamos que hello sea una cadena, lo cual es obviamente algo que esperarías. En la vida real, no probarías valores literales, pero importarías algo, digamos, de tu código de producción, y te asegurarías de que un cierto valor sea un número o una cadena. También puede hacer tipos complejos. Así que, aquí hay un ejemplo apenas más complejo de un pedido de café.

2. Advanced Features and Generic Type Testing

Short description:

Podemos escribir afirmaciones para asegurar que los objetos tienen propiedades y tipos específicos. Expect type soporta una amplia gama de características de TypeScript, incluyendo type guards, características avanzadas y pruebas de tipos genéricos. También te permite probar propiedades que deberían o no estar presentes en un objeto.

Probablemente queramos ir más allá de simplemente decir que el pedido de café es un objeto. Queremos asegurarnos de que es un objeto de un cierto tipo. Así que aquí, escribimos una afirmación que dice que el pedido de café tiene dos propiedades, una que se llama type, que es una string, y otra que se llama quantity, que es un tipo number.

Hay muchas más características. Así que, prácticamente cada característica que puedas imaginar en TypeScript, cualquier cosa que tenga funcionalidad nativa, puedes probarla con expect type. Así que, una bastante común que hay un ejemplo aquí es que tenemos dos valores, ambos tienen legs, pero tienen otras propiedades que tal vez no son relevantes para esta prueba. Así que, puedes escribir, hemos escrito dos afirmaciones aquí del mismo tipo. Una, nos hemos asegurado de que horse tiene tipo de legs number, y también una table. Pero obviamente, no necesitamos preocuparnos por esas propiedades extra como que una table usualmente no tiene un name y un horse usualmente no tiene un material. Así que, esto es similar a solo para coincidir con el helper de objeto, si estás familiarizado con eso. También se soportan características más avanzadas de TypeScript.

Así que, aquí tenemos una función de type guard donde nos aseguramos de que la entrada a una función es de tipo date. Así que, puedes verificar que la función devuelve un Boolean, pero también puedes verificar que protege entradas de tipo date. Así que, eso es lo que hace esa segunda afirmación allí. Hay muchos ejemplos como este. Hay un helper de asserts similar. Realmente vale la pena explorar la documentación para encontrarlos todos. Y pruebas de tipos genéricos también. Así que, no tienes que pasar un valor a la función expect type, puedes simplemente pasar un tipo genérico que en realidad no existe en tiempo de ejecución en absoluto. Así que, aquí tenemos una magic box que tiene contents y su propiedad locked.

3. Integration with Test Frameworks

Short description:

Podemos pasar un tipo genérico a la función expect type para asegurar tipos de propiedades específicos. Expect type soporta la integración de TypeScript con varios marcos de prueba, incluyendo VTest. VTest proporciona características adicionales, como mapear errores a nombres de prueba. Vale la pena usarlo si ya estás usando VTest.

Y aquí lo estamos pasando como un tipo genérico en la función expect type y nos aseguramos de que la propiedad contents tenga tipo number.

Hay muchísimos más, como dije, vale la pena leer la documentación. Hay ejemplos fáciles de entender para prácticamente todo lo que quieras hacer en TypeScript.

Quiero hablar brevemente sobre la integración con marcos de prueba también. Solo depende de TypeScript, por lo que puedes usarlo con Jest o Mocha o Playwright o cualquier marco de prueba que te guste. Pero hay un soporte incorporado para expect type en VTest, del cual obtienes algunas ventajas. Lo usas de la misma manera exacta, pero VTest hará un seguimiento de cuándo has llamado a expect type y lo mapeará a la prueba que está llamando a esa función para que puedas ver errores asociados con nombres de prueba, lo cual puede ser útil una vez que tu suite de pruebas se vuelva grande y más complicada.

Así que esto es algo que vale la pena usar. Si estás usando VTest, puedes exportar la función expect type directamente desde VTest. No necesitas instalar la biblioteca expect type si estás usando VTest.

4. Best Practices and Error Handling

Short description:

Solo prueba cosas que sean realmente útiles. Las bibliotecas deben tener pruebas de tipo. Las aplicaciones probablemente no deberían. Busca casos extremos. Haz que los genéricos sean específicos. Usa ejemplos de tipos genéricos para probar. Ejecutar afirmaciones de expect type como parte de los pipelines de CI. Observa cómo se ven los errores.

Algunas mejores prácticas que he recogido de años tanto construyendo como usando expect type de, no lo uses todo el tiempo. Solo prueba cosas que realmente sea útil probar. Y una buena regla general para esto es que las bibliotecas deberían tener pruebas de tipo para asegurarse de que los consumidores de esas bibliotecas puedan usarlas de la manera correcta. Pero las aplicaciones probablemente no deberían. Si estás escribiendo una prueba a nivel de tipo para decir, mi componente React devuelve un nodo React, eso probablemente no sea lo más útil de hacer. No es una regla al 100%, pero básicamente, probablemente no valga la pena el tiempo para probar la mayoría del código de aplicación.

Pero obviamente, las aplicaciones pueden tener funciones de utilidad que tienen propiedades en común con las bibliotecas también. Así que no. Así que toma esto con un grano de sal. Busca casos extremos. Así que el tipo de ayudante toEqual que viste antes puede detectar cualquier propiedad nunca nula, propiedades de solo lectura. Así que eso es algo que es realmente importante verificar en tus pruebas de tipo. Así que ahí es donde resulta útil. Y luego asegúrate de que realmente lo estás ejecutando como parte de tus pipelines de CI. Así que todo lo que necesitas hacer es ejecutar TSC, lo cual deberías estar haciendo de todos modos para tu base de código. Y luego cualquier afirmación de expect type aparecerá como errores en tus pipelines de CI también. Con suerte, los verás antes de que llegue a CI si estás usando un IDE que soporte TypeScript.

Otro consejo es hacer que los genéricos sean específicos. A veces así es como lo expreso. Pero puedes ver un ejemplo aquí. Así que en lugar de probar un tipo genérico directamente, querrás usar un ejemplo del tipo genérico. Así que digamos que eres el autor de una biblioteca llamada Zod, que es una forma de hacer validaciones en tiempo de ejecución con fuerte soporte de TypeScript. En lugar de intentar probar el ayudante z.object, aquí en este ejemplo estamos creando un esquema de persona. Y luego nos aseguramos de que devuelva el tipo que esperarías de ese esquema. Eso tiende a ser una forma mucho mejor de usar expect type que intentar realmente probar una especie de función genérica en bruto.

Mostraré una demostración rápida solo para que puedas ver cómo se ven los errores porque mucho de este código es, puedes ver cómo se ven las afirmaciones, pero realmente quieres ver cómo se ve cuando algo sale mal. Así que dividamos esto en dos. Así que aquí tenemos una afirmación diciendo que esta función add tiene parámetros de tipo number number, lo cual parece una prueba apropiada, pero está fallando. Y si miramos este mensaje de error, podemos ver por qué. Está un poco comprimido en mi pantalla, así que cerremos eso.

5. Reading Error Messages and Advanced Options

Short description:

Comprender los mensajes de error. Corregir errores de tipo en el código. Opciones más avanzadas para probar tipos. Enlaces a NPM, GitHub, sitio web de Vitest. Disponible en X bajo mmcalc.

Number number doesn't satisfy the constraint zero number one. Y luego hay un poco de arte para leer el mensaje de error, pero básicamente es esa línea inferior la parte importante. Type number is not assignable to expected number, it's the actual string. Así que eso nos dice que algo ha salido mal en el código que escribimos. Oh sí, en nuestra función add, accidentalmente dijimos que estaríamos sumando un número y una cadena. Esto debería ser number.

Y luego deberíamos ver que el error desaparece una vez que las divisiones de pila se actualizan. La segunda afirmación, puedes ver que dice que devuelve un Boolean. Esto es solo para mostrarte otro ejemplo de un mensaje de error y cómo necesitas leerlos. Y esto básicamente dice que expect type of Boolean has of number has no call signatures. Así que puedes ver que es porque obviamente deberíamos estar devolviendo un número en su lugar, y luego el error desaparece.

Ese es solo un ejemplo muy rápido de cómo leer los mensajes de error. Hay un montón más que viene de expect type. Si estás interesado en algunas opciones más avanzadas de cómo puedes probar tus tipos, entonces puedes venir y echar un vistazo a algunas de estas propuestas. Tengo todos los enlaces aquí. Así que está donde esperarías encontrarlo en NPM, en GitHub. Hay documentación para ello en el sitio web de Vitest, y también estoy disponible en X bajo mmcalc. Muchas gracias. 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

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
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.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced 2022React Advanced 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
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.
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
Top Content
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.
Deja de Escribir Tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir Tus Rutas
Top Content
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.
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
This talk discusses the performance issues in TypeScript builds and introduces a new feature called isolated declarations. By running the compiler in parallel and using isolated modules, significant performance gains can be achieved. Isolated declarations improve build speed, compatibility with other tools, and require developers to write types in code. This feature has the potential to further increase performance and may be available in TypeScript soon.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced 2021React Advanced 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.

Workshops on related topic

React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
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.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
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.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Featured 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.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced 2022React Advanced 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.
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