Sistema de Tipos React

Rate this content
Bookmark
Slides

El sistema de tipos de TypeScript es increíblemente poderoso. Puede representar tipos de JavaScript interdependientes extrañamente complejos y viene con un conjunto de condiciones lógicas completas de Turing. Pero esta es una conferencia de React, ¿verdad? Implementemos un React primitivo puramente en el sistema de tipos. ¡Por diversión!

Josh Goldberg
Josh Goldberg
21 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla trata sobre la implementación de un subconjunto limitado del equivalente de tipo de React, específicamente su motor JSX, en el sistema de tipos de TypeScript sin código en tiempo de ejecución. El orador demuestra cómo usar características de TypeScript como tipos restringidos y cadenas de texto literales para inferir y renderizar elementos JSX en el sistema de tipos. También muestran cómo renderizar encabezados e hijos utilizando una utilidad llamada 'render component'. La charla concluye con recursos adicionales para aprender TypeScript y temas relacionados.

Available in English: Type System React

1. Introducción al sistema de tipos React

Short description:

Hola y bienvenidos al sistema de tipos React conmigo, Josh Goldberg. Soy un mantenedor de código abierto a tiempo completo en el ecosistema TypeScript. Vamos a implementar un subconjunto limitado del equivalente de tipo de React, solo su motor JSX en el sistema de tipos sin código en tiempo de ejecución. Comencemos en TypeScript lang dot org slash play.

Hola y bienvenidos al sistema de tipos React conmigo, Josh Goldberg. Soy un mantenedor de código abierto a tiempo completo en el TypeScript ecosistema. Trabajo en proyectos generales que te ayudan a escribir TypeScript un poco mejor, más notablemente TypeScript ESLint, la herramienta que te permite ejecutar herramientas estándar de JavaScript como ESLint y Prettier en código TypeScript. También soy el autor del libro de aprendizaje de TypeScript a través de O'Reilly, por lo que me gusta hablar sobre TypeScript. Todo lo que vamos a charlar hoy está en GitHub y es de código abierto bajo el sistema de tipos React, un repositorio en mi usuario Josh Goldberg, pero quiero señalar que esto no es TypeScript normal. No necesitas seguir al pie de la letra y entender todo completamente para ser un desarrollador de TypeScript o para trabajar de manera competente en TypeScript. Hoy todo son travesuras, y aunque los conceptos que voy a mostrar son realmente útiles para trabajar en el sistema de tipos si lo haces mucho, no son cosas que deberías usar día a día. Son todas cosas tontas, todas las travesuras extrañas.

Porque lo que vamos a hacer es implementar un subconjunto muy limitado del equivalente de tipo de React, realmente solo su motor JSX en el sistema de tipos sin código en runtime. Vamos a hacer un tipo, digamos un registro de componentes. Vamos a hacer un tipo de ayuda render que toma una cadena y devuelve los resultados JSX, los resultados renderizados, y vamos a imprimir eso en las herramientas de desarrollo que están ejecutando TypeScript para nosotros. Así que muy poco práctico. Nunca satisfarías ninguna necesidad del usuario con esto, pero creo que es una forma linda de explorar el sistema de tipos. Así que comencemos. Puedes encontrar todo el código que voy a enviar mi código en vivo bajo el repositorio bajo fuente slash fun, pero voy a estar trabajando en TypeScript lang dot org slash play, que es un patio de juegos realmente agradable disponible en el sitio web de TypeScript. Puedes escribir código TypeScript a la izquierda y obtener código JavaScript o cualquier error, archivos de declaración a la derecha. Ahora a la izquierda, tengo solo algo de código estándar TypeScript. Tengo un registro de componentes de tipo y un registro de consola, y podemos ver que la representación del sistema de tipos solo incluye el tipo y la representación de JS solo incluye el JavaScript. Pero mencioné que hoy es puramente en el sistema de tipos. Así que voy a seguir adelante y eliminar nuestro registro de consola. No JavaScript solo tipos. Pero eso plantea la pregunta de cómo vamos a imprimir cosas. Así que voy a hacer este pequeño tipo temporal imprímeme aquí. Voy a decir que quiero imprimir el registro de componentes. Y en realidad hay una característica agradable del patio de juegos de TypeScript y otros editores de TypeScript llamada a slash assertions. Puedes obtener una extensión de VS Code para hacer esto. Pero si escribes un comentario que tiene este pequeño signo de intercalación y un signo de interrogación, te pedirá que imprima en la pantalla lo que habrías obtenido si hubieras pasado el ratón por allí. Así que aquí obtuvimos el tipo imprímeme como el tipo de registro de componentes. Y se imprimió,

2. Explorando la representación de etiquetas y JSX en TypeScript

Short description:

Voy a cambiar a destellos y el encabezado es H1 con hijos. Quiero poder obtener un nombre de etiqueta y renderizar el contenido bajo esa etiqueta. TypeScript tiene una característica llamada tipo restringido para asegurarnos de que solo estamos pasando una de las claves reales. Voy a extraer eso a un tipo de componente para que cada vez que diga componente, lo que realmente quiero decir es una de las claves del registro. Quiero poder tener JSX y etiquetas de cierre automático, lo cual no es compatible actualmente.

obtuvimos la versión en cadena de eso. El emoji es corazón brillante. En realidad, voy a cambiar a destellos, un poco menos deslumbrantes, y el encabezado es H1 con hijos. ¡Hurra! Imprimiendo en el sistema de tipos Imprimiendo en el sistema de tipos. Pero necesito hacer más que eso. Quiero poder, digamos, obtener un nombre de etiqueta en particular y renderizar el contenido bajo esa etiqueta. Y puedes hacer eso en TypeScript con esta búsqueda de firma de índice, este pequeño tipo de matriz. Aquí estamos diciendo dame bajo el registro de componentes el tipo bajo el nombre de propiedad emoji, que en este caso, sí es corazones brillantes, perdón, destellos. Si cambiáramos eso a encabezado, obtendríamos H1 hijos slash H1. Si cambiáramos eso a, no sé, ASDF WAT, alguna tontería, obtendríamos la propiedad Red Squiggly's ASDF WAT no existe en el tipo, registro de componentes. Genial. Y esa pequeña restricción allí, el hecho de que necesita ser una de las claves reales del tipo es útil porque quiero escribir un tipo de render que toma un parámetro de tipo y me devuelve el registro de componentes de ese parámetro de tipo, haciendo una versión dinámica de lo que estoy haciendo aquí. Si quisiera renderizar emoji, este dato curioso en realidad funciona. Esto es lo que se llama un tipo genérico o tipo con un parámetro de tipo. Es algo así como una función en el sistema de tipos. Tomamos una etiqueta, digamos emoji, la cadena, y luego hacemos algo. Creamos un nuevo tipo con esa etiqueta. Aquí estamos haciendo el registro de componentes de la etiqueta como resultado, pero estamos obteniendo la queja de que el tipo de etiqueta no puede ser usado para indexar el tipo de registro de componentes. De hecho, si cambiamos a la pestaña de errores aquí, podemos ver eso. Bueno, eso tiene sentido porque ¿qué pasaría si pasara asdf? Necesitamos alguna forma de asegurarnos de que estamos pasando solo una de las claves reales de este tipo. Y TypeScript tiene una característica para eso, se llama un tipo restringido. Con la palabra clave extends, podemos extender la clave del registro de componentes. Voila, no más líneas rojas. Print me es felizmente el emoji brillante, y aquí estamos diciendo que la etiqueta se extiende o debe ser una de las claves del registro de componentes. En realidad, voy a extraer eso a un tipo de componente aquí para que cada vez que diga componente, lo que realmente quiero decir es una de las claves del registro. Si cambiáramos esto a encabezado, sí, renderiza el encabezado muy bien. Renderizando, es un comienzo. Pero quiero poder hacer más que solo tomar un nombre de etiqueta y renderizar bajo la etiqueta. Quiero poder tener JSX. Quiero mis pequeñas etiquetas de cierre automático. Quiero poder hacer algo como emojis de cierre automático, que ahora mismo no es compatible.

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

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
TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.
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
No pensamos en React como si tuviera sus propios tipos. Pero los tipos de React son una parte fundamental del marco de trabajo - supervisados por el equipo de React, y coordinados con las principales lanzamientos de React.En esta charla de codificación en vivo, veremos todos los tipos que te has estado perdiendo. ¿Cómo obtienes el tipo de props de un componente? ¿Cómo sabes qué ref toma un componente? ¿Deberías usar React.FC? ¿Y qué pasa con JSX.Element?Te irás con un montón de ideas emocionantes para llevar a tus aplicaciones de React, y esperamos que con una nueva apreciación por las maravillas de React y TypeScript trabajando juntos.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Cuanto más trabajas en una aplicación, más complicado se vuelve su enrutamiento y más fácil es cometer un error. "¿Se llamaba la ruta usuarios o usuario?", "¿Tenía un parámetro id o era userId?". Si solo TypeScript pudiera decirte cuáles son los nombres y parámetros posibles. Si solo no tuvieras que escribir una sola ruta más y dejar que un complemento lo haga por ti. En esta charla repasaremos lo que se necesitó para traer rutas automáticamente tipadas para Vue Router.
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
Voy a profundizar en los internos de Nuxt para describir cómo hemos construido un marco de trabajo primero-TypeScript que está profundamente integrado con el IDE del usuario y la configuración de comprobación de tipos para ofrecer seguridad de tipo de pila completa de extremo a extremo, sugerencias para diseños, middleware y más, opciones de configuración de tiempo de ejecución tipadas e incluso enrutamiento tipado. Además, destacaré lo que más me emociona hacer en los días venideros y cómo TypeScript hace eso posible no solo para nosotros sino para cualquier autor de bibliotecas.
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
¿Por qué estamos los desarrolladores tan obsesionados con desacoplar cosas que son de naturaleza acoplada? tRPC es una biblioteca que reemplaza la necesidad de GraphQL o REST para APIs internas. Al usarla, simplemente escribes funciones de backend cuyas formas de entrada y salida se infieren instantáneamente en tu frontend sin ninguna generación de código; haciendo que la escritura de esquemas de API sea cosa del pasado. Es ligera, no está vinculada a React, se puede almacenar en caché HTTP y se puede adoptar de forma incremental. En esta charla, daré un vistazo a la DX que puedes obtener de tRPC y cómo (y por qué) empezar.
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
La verificación de tipos en una base de código TypeScript puede ser lenta, especialmente para monorepos que contienen muchos proyectos que necesitan usar el verificador de tipos para generar archivos de declaración de tipos. En esta charla, presentamos, por primera vez, una nueva característica de TypeScript en la que estamos trabajando llamada “Declaraciones Aisladas” que permite que los archivos DTS se generen sin usar el verificador de tipos en absoluto. ¡Esto abre la puerta a una generación de declaraciones más rápida en TypeScript mismo, así como en herramientas externas escritas en otros lenguajes como ESBuild y swc. Verás cómo usar esta nueva opción, y tal vez (solo tal vez) te convencerás de los beneficios de los tipos de retorno explícitos. Lo más importante, mostraremos cómo las Declaraciones Aisladas permiten compilaciones paralelas para distribuir el trabajo a través de tus núcleos de CPU para mejorar significativamente la velocidad de compilación de tus proyectos TypeScript.

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.
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.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
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.
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
Dominando Node.js Test Runner
TestJS Summit 2023TestJS Summit 2023
78 min
Dominando Node.js Test Runner
Workshop
Marco Ippolito
Marco Ippolito
Node.js test runner es moderno, rápido y no requiere bibliotecas adicionales, pero entenderlo y usarlo bien puede ser complicado. Aprenderás a utilizar Node.js test runner a su máximo potencial. Te mostraremos cómo se compara con otras herramientas, cómo configurarlo y cómo ejecutar tus pruebas de manera efectiva. Durante la masterclass, haremos ejercicios para ayudarte a sentirte cómodo con el filtrado, el uso de afirmaciones nativas, la ejecución de pruebas en paralelo, el uso de CLI y más. También hablaremos sobre trabajar con TypeScript, hacer informes personalizados y la cobertura de código.