TypeScript Gymnastics: ¿Por Qué Son Tan Poderosos para Ti?

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

En el sistema de tipos de TypeScript es más que solo una herramienta para detectar errores: es una forma de resolver problemas complejos con código limpio y confiable. En esta charla, profundizaremos en técnicas avanzadas de TypeScript como tipos mapeados, tipos condicionales y genéricos para manejar incluso los desafíos de tipos más complicados.

Verás cómo estas técnicas pueden ayudarte a extraer, transformar y validar tipos de datos mientras mantienes tu código simple y mantenible. Estas "acrobacias de TypeScript" no son solo para mostrar: son habilidades prácticas que hacen que tus sistemas sean más fuertes y fáciles de trabajar.

Ven a aprender cómo aprovechar al máximo la flexibilidad y el poder de TypeScript para construir soluciones que sean tan inteligentes como seguras.

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

Luca Del Puppo
Luca Del Puppo
23 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla profundiza en TypeScript, destacando su introducción, diferencias con JavaScript y proporcionando ejemplos de código. Se enfatiza la importancia de la tipificación estricta en TypeScript, mostrando el uso de tipos literales y tipos de unión para un modelado de tipos preciso. La discusión también cubre tipos literales de plantilla para crear tipos combinados y coincidencia precisa de tipos, así como el manejo condicional sin declaraciones if y la inferencia de tipos de funciones. Además, explora bucles, recursión, manipulación de tipos de objetos, manipulación de claves, tipo mapeador y tipos de utilidad de TypeScript para una gestión eficiente de propiedades y manipulación de tipos.

1. TypeScript Introduction and Code Examples

Short description:

Introducción a TypeScript, comprensión de las diferencias entre JavaScript y TypeScript, y ejemplos de código.

Hola y bienvenidos a esta charla donde hablo sobre TypeScript y algunas características avanzadas de él. Primero que nada, quién soy. Soy Luca Del Pupo, Ingeniero de Software estonio en Pneumformal de JavaScript y TypeScript. Y en mi tiempo libre intento llevar mi canal de YouTube, pero estoy fallando en ese período porque del tiempo. Y también escribo publicaciones tecnológicas para personas de tecnología. En mi tiempo libre, también corro, amo correr, hacer senderismo, y amo a los animales. Por cierto, comencemos desde aquí.

Probablemente la mayoría de ustedes ya se han encontrado con algo como esto, una definición de archivo de TypeScript con miles y miles de filas y muy difícil de entender. Así que hoy intentaré ayudarles a entender qué sucede dentro de este archivo y cómo pueden crear su función de TypeScript para mejorar la adherencia de su base de código y hacer su código TypeScript más estricto. Así que en este punto, saltemos al código. Comencemos desde aquí. Cuando trabajas con TypeScript y JavaScript, tienes que entender dónde JavaScript y cuándo comienza TypeScript.

Por ejemplo, en este ejemplo, tenemos una mezcla de, por ejemplo, tenemos un tipo welcome y una const welcome, ambos con el mismo nombre. Como pueden ver aquí, types es un tipo específico welcome con el valor welcome to everybody. Y const es una variable de JavaScript en este caso, con un valor de cadena welcome to everybody. Esta parte es solo TypeScript. Esta parte es una mezcla de JavaScript y TypeScript. Este código es código real de JavaScript y este código se ejecutará después en su navegador o dentro de, no sé, su servidor node o algo. Y esta parte, la segunda parte de esta línea es solo código TypeScript.

2. TypeScript Type Modeling and Union Types

Short description:

Comprender la importancia de la tipificación estricta en TypeScript y el uso de tipos literales y tipos de unión para un modelado y verificación de tipos precisos.

Esto nos ayuda a hacer welcome to everybody const y verificamos si esta cadena cumple con el welcome type. Si entiendes cuándo comienza JavaScript y TypeScript, entonces puedes comenzar a trabajar con TypeScript avanzado. Hoy, te muestro solo código de TypeScript que básicamente desaparece después de la fase de construcción, pero te ayuda a aumentar la experiencia del desarrollador o aumentar la adherencia de tu aplicación. Comencemos desde aquí.

Cuando trabajas con TypeScript, es importante ser estricto al modelar tus tipos. Por ejemplo, en este caso, si tienes un state, state puede ser una cadena. Una cadena es demasiado abierta como valor para lo que queremos describir. Por ejemplo, en este caso, state puede ser starting, running, arriving, o retiring. Y usando TypeScript, podemos hacerlo usando tipos específicos, un tipo literal llamado starting. Entonces, en este caso, starting no es una cadena real, sino un tipo starting que le dice a TypeScript, la cadena debe ser una cadena starting, una cadena con un valor específico starting, o un valor específico running, o un valor específico arriving, o un valor específico retiring. Y usando la barra vertical, podemos crear una especie de orden.

Entonces, en este caso, puede ser uno de estos, pero solo una vez en un tiempo específico. Y luego podemos verificar si state, state en este caso es igual a starting, es tanto una cadena real como también una cadena que en este caso coincide con la cadena state, con el tipo state. Luego usando, podemos usar las barras verticales, por lo que el tipo de unión también con otro tipo de tipo. Por ejemplo, el true, el false, podemos crear otro tipo y podemos mezclar true, false, y cero o uno de tipo cadena y bla, bla, bla. Podemos usar un tipo de unión también con el tipo, con tipo de objeto.

3. Template Literal Type and Type Matching

Short description:

Explorando el tipo literal de plantilla para crear tipos combinados como el estado del corredor y usando la sintaxis de plantilla para una coincidencia precisa de tipos como los patrones RGB.

Y como puedes ver aquí, status, status es igual a cero y coincide con el status. Si entiendes cómo funcionan los tipos literales, puedes pasar al tipo literal de plantilla. En algunos casos, queremos crear tipos a partir de otros tipos, en este caso a partir del tipo literal de cadena. Y, por ejemplo, lo que queremos hacer es crear una especie de combinación entre runner y state. Así que runner puede ser Kevin, John o Dough. Y state puede ser starting, running, arrived y retired. Queremos crear un running status que básicamente coincida con el nombre del corredor, es, y el estado del corredor.

En este caso, usando la sintaxis de plantilla, así que la comilla invertida, y luego usando la sintaxis de plantilla común que probablemente uses en JavaScript, puedes básicamente mezclar los tipos y crear el runner status. En este caso, como puedes ver, runner status es una combinación de todos los posibles runner con todos los posibles state, usando el es. Y si, por ejemplo, eliminas el state, TypeScript elimina esta computación por nosotros automáticamente. Y esto significa que si alguien agrega un nuevo state, tendremos gratis el nuevo status ya mapeado dentro del runner state.

Y como puedes ver aquí, podemos crear una cadena que debe coincidir con los tipos específicos. En este caso, arrived es sin e al final. Y como puedes ver, TypeScript es capaz de entender que Kevin is arrived sin e, no es asignable a un runner state. Luego podemos usar la sintaxis de plantilla también para crear otro tipo de tipo. Y, por ejemplo, podemos, por ejemplo, crear otra sintaxis. Por ejemplo, en este caso, usando RGB, podemos decir, está bien, la primera parte aquí debe ser un número. Luego hay una coma, otro número, y otra coma. De esta manera, podemos describir el patrón RGB de una columna.

4. Conditional Handling and Function Type Inference

Short description:

Explorando el uso de RGB y la tipificación estricta con sintaxis de plantilla, entendiendo el manejo condicional sin declaraciones if, y aprovechando la condición de tipo de retorno para la inferencia de tipo de función.

Y como puedes ver aquí, podemos usar RGB, y en este caso, 230, cero, y blah, blah, blah. Pero si establezco a como segundo valor para la parte verde, como puedes ver, TypeScript es capaz de entender que a no puede ser asignable a un número. Esto significa que tu cosa no puede ser asignable a un tipo de color RGB. {{^}}Y como puedes imaginar, usando esta sintaxis de plantilla, podemos crear muchos, muchos tipos que nos ayudan a ser más estrictos con nuestro sistema de tipos y a modelar de la mejor manera la forma de nuestro objeto y nuestros tipos.

Así que cuando entiendes esto, es momento de entender cómo podemos manejar if y else usando el sistema de tipos. Desafortunadamente, el sistema de tipos no tiene una declaración if real, pero usa una especie de coincidencia de patrones. ¿Qué significa esto? Echa un vistazo a este tipo de condición if. Este es un tipo de condición, excepto tres tipos genéricos. El primero es una condición, el segundo es el valor verdadero si se cumple la condición, y el tercero es el else si la condición no se cumple. ¿Qué significa esto?

La primera parte es una condición que puede ser verdadera o falsa. Y aquí, lo que estamos haciendo es si C extiende true, devuelve los genéricos T, de lo contrario, devuelve else. ¿Cómo podemos usarlo? Como puedes ver aquí, si paso true y yes o no, el if devolverá yes. Si paso false, yes o no, el if devolverá no. Esto significa que usando el extend, podemos crear una especie de if, y si el extend se ha cumplido, podemos hacer algo. De lo contrario, podemos hacer otra cosa.

5. Return Type Condition and Parameter Handling

Short description:

Comprendiendo la condición de tipo de retorno para la inferencia de tipo de función, usando parámetros y extrayendo datos de tipos literales específicos como RGB en TypeScript.

Lo que hace esta condición es que esta condición de tipo de retorno acepta un genérico T, y este T es un genérico, y queremos verificar si T es una especie de función, y si esto es una función, por favor infiere el tipo de retorno de la función dentro de R. Si T básicamente es una función, al final, devolveremos el tipo de retorno de esta función. De lo contrario, devolveremos lo que es never. Never es nada. Esto significa que es algo que no tiene nada dentro. En este caso, la condición de retorno, si paso una función que devuelve un string, devuelve un string. Si paso una función que devuelve un Boolean, devuelve un Boolean. Si paso un Boolean, por ejemplo, devuelve un never. Y la condición de tipo de retorno ya está incorporada en TypeScript. Se llama return type, y ya puedes usarla para extraer el tipo de retorno de una función. Y esto significa que puedes extraer el tipo de la función, y no tienes que recrear nuevamente el tipo. Significa que tienes este tipo de una biblioteca externa. No quieres recrear los tipos, pero quieres depender de ese tipo. Usando el return type, puedes extraerlo de esta función, y crear, y luego usar este tipo para tu negocio. Lo mismo podemos hacer para los parámetros.

Así que en este caso, en lugar de usar el infer dentro del retorno, podemos usarlo dentro del parámetro. Los args son un array, así que P al final será un array con todos los parámetros dentro de él. En este caso, el primero es sin parámetros, así que hay un array vacío. En este caso, hay solo un parámetro con número, y tenemos un array con solo un elemento, número. Y también para la condición de parámetro, ya tenemos un parámetro incorporado dentro de TypeScript, y la función se llama parameter. Puedes usar el extend también para extraer datos de un tipo literal específico. Por ejemplo, en este caso, como puedes ver, tenemos un tipo RGB. Y queremos verificar si T es un tipo RGB, y queremos extraer el rojo, el verde, y el azul. Usando T, podemos hacer extend, podemos usar el acento grave RGB, luego queremos inferir R, y si queremos que R sea un número, lo mismo queremos hacer con G, y queremos que G sea un número, y B blah, blah, blah. Al final, queremos devolver RGB si T extiende el número RGB. De lo contrario, devolveremos never. Como puedes ver aquí, podemos extraer 255 para RGB aquí. Podemos extraer el rojo, verde, y azul también aquí. Es importante prestar atención a este espacio, porque si elimino el espacio de aquí, como puedes ver, esto no cumple con el requisito, porque este no cumple con el patrón dentro del extend. Como puedes ver, también tienes que prestar atención a estas cosas más pequeñas, porque a veces estas pueden crear un resultado incorrecto.

6. Looping and Object Type Manipulation

Short description:

Comprendiendo el bucle y la recursión en TypeScript para extraer datos, creando diferentes tipos de bucles, trabajando con tipos de objetos y manipulándolos añadiendo, eliminando y modificando campos.

Bien, ahora es momento de pasar al bucle. Bien, entendimos cómo podemos crear if, y else. Ahora, es momento de entender cómo podemos iterar tipos para extraer datos. En cada uno, tienes un tipo, un tipo de usuario que es un array que contiene para cada elemento del array la definición de columna. En este caso, nombre, primer nombre, y valor, nombre, apellido, el valor es string, y nombre, rol puede ser manager o empleado. Queremos crear una especie de get column que pueda ser usado de esta manera. Queremos pasar una tabla de usuario y el nombre del valor, y devolver la definición de esa columna si existe. ¿Cómo podemos hacer eso? Usando el bucle. Desafortunadamente, en TypeScript, no podemos iterar, pero podemos usar recursión. Entonces, ¿cómo podemos hacer eso? Usando lista. Podemos verificar si lista extiende un array, y queremos tomar el primer elemento del array, y básicamente esparcir el resto del array dentro del resto. Primero, ahora tenemos que verificar si primero extiende una columna con nuestro nombre específico. Si es así, podemos devolver primero, de lo contrario, queremos iterar la lista, el resto de la lista.

¿Cómo podemos hacer eso? Podemos llamar de nuevo, get column. Pero esta vez, no pasamos una lista, sino que pasamos el resto de la columna que no hemos verificado aún con el mismo nombre. Esto, como puedes imaginar, es una especie de recursión que, en algún punto, esta lista, si no tienes ninguna columna con ese nombre, devolverás never. De lo contrario, en algún punto, devolverás el primero, y este es el resultado. Básicamente, también puedes crear otro tipo de bucle, más simple. Por ejemplo, en este caso, podemos usar append. Tienes una tupla y el elemento usando el spread. Básicamente, puedes crear otro tipo con la primera parte del array y el nuevo elemento. En este caso, tenemos uno, dos, tres, y cuatro, y el resultado es uno, dos, tres, cuatro. Si tienes un array vacío, puedes pasar cuatro. Si tienes muchos, puedes tener muchos y muchos, y blah, blah. También puedes mezclar. Puedes crear, encontrar, filtrar, lo que quieras. Esto es solo una cuestión de lo que necesitas hacer, y puedes crear tu propio tipo condicional de TypeScript para crear otros tipos.

Otra parte importante, cuando trabajamos con TypeScript, queremos trabajar con tipos de objetos, y queremos manipularlos. Lo que queremos hacer es eliminar un campo, añadir un campo, o eliminar la condición opcional, o hacer todo opcional, o añadir solo lectura, y blah, blah. Para hacer eso, debemos conocer solo dos cosas importantes en TypeScript, la clave de una palabra clave y el tipo de mapeador.

7. Key Manipulation and Mapper Type in TypeScript

Short description:

Explorando la palabra clave key of y el tipo de mapeador en TypeScript para manipular tipos de objetos y crear nuevos objetos basados en tipos existentes.

La palabra clave key of es específica que nos permite obtener todas las props de un tipo específico. En este caso, si llamo key of person, recibiré todas las props de primer nivel de la interfaz person. En este caso, name, así que name, age, gender, address, email, phone, y policy accepted.

Luego tenemos el tipo de mapeador. El tipo de mapeador es la forma de manipular los tipos de objeto dentro de TypeScript. La sintaxis es bastante simple. Es como la sintaxis de objeto, y tenemos que definir la key del objeto y el tipo de esa key.

Usando key in, estamos diciendo, bien, para cada k dentro de esta lista de key, en este caso, todas las key de person, básicamente, estás creando un nuevo objeto. De esta manera, básicamente recreo el mismo tipo person usando el tipo de mapeador.

8. TypeScript Utility Types and Manipulation

Short description:

Explorando la manipulación de claves con el tipo de mapeador en TypeScript para recrear interfaces, manipular datos, crear propiedades opcionales y gestionar propiedades requeridas de manera eficiente.

Lo que quiero hacer es básicamente usar el key of, así que quiero iterar sobre todas las claves de person, y usando el person bracket key, puedo usar el square bracket key, puedo obtener el tipo de esta clave específica. El resultado es este nuevo person que básicamente es la misma interfaz recreada usando el tipo de mapeador. Si entiendes cómo funcionan los tipos de mapeador, también puedes manipular los datos.

Por ejemplo, quieres hacer todo opcional. En este caso, queremos crear un partial person. Usando la misma sintaxis, puedes añadir el signo de interrogación, en este caso, y esto significa que para el partial person, tenemos todos los signos de interrogación dentro de las propiedades. Esto funciona solo en el primer nivel. Si quieres hacerlo también en profundidad dentro de cada elemento, tienes que crear otro tipo aquí.

Si el tipo de clave de person es un objeto, tienes que iterar dentro de los tipos y crear esto también dentro del objeto anidado. Luego, el partial utility ya está incorporado en TypeScript, así que puedes usar partial person aquí. Puedes usar required y lo mismo aquí. El required elimina el signo de interrogación, así que solo necesitarás añadir el guion antes del signo de interrogación, y el resultado es básicamente que tienes todo requerido, y required aquí está, como puedes ver, ya implementado.

9. TypeScript Property Management and Utility Types

Short description:

Explorando los tipos de utilidad read-only, extract, pick, omit en TypeScript para gestionar propiedades de manera eficiente y crear tipos que dependen de otros.

O puedes crear el tipo de utilidad read-only. Básicamente, quieres añadir la palabra clave read-only para cada propiedad en este caso, y también read-only ya está incorporado si lo deseas. Y también puedes usar extract. Extract te permite extraer un tipo de un tipo específico. Por ejemplo, en este caso, tienes el tipo extract name, o surname o age, y quieres extraer name y surname. Usando el tipo extract, tienes name y surname.

Extract ya está incorporado en TypeScript, o puedes usar exclude que es lo opuesto a extract, o, por ejemplo, quieres usar pick u omit. Pick es básicamente una forma de, a partir de un tipo, seleccionar solo propiedades específicas, como de esta manera, y pick ya está implementado. También, en TypeScript, omit es lo opuesto. Si quieres eliminar propiedades de un tipo específico, básicamente tienes que usar pick y excluir todas las propiedades que quieres excluir. Bastante simple.

Usando todo este tipo de utilidades, puedes crear y manipular tus tipos y crear tipos que dependen de otros tipos. Al final, lo que sucede es que puedes tener algo como esto. Puedes crear una especie de función get key que acepta una clave de objeto y una clave key que esta clave es una propiedad que coincide con el nombre de propiedad específico que existe dentro de T. Esta utilidad get all key es un poco enigmática, pero puedes revisarla en el repositorio sin ningún problema. Que básicamente usa todas estas cosas que hemos visto antes para construir una especie de tipo literal de unión con todas las posibles propiedades dentro de ese tipo.

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.
El Estado de la Web
JSNation 2025JSNation 2025
32 min
El Estado de la Web
Sasha Grief discusses the state of the web through web development surveys, leading to an interactive quiz about the state of JS and usage of front end frameworks. Discussion on popular front-end libraries like React, Vue, Angular, and the rising popularity of TypeScript among developers in recent surveys. Discussion on TypeScript adoption, TC39 committee proposals, favorite CSS feature 'has,' and browser support for 'has' selector. Browser interoperability, browser vendors' initiatives, AI usage among web developers, and survey insights. Job titles linked to higher income, diversity of survey topics, top hobby among developers, and popular specific video games. Learnings on CSS features, TypeScript default, AI usage, survey benefits, challenges in reaching diverse survey participants. Surprising positivity in JavaScript usage, stable framework landscape, AI adoption challenges, mainstream AI tools, successful situp.js survey. Inconsistent respondent numbers, manual data normalization efforts, subjective question selection process, community input, mitigation of selection bias. Reason for starting surveys, transition from Meteor JS, exploration of JavaScript ecosystem.
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.

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