Comprendiendo los tipos como conjuntos

Rate this content
Bookmark

La charla presentará el concepto de variación en relación con los tipos genéricos. Luego mostrará cómo este concepto se aplica a TypeScript. Mientras se muestran ejemplos de TypeScript, trataré de ayudar a la audiencia a formar una intuición sobre la variación. Finalmente, analizaremos qué significan algunas de las decisiones de diseño en TypeScript para la solidez del código que escribimos y cuáles son algunos puntos ciegos que tiene el compilador.

FAQ

Tizian Cernikva Dragomir trabaja en el equipo de infraestructura de JavaScript en Bloomberg y contribuye al compilador de TypeScript. Es conocido por responder preguntas sobre TypeScript en Stack Overflow.

Un tipo es un conjunto de valores que la variable puede poseer. Por ejemplo, el tipo 'number' en TypeScript es el conjunto de todos los valores de punto flotante.

En TypeScript, se pueden crear tipos personalizados definiendo tipos que describan un conjunto con un único valor, como 'Sí', '1' o 'Verdadero'. Estos tipos se denotan por sus valores asociados.

El tipo 'never' representa un conjunto vacío sin valores posibles en tiempo de ejecución, mientras que 'unknown' representa el conjunto de todos los valores posibles en JavaScript.

La unión de tipos en TypeScript, utilizando el operador pipe, crea un nuevo tipo que puede contener valores de los tipos constituyentes. Por ejemplo, una unión de los tipos '1', 'True' y 'Yes' puede contener cualquiera de esos valores, pero no otros como 'No'.

La intersección de tipos en TypeScript resulta en un conjunto que solo contiene valores comunes a los tipos intersectados. Si no hay valores comunes, como en la intersección de 'string' y 'number', el resultado es el tipo 'never'.

En TypeScript, un tipo de objeto puede permitir objetos que tengan más propiedades que las definidas en el tipo. Esto es parte del pragmatismo de TypeScript para atrapar ciertos errores sin ser totalmente restrictivo.

El método 'object.keys' devuelve una matriz de strings, y TypeScript no permite usar directamente estas claves para indexar el objeto original sin una afirmación de tipo, lo que puede prevenir errores en tiempo de ejecución.

Titian-Cornel Cernicova-Dragomir
Titian-Cornel Cernicova-Dragomir
21 min
29 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora el concepto de tipos y su relación con las variables en TypeScript, incluyendo tipos primitivos, tipos especiales y tipos literales. También profundiza en las uniones e intersecciones de tipos, su forma canónica y su efecto en conjuntos de valores. La charla discute los tipos de objetos, sus miembros definidos y el comportamiento de las comprobaciones de acceso a propiedades. Destaca cómo se pueden utilizar las uniones e intersecciones con objetos y cómo se reducen a una forma canónica. También se enfatiza la importancia de los tipos base en TypeScript y cómo permiten que las variables contengan instancias de cualquier subtipo.

Available in English: Understanding types as sets

1. Introduction to Types and Values

Short description:

Hola a todos. Mi nombre es Tizian Cernikva Dragomir. Trabajo en el equipo de infraestructura de JavaScript en Bloomberg y contribuyo al compilador de TypeScript. En esta charla, exploraremos el concepto de tipos y cómo se relacionan con las variables. Los tipos pueden verse como una representación y comportamiento de los datos, pero también pueden verse como un conjunto de valores que una variable puede poseer. Discutiremos los tipos primitivos en TypeScript, como number, string, Boolean, así como los tipos especiales como never y unknown. Además, exploraremos los tipos literales y su aplicación en operaciones de conjunto, como la unión.

♪♪ Hola a todos. Mi nombre es Tizian Cernikva Dragomir. Bienvenidos a mi charla, TypeSets Sets. Un poco sobre mí primero. Trabajo en el equipo de infraestructura de JavaScript en Bloomberg. Contribuyo al compilador de TypeScript. Y si han oído hablar de mí, probablemente me hayan conocido en Stack Overflow, donde respondo muchas preguntas sobre TypeScript.

Así que quiero comenzar esta charla con una pregunta muy simple. ¿Qué es un tipo? A menudo, son preguntas muy simples las que nos permiten obtener nuevas ideas. Cuando comenzamos a aprender a programar, veremos los tipos como algo que asociamos con una variable. Probablemente también aprendamos que este tipo de datos tiene algo que ver con la forma en que los datos se representan en la memoria. Por ejemplo, los enteros se representan en 32 bits, las cadenas son una secuencia de caracteres, los objetos también se representan en la memoria de una manera particular. Así que nos quedamos con la impresión de que un tipo es representación y comportamiento, comportamiento que significa los operadores que pueden manipular esos valores. Pero también hay una forma diferente de ver un tipo, a saber, como un espacio de valores.

Entonces, un tipo es un conjunto de valores que la variable puede poseer. Veamos algunos de los tipos primitivos en TypeScript y cómo se relacionan con esta definición. Por ejemplo, el tipo number es el conjunto de todos los valores de punto flotante. El tipo string es el conjunto de todos los valores de texto. El tipo Boolean es el conjunto de valores true y false. También hay algunos tipos especiales en TypeScript, a saber, el tipo never, que, como no tiene valores posibles que puedan existir en tiempo de ejecución, representa el conjunto vacío. Y el tipo unknown, que representa el conjunto de todos los valores posibles en JavaScript. Así que tomemos esta nueva forma de ver los tipos y tratemos de aplicarlos a algunos tipos que probablemente ya conozcamos. Intentemos crear un tipo que describa un conjunto con un único valor. En TypeScript, estos tipos se denotan por sus valores asociados. Entonces podemos definir un tipo que sea el valor Sí, 1 o Verdadero. Y una vez que hayamos definido estos tipos, si los asociamos con una variable, entonces esa variable solo puede contener el valor que forma parte de ese conjunto. Por ejemplo, si asociamos Sí con una variable, solo puede contener Sí. Nunca podrá contener el valor No o cualquier otro valor de cadena. Ahora, los tipos literales no son particularmente útiles hasta que los asociamos con una de las operaciones básicas que podemos hacer en conjuntos, a saber, la unión. Cuando creamos una unión de dos conjuntos existentes, creamos un nuevo conjunto que contiene los valores de ambos conjuntos originales.

2. Union and Intersection of Types

Short description:

En TypeScript, crear una unión a partir de varios tipos permite crear un nuevo tipo que puede tener valores de todos los tipos constituyentes. La intersección de los tipos string y number da como resultado el conjunto vacío representado por el tipo never. Al intersectar un tipo similar a boolean con el conjunto de strings se obtienen los valores Sí y No. TypeScript reduce los tipos que contienen operadores de unión e intersección a una forma canónica, expresándolos como una unión de intersecciones.

Entonces, de manera similar, en TypeScript, si creamos una unión a partir de nuestros tres tipos existentes, utilizando el operador pipe, lo que sucederá es que crearemos un nuevo tipo que puede tener valores de los tres tipos constituyentes. Por lo tanto, nuestro nuevo tipo puede contener los valores 1, True y Yes, pero no puede contener, por ejemplo, el valor No.

Echemos un vistazo a la otra operación que podemos realizar en conjuntos, a saber, la intersección. Supongamos que tenemos dos tipos primitivos, a saber, string y number, y queremos ver cuál sería la intersección de estos dos tipos. Bueno, ¿qué valor en tiempo de ejecución es tanto un string como un número? La respuesta es que no hay tal valor. Estos dos conjuntos están completamente desconectados. Por lo tanto, su intersección sería el conjunto vacío. Y TypeScript representa el conjunto vacío a través del tipo never. Por lo tanto, esta intersección sería Never.

Pero veamos si podemos hacer algo más útil con las intersecciones. Supongamos que tenemos esta unión de tipos literales. Y nos gustaría extraer los componentes de string de esta unión. ¿Cómo podríamos usar las intersecciones en este caso? Bueno, si intersectamos un tipo similar a boolean con el conjunto de strings, ¿qué valores estarían en esta intersección? Y la respuesta es solo los valores Sí y No. Los otros valores no cumplirían con los criterios, ¿verdad? 0 y 1 no son tipos de string, tampoco lo son True y False. Entonces, si creamos este tipo, TypeScript estará de acuerdo con nosotros y dirá que solo los strings son Sí y No. Y de manera similar, podríamos extraer los números si intersectamos con number. También podríamos extraer los booleanos si intersectamos con boolean.

Ahora algo muy interesante sucede aquí, ya que boolean solo contiene True y False. Dado que el resultado de esta intersección sería solo True y False, lo que boolean termina siendo es, por supuesto, solo el tipo boolean porque boolean es solo la unión de los literales True y False. Pero veamos por qué exactamente esto funciona. ¿Por qué TypeScript realiza esta reducción? Bueno, TypeScript intentará llevar todos los tipos que contienen operadores de unión e intersección a una forma canónica. Es decir, intentará expresar nuestro tipo como una unión de intersecciones y aplicará la distributividad para llegar a este resultado. Por lo tanto, por ejemplo, si tomamos el tipo de solo strings que creamos antes, lo que TypeScript hará primero es expandir esa unión. Y luego intentará llevar la intersección y acercarla a cada uno de los constituyentes de la unión. Así que obtendremos este tipo. ¿Qué sucede ahora? Bueno, si tomamos la intersección de String, que contiene todos los valores de string, y del tipo Yes, que es el conjunto que contiene solo el valor Yes. ¿Qué obtenemos? Bueno, la respuesta es que obtenemos solo el valor Yes. Obtenemos Yes de esto. Por lo tanto, no tenemos que mantener todo esto, podemos dejar solo el tipo Yes. ¿Y qué sucede con No? Bueno, la situación es similar.

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.
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
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.

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.