Dominando conceptos avanzados en TypeScript

Rate this content
Bookmark

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.

This workshop has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

TypeScript es un lenguaje de programación tipado superset de JavaScript que puede ayudar a prevenir errores en tiempo de desarrollo y facilitar la exploración de APIs al proporcionar un sistema de tipos más robusto.

TypeScript utiliza un sistema de tipos estrictos que ayuda a detectar y prevenir errores en el código, como los errores de tipeo, antes de que el código se ejecute, mejorando así la calidad y la mantenibilidad del proyecto.

Para desarrollar aplicaciones con TypeScript es necesario contar con un editor de código que soporte TypeScript, como Visual Studio Code, y tener instalado Node.js para gestionar paquetes y ejecutar la aplicación.

Los errores en una aplicación de TypeScript pueden ser corregidos utilizando el sistema de tipos para asegurar que las variables y funciones interactúen de manera correcta, y utilizando type guards para validar los tipos de datos en tiempo de ejecución.

TypeScript ofrece ventajas como un sistema de tipos más robusto, detección de errores en tiempo de compilación, y mejor soporte para el desarrollo a gran escala, lo que resulta en un código más limpio y fácil de mantener.

Para integrar TypeScript en un proyecto existente, puedes comenzar por instalar TypeScript en tu entorno de desarrollo, configurar el archivo tsconfig.json para definir las opciones del compilador, y luego ir integrando gradualmente TypeScript archivo por archivo.

Jiri Lojda
Jiri Lojda
132 min
06 Nov, 2023

Comments

Sign in or register to post your comment.
  • Parmar Tarun
    Parmar Tarun
    SUNY Binghamton
    Hi, when can we have the recording available for this workshop? Thanks
  • Scott Huffman
    Scott Huffman
    Fidelity Investments
    Not sure if anyone is monitoring these comments for questions--my company has disabled access to zoom's chat--but I wanted to ask about this KeyToGuard, and whether there is any ways to break it into smaller, different types to improve readability?

Video Summary and Transcription

La masterclass cubre conceptos avanzados en TypeScript, como tipos estrictos y guardias de tipo. Explora el uso de herramientas de desarrollo y las ventajas de usar TypeScript en el desarrollo de software. La masterclass también profundiza en el mapeo de tipos de unión y tipos de objetos, así como en palabras clave y tipos condicionales. Se discuten las correcciones de errores y la validación de tipos, junto con el análisis recursivo y la validación de entidades. La masterclass concluye con una corrección de errores final y conclusiones clave para usar TypeScript de manera efectiva.

1. Introducción a TypeScript y sus Ventajas

Short description:

Te mostraré algunos conceptos avanzados de TypeScript para que te sientas más cómodo usando tipos. Discutiremos las ventajas de usar tipos estrictos, trabajaremos en ejemplos con errores y exploraremos la precisión de los tipos en las API.

Cómo usar TypeScript para contratar empleados en un grupo web Cómo usar TypeScript en un proyecto VSC Cómo alors crear .sush Me gustaría mostrarte algunos conceptos un poco avanzados de TypeScript solo para aclarar algunas cosas y quizás hacerte sentir más cómodo usando estos tipos y ver el valor en ellos.

Hoy estoy aquí con Andrey de Content.ai. Él me ayudará a gestionar las preguntas y el chat. Así que si tienes alguna pregunta, no dudes en preguntar. Y bueno, sí, ese soy yo, puedes contactarme por ejemplo en GitHub puedes ver algunas cosas en las que trabajo. en el contenido de una empresa perfilándolo también y bueno iba a estar en la otra agenda vamos a empezar discutiendo algunas ventajas de usar los tipos estrictos como los tiempos más estrictos que están disponibles para la situación. A continuación, trabajaremos en el primer ejemplo donde habrá un pequeño error en una aplicación que he preparado y hablaremos de cómo un mejor tipado o un mejor uso del sistema de tipos de Typekit podría prevenir tal error y durante eso intentaremos algunos de los conceptos de typeset luego pasaremos a otro ejemplo y luego dependiendo del tiempo y quizás nuestra energía podemos intentar el bonus que he preparado que es un poco más avanzado más sobre jugar con typescript y cosas así veremos si si estás interesado en eso así que primero te mostraré la aplicación en la que estaremos trabajando es solo una simple aplicación de eventos que gestiona algunos eventos que tienes tienes eventos tal vez solo un poco creo que tengo la versión con errores funcionando ahora Así que ejecutaré la otra.

Sí, la aplicación en sí. Quizás solo para detener eso puedes descargarlo desde esta URL. Lo copiaré y pegaré en el chat para que no tengas que buscarlo en la en la pantalla es todo lo demás qué genial gracias por eso y ahora la aplicación debería funcionar sin problemas y como dije es una aplicación muy simple que gestiona algunos eventos, puedes hacer clic en el evento, hay una descripción, sus nombres, puedo crear un nuevo evento, puedo seleccionar un organizador y está ahí. Puedo eliminar eventos, puedo crear eventos para un cierto organizador directamente desde aquí, y puedo copiar eventos. Muy simple. Y sí. Así que continuemos con esto. Entonces, ¿por qué querríamos molestarnos con con tipos y sistema de tipos. Lo que pasa es que a menudo veo que la gente piensa en los tipos como sus enemigos, algo con lo que tienen que luchar y siempre hay obstáculos en su camino. Pero para hacer esto, el sistema de tipos está ahí para ayudarte. Puede encontrar, puede atrapar errores. Realmente puede atrapar muchos errores Y está ahí para respaldarte en caso de que cometas algunos errores de tipeo y errores, esto es muy a menudo. Y también puede ayudarte a explorar las API. Como, a menudo si empiezo con una nueva biblioteca, solo escribo algunas cosas, algunos nombres de funciones y cosas así, y busco tipos, lo que IntelliSense, por ejemplo, me ofrece en mi editor de código. Por ejemplo, si abro este archivo de ejemplo, puedes ver una función, escribir por referencia que acepta un objeto, una referencia, que tiene dos propiedades opcionales, ID y ID externo. Y ahora desde esta API, digo bien, voy a llamar a la función, ¿y qué debería proporcionarle a la función? Bueno, no tengo idea. ¿Debería llamarlo con un objeto vacío? TypeSketch está bien con eso. TypeSketch no puede aconsejarme porque según TypeSketch, esto está bien. Pero probablemente no esté bien porque la referencia es solo un objeto vacío. No hay nada. Probablemente lo que el autor realmente pretendía hacer es decir, bien, quiero que proporciones una ID o una ID externa. Eso es probablemente lo que el autor quiso decir pero no me proporcionó ninguna pauta exacta para eso. Así que estoy perdido aquí. Pero si en cambio hizo algo como esto como esto, bien, quiero un tipo de unión donde quiero que la referencia sea un objeto con una propiedad id que tiene que estar ahí, o otro, o un un objeto diferente que en cambio tiene una propiedad ID externa, que no es opcional y siempre tiene que estar ahí, ahora, la clave de tipo me dice, está bien. El objeto MT no es un parámetro válido para esta función. Necesitas proporcionar un objeto con propiedad ID o propiedad ID externa, pero uno tiene que estar ahí. Y al mismo tiempo, si digo... Esto está bien. Eso es decepcionante. Pensé que iba a decirme que no puedo proporcionar ambos, pero bueno, ese no es el caso. Pero al menos sé que tengo que proporcionar uno de ellos. Entonces, de esta manera, TypeScript realmente me ayuda a explorar la API y ver qué está disponible y qué tengo que proporcionar o no. Es realmente mucho más claro incluso si lees el tipo, ves que uno de ellos está disponible. O uno de ellos es necesario. uh con respecto a la precisión de los tipos uh puedes ver a menudo una función como esta una función toma alguna cadena que es que tiene que representar algún tipo de acción que quieres tomar por ejemplo en este ejemplo quieres crear un evento de cierto tipo y luego cambias el tipo y proporcionas un tipo diferente de evento para cada tipo. Y luego si recibes un tipo de evento desconocido, simplemente lanzas un error porque ese es un estado inválido para ti, ¿verdad? Y luego como usuario de tal API, voy a decir, bien, voy a llamar a este tipo de evento y tengo que proporcionar una cadena. ¿Qué tipo de cadena? No lo sé. Solo voy a poner ahí alguna cadena. y va a lanzar un error porque esta no es ninguna de estas cadenas que utiliza la función. De nuevo, si el autor de la API en lugar de escribir algo como esto... y ahora, tengo un error. y el typeskip me dice, bien, tienes que proporcionar esto o aquello. Bastante claro.

QnA

Watch more workshops on 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.
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 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.
Building Your Own Custom Type System
React Summit 2024React Summit 2024
38 min
Building Your Own Custom Type System
Featured Workshop
Kunal Dubey
Kunal Dubey
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side. 
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Desarrollo sin fricciones con un sistema de tipos unificado
JSNation 2024JSNation 2024
113 min
Desarrollo sin fricciones con un sistema de tipos unificado
Featured Workshop
Ejiro Asiuwhu
Ejiro Asiuwhu
Imagina desarrollar donde el frontend y el backend cantan en armonía, los tipos bailan en perfecta sincronía y los errores se convierten en un recuerdo lejano. ¡Eso es la magia de TypeScript Nirvana!
Únete a mí en un viaje para descubrir los secretos de las definiciones de tipos unificadas, la clave para desbloquear un desarrollo sin fricciones. Nos sumergiremos en:
- Lenguaje compartido, amor compartido: Define los tipos una vez y compártelos en todas partes. La consistencia se convierte en tu mejor amiga, los errores en tu peor pesadilla (uno que rara vez verás).- Codificación sin esfuerzo: Olvídate de la tediosa tarea de comprobar tipos manualmente. TypeScript te respalda, liberándote para centrarte en construir cosas increíbles.- Magia de mantenibilidad: Con tipos claros que guían tu código, mantenerlo se convierte en un paseo por el parque. Más tiempo para innovar, menos tiempo para depurar.- Fortaleza de seguridad: El sistema de tipos de TypeScript protege tu aplicación de vulnerabilidades comunes, convirtiéndola en una fortaleza contra amenazas de seguridad.

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

Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
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.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.
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
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
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.