Tipos más allá de TypeScript

Rate this content
Bookmark

Todos parecen estar hablando de "tipos" en estos días. Desde el lenguaje TypeScript hasta utilidades de descripción de tipos como prop-types y Zod, los desarrolladores esperan descripciones claras de las formas de sus componentes React, datos y hooks. Hablemos sobre el cambio de mentalidad que ha ocurrido en la última década y hacia dónde nos llevan los tipos en la próxima.

Bases breves: qué es TypeScript, qué significa "seguridad de tipos" y cómo configurar TypeScript en un proyecto React (Next.js). Una historia de cómo ha funcionado la seguridad de tipos en React, comenzando con los componentes de clase.

Pensar en Tipo(s|Script): cómo modelar las formas de los valores ayuda a aumentar la previsibilidad y comprensión, especialmente en las arquitecturas más salvajes y locas de React.

Limitaciones de TypeScript: Por diseño, TypeScript solo puede actuar como un sistema de tipos en tiempo de desarrollo y hacer cumplir lo que ese sistema puede representar. Repasaremos lo que no se puede y/o no se debe representar en ese sistema de tipos.

Elevando el tiempo de ejecución: trasladar esos pensamientos sobre tipos a tiempo de ejecución de React con frameworks o bibliotecas programáticas como tRPC y Zod, especialmente cuando se integran con metaframeworks de React como Next.js y Remix.

Especificidades de React: cómo esta teoría de "tipos primero" ayuda a mejorar las partes comunes de los proyectos en el ecosistema de React: desde prop-types en el pasado hasta endpoints de REST o RPC, pruebas y documentación en la actualidad.

Reglas de linting de ESLint para detectar errores comunes de código asincrónico y React, y por qué el lenguaje está diseñado para permitirte hacer esas cosas peligrosas en primer lugar.

Futuro del ecosistema: dónde llevará y dónde no llevará la propuesta de tipos como comentarios del TC39 los tipos a nivel de lenguaje para JavaScript en general y aplicaciones de React en particular.

Al permitir que nuestros tipos sean un reflejo de la realidad en tiempo de ejecución, adoptamos el pensamiento de "tipos primero" en el diseño de código, lo que hace que nuestro código sea más claro de leer y actualizar. Estas fronteras mejor definidas ayudan en todo, desde límites de componentes React mejor definidos hasta puentes de API cliente<>servidor generados automáticamente. ¡Hurra por los tipos!

This talk has been presented at React Summit 2024, check out the latest edition of this React Conference.

Josh Goldberg
Josh Goldberg
31 min
14 Jun, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla explora el concepto de tipos y su importancia en el desarrollo de software, especialmente en relación con TypeScript. Se discuten las limitaciones y ventajas de TypeScript en comparación con otras herramientas como Flow y Ezno. La charla enfatiza el papel de los tipos en la conexión de límites del sistema y la mejora de la calidad del código. También destaca la importancia del linting con verificación de tipos y el futuro de ESLint. Además, la charla menciona los beneficios de un linting más rápido y fácil con proyectos como Biome y OXC, y recomienda libros para seguir aprendiendo.
Available in English: Types Beyond TypeScript

1. Introducción a los Tipos y TypeScript

Short description:

Soy Josh. Estoy muy emocionado de hablarles hoy sobre los Tipos más allá de TypeScript. Vamos a hablar de cuatro secciones. ¿Qué son los tipos? ¿Qué es todo esto? Por si acaso aún no han jugado con TypeScript o Flow. En segundo lugar, quiero cubrir rápidamente lo que los tipos no son. También quiero hablar sobre las cosas en las que los tipos son sorprendentemente buenos. Primero, ¿qué puede informar a los tipos? Como configurar su código para que esté bien tipado. Y por último, ¿qué pueden informar los tipos? Cómo tener un código bien tipado puede ayudar a que las herramientas funcionen mejor en su código.

Oh, dulce Jesús. Eso no es bueno. Soy Josh. Estoy muy emocionado de hablarles hoy sobre los Tipos más allá de TypeScript. Sí. Como dijo Phil, trabajo en proyectos de código abierto. Siéntanse libres de hablar conmigo después de todo esto sobre eso. Es un mundo maravilloso. El ecosistema siempre está mejorando. Trabajo en proyectos. ¿Quién aquí usa TypeScript ESLint? Sí. ¿Quién aquí usa ESLint en general? Sí. ¿Quién aquí ha maldecido a ESLint o a TypeScript ESLint? Sí. ¿Quién aquí todavía usa Mocha? De acuerdo. Genial. Hoy no estoy hablando de Mocha. Estoy hablando de cosas de Tipos. Vamos a hablar de cuatro secciones. ¿Qué son los tipos? ¿Qué es todo esto? Por si acaso aún no han jugado con TypeScript o Flow. En segundo lugar, quiero cubrir rápidamente lo que los tipos no son. Siempre que hay una nueva herramienta, como pueden haber visto en otros desarrollos recientes en la vida, la gente se emociona mucho y la usa para cosas que pueden o no ser adecuadas. Y a veces pueden darle una mala reputación a la herramienta. También quiero hablar sobre las cosas en las que los tipos son sorprendentemente buenos. Primero, ¿qué puede informar a los tipos? Cómo configurar su código para que esté bien tipado. Y por último, ¿qué pueden informar los tipos? Cómo tener un código bien tipado puede ayudar a que las herramientas funcionen mejor en su código. Cosas realmente interesantes. ¿Estamos listos para todo eso? ¡Sí! Viernes por la tarde en una conferencia.

2. Tipos y TypeScript en JavaScript

Short description:

¿Qué son los tipos? Para responder a esa pregunta, tenemos que preguntar, ¿qué es TypeScript? JavaScript es una sintaxis junto con una especificación vaga sobre cómo ejecutar esta sintaxis. El problema con esto, sin embargo, es que no hay una forma incorporada en JavaScript para declarar la intención detrás de esos valores. Es por eso que tenemos TypeScript. TypeScript agrega una sintaxis sobre JavaScript. Es un superset, lo que significa que es todo JavaScript más estas cosas nuevas, y esa sintaxis nos permite decir explícitamente no solo cuáles son los valores, sino la intención detrás de esos valores. Es tan útil que surge la pregunta, ¿por qué no tenemos otros TypeScripts? Hay tres ejemplos de herramientas que están en el mismo espacio que TypeScript pero no son tan populares como él, y quiero repasarlos rápidamente. Primero, solo por curiosidad, ¿quién aquí usó Flow en algún momento? Flow es muy parecido a TypeScript. Es de Facebook, pero ha tomado una dirección diferente a TypeScript. Aún está en desarrollo activo. Pero en lugar de obtener mucho uso y volverse mundial y hacer que todos los que alguna vez hayan querido usar tipos puedan usarlo, Flow es un poco más específico.

¿Qué son los tipos? Para responder a esa pregunta, tenemos que preguntar, ¿qué es TypeScript? En orden para responder a esa pregunta, tenemos que preguntar, ¿qué es JavaScript? En su núcleo, JavaScript es esto. JavaScript es una sintaxis junto con una especificación vaga sobre cómo ejecutar esta sintaxis. Esto es encantador. Miren esto. Tenemos un let cosa. Solíamos no tener let. Solíamos tener var. Tenemos la capacidad de asignar una variable a diferentes valores. El problema con esto, sin embargo, es que no hay una forma incorporada en JavaScript para declarar la intención detrás de esos valores. La intención detrás de esos valores. No hay una pequeña cosa que puedas poner ahí para decir que esto solo va a ser, digamos, una cadena. Y eso es problemático porque el código se vuelve realmente difícil de trabajar a gran escala. Una vez que pasas de cinco desarrolladores, 50 desarrolladores, 500 desarrolladores, se vuelve realmente difícil de manejar eso. Es por eso que tenemos TypeScript.

TypeScript agrega una sintaxis sobre JavaScript. Es un superset, lo que significa que es todo JavaScript más estas cosas nuevas, y esa sintaxis nos permite decir explícitamente no solo cuáles son los valores, sino la intención detrás de esos valores. En este caso, cadena. Ahora, porque tenemos la sintaxis de TypeScript, podemos hacer cosas como el verificador de tipos de TypeScript. Dato curioso, escrito en TypeScript, y eso es una CLI o API a la que puedes llamar para obtener pequeñas quejas que dicen, hey, dijiste que esto iba a ser una cadena, pero le diste un número, tonto. Eso no está permitido. Puedes ejecutar el verificador de tipos a través de los servicios de lenguaje para TypeScript, como VS Code, grandes editores, y te darán las mismas quejas pero en forma de líneas onduladas rojas, tipo número no asignable a cadena. Y eso es realmente útil. Es tan útil que surge la pregunta, ¿por qué no tenemos otros TypeScripts? ¿Por qué TypeScript es la única herramienta que parece estar en uso popular hoy en día para hacer cumplir los tipos en el código JavaScript? No que haya dicho popular. Hay otras herramientas, pero TypeScript tiene la mayor cuota de mercado. Ahora hay tres ejemplos de herramientas que están en el mismo espacio que TypeScript pero no son tan populares como él, y quiero repasarlos rápidamente. Primero, solo por curiosidad, ¿quién aquí usó Flow en algún momento? Una buena cantidad de nosotros. Flow es muy parecido a TypeScript. Es de Facebook, pero ha tomado una dirección diferente a TypeScript. Aún está en desarrollo activo. Pero en lugar de obtener mucho uso y volverse mundial y hacer que todos los que alguna vez hayan querido usar tipos puedan usarlo, Flow es un poco más específico.

QnA

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 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.
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.
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
React Advanced Conference 2021React Advanced Conference 2021
6 min
Aplicaciones React (+Native) full-stack y seguras con tRPC.io
Top Content
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.

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.
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 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. 
Frictionless Development With Unified Type System
JSNation 2024JSNation 2024
113 min
Frictionless Development With Unified Type System
Featured Workshop
Ejiro Asiuwhu
Ejiro Asiuwhu
Imagine developing where frontend and backend sing in harmony, types dance in perfect sync, and errors become a distant memory. That's the magic of TypeScript Nirvana!
Join me on a journey to unveil the secrets of unified type definitions, the key to unlocking frictionless development. We'll dive into:
- Shared language, shared love: Define types once, share them everywhere. Consistency becomes your BFF, errors your worst nightmare (one you'll rarely see).- Effortless coding: Ditch the manual grind of type checking. TypeScript's got your back, freeing you to focus on building awesomeness.- Maintainability magic: With crystal-clear types guiding your code, maintaining it becomes a walk in the park. More time innovating, less time debugging.- Security fortress: TypeScript's type system shields your app from common vulnerabilities, making it a fortress against security threats.