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 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.

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.

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 2021React Advanced 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 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.
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.
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

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 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.