Log in
JavaScript Conferences
Node Congress 2024Node Congress 2024
Top
ES

Consejos y Trucos Profundos de TypeScript

Josh Goldberg
Josh Goldberg
Open Source enthusiast, TypeScript contributor, writing a book on Typescript
certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Get Multipass
Rate this content
Bookmark

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.

This workshop has been presented at Node Congress 2024, check out the latest edition of this JavaScript Conference.

FAQ

TypeScript es un superconjunto de JavaScript, lo que significa que añade sintaxis adicional a JavaScript, como las anotaciones de tipo. Permite una comprobación de tipos durante el desarrollo que puede ayudar a detectar errores antes de ejecutar el programa.

TypeScript puede ayudar a prevenir errores de tipo en el código, facilitar la refactorización y proporcionar una mejor autocompletación y herramientas de ayuda en el entorno de desarrollo, como VS Code.

Durante la masterclass se discutieron características como uniones y estrechamiento, las nuevas funciones 'no infer' y 'satisfies', y los genéricos, que son fundamentales para aprovechar al máximo el sistema de tipos de TypeScript.

Se exploró la configuración del compilador de TypeScript, las opciones de linting tipado, y la integración de TypeScript con herramientas de edición como VS Code, incluyendo funcionalidades como 'ir a definición' y 'encontrar todas las referencias'.

Josh mencionó que trabaja en el equipo de comunidad para ESLint y es uno de los mantenedores de TypeScript ESLint, destacando la importancia del linting tipado en proyectos que utilizan TypeScript.

TypeScript se construye sobre JavaScript, añadiendo anotaciones de tipo y comprobaciones de tipo que no alteran la ejecución en tiempo de runtime de JavaScript pero proporcionan una capa adicional de seguridad y herramientas durante el desarrollo.

El linting tipado es el uso de linters que entienden los tipos de TypeScript para realizar comprobaciones más avanzadas, lo que ayuda a mantener la calidad del código y a adherirse a buenas prácticas de programación.

typescript
Josh Goldberg
Josh Goldberg
83 min
08 Apr, 2024

Comments

Sign in or register to post your comment.
  • Habib Hinn
    Habib Hinn
    Quizplus
    Awesome workshop! Clear breakdown of TypeScript's advanced features. Thanks for making it easy to follow!
    18:53 Nov 4, 2024
Video Summary and Transcription
Bienvenido a la masterclass de TypeScript donde exploraremos consejos y trucos profundos para convertirnos en un desarrollador más efectivo. Cubriremos la configuración de TypeScript, uniones y estrechamiento, nuevas características en versiones recientes y genéricos. TypeScript proporciona mensajes de error útiles y sugerencias al trabajar con tipos. Para configurar VS Code para la revisión de tipos, puedes especificar la versión en el archivo vscode/settings.json. Lanzar errores no es seguro para los tipos, y las uniones discriminadas se pueden usar para el manejo de errores. El operador 'satisfies' en TypeScript te permite imponer claves y valores específicos en los objetos. La palabra clave 'infer' en los tipos condicionales permite extraer tipos específicos basados en condiciones, y la palabra clave 'using' facilita la gestión explícita de recursos.
Available in English: Deep TypeScript Tips & Tricks
Video transcription and chapters available for users with access.
Available in other languages:

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.
reactbest practicestypescriptdevtoolsweb developmenttest driven development react
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.
typescriptdevtoolstypescript libraries
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.
reacttypescriptreact with typescript best practices
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.
typescript
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.
reacttypescriptreact componentsreact with typescript best practices

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
Matt Pocock
Matt Pocock
Independent
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.
typescriptreact element vs componentreact fcreact with typescript
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
Matt Pocock
Matt Pocock
Independent
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.
reactbest practicestypescript
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 Roe
Daniel Roe
Daniel leads the Nuxt core team.
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.
typescriptframeworksvuenuxt.jsdeep divebuilders and founders
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Eduardo San Martin Morote
Eduardo San Martin Morote
Vue.js Core Team
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.
typescriptvue 3typescript libraries
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
Titian-Cornel Cernicova-Dragomir
Titian-Cornel Cernicova-Dragomir
Software Developer at Bloomberg
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.
typescript
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced 2021React Advanced 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
Alexander Johansson
Alexander Johansson
The creator of tRPC
Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.
reacttypescriptdeveloper experiencebackendpatternsreact native fullstacktrpctrpc with react native