Sistema de Tipos React

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ó,

Para hacer eso, necesito poder llegar al tipo proporcionado y extraer algo. En este caso, el subconjunto de emoji. Y la forma de hacerlo es con algo llamado un tipo inferido condicional.

Voy a escribir rápidamente eso dado un render, que tal vez, tal vez vamos a empezar con objetos. Si el objeto proporcionado coincide con alguna plantilla, si raw se extiende, coincidentemente la misma palabra clave extends, texto, llamemos a esto cadena, entonces sí, de lo contrario, no. Aquí vemos que este tipo condicional está de hecho diciendo que raw se extiende a este tipo de objeto texto cadena. Sí, no. Eso es un tipo condicional.

Ahora podemos agregar en esto infer tag. Así que llamemos a esto etiqueta en realidad. Etiqueta. ¡Aja! Ahora, estamos llegando al tipo proporcionado raw, extrayendo la etiqueta, y luego devolviéndola un poco como de nuevo, una función del sistema de tipos. Pero somos capaces de hacer un poco de lógica casi aquí. Estamos comprobando si se cumple esta condición. Y esto es un ternario al igual que tendrías un signo de interrogación y dos puntos en el espacio runtime. Pero mencioné antes, no quería formas de objeto, sino formas de cadena. Así que quiero poder hacer esto. Etiqueta de cierre automático. Y puedes hacer eso, de hecho. Puedes tener literales cadenas de texto en el sistema de tipos, y puedes inferir dentro de ellas. Puedes decir, ¿no coincide con este patrón? Inferir etiqueta. Si es así, devuélveme la etiqueta. Emoji. Pero eso es solo la etiqueta. Así que lo que realmente quiero hacer es obtener el registro de componentes de la etiqueta. Y ahora obtenemos esa misma queja de antes. El tipo de etiqueta no puede ser usado para indexar el registro de componentes, lo que significa que de nuevo tengo que usar la palabra clave extends para decir, solo coincide si la etiqueta se extiende a componentes. Y voila. Somos capaces de renderizar un elemento JSX

Que, dato curioso, se te permite hacer. Voy a tener que decir si raw no se extiende desde la plantilla de cierre automático, bueno, ¿y si se extiende desde una plantilla diferente? En este caso, para la etiqueta de descendientes. Así que es lo mismo que antes. Estamos agregando otro caso en el que si no coincidió con la plantilla de cierre automático, pero sí coincide con una plantilla para, veamos aquí, inicio de etiqueta, algunos descendientes inferidos, y etiqueta de cierre, entonces hacemos render, y funciona. Vemos un encabezado renderizado justo aquí. Encabezado, y luego todavía recursamos en el después. Así que obtenemos el segundo, el destello. Es increíble, pero quiero descendientes, lo que significa que voy a seguir adelante y escribir una utilidad aquí, porque quiero renderizar los descendientes en algún lugar a lo largo de ComponentRegistry.

Así que voy a escribir el tipo render component, que toma la etiqueta se extiende a componentes, de nuevo, algo así como una función en el sistema de tipos. Y luego también voy a tomar descendientes se extiende a cadena. Y voy a comprobar, ¿se extiende el registro de componentes de la etiqueta a alguna plantilla que tiene antes este indicador de que quiero descendientes, luego infiero después si lo hace, entonces el resultado será antes los descendientes y después. De lo contrario, vamos a devolver directamente el registro de componentes de la etiqueta, como si nada hubiera pasado. Y voy a usar eso aquí. Render components de la etiqueta. Ooh, y de los descendientes, y ahí vamos. Y voilà, funciona. Encabezado, que se convierte en el H1 y renderiza el Hola Mundo. Si yo fuera a ya-ya-ya, ya-ya-ya, funciona. Y funciona porque raw coincide con esta plantilla con descendientes, lo que significa que luego ejecutamos render component y el registro de componentes de, en este caso, encabezado, de hecho coincide con la plantilla que contiene descendientes. Así que efectivamente reemplazamos la cadena de los descendientes con los descendientes. Así que eso me hace feliz. Pero un poco más de trabajo, estamos viendo que los descendientes incluyen la etiqueta emoji raw, pero en realidad quería renderizar eso.

Entonces, en la renderización de componentes, voy a cambiar. En lugar de devolver directamente el registro de componentes, voy a hacer renderizar hijos, y eso funciona. Hola Mundo brilla. Ah, supongo que siempre podríamos renderizar hijos en caso de que los componentes se refieran entre sí, pero eso está un poco fuera del alcance de esta masterclass de 20 minutos. Así que eso está bien. Y eso está funcionando bastante bien. Solo voy a hacer un poco de limpieza de código. Me gustaría usar el mismo tipo genérico de renderización de componentes aquí, pero en el caso de la etiqueta de cierre automático es una cadena vacía para los hijos, lo que significa que puedo llamar a una característica de código tipado tipos predeterminados para decir en mi renderización de componentes si no tengo hijos, simplemente los predetermino a la cadena vacía. Haciendo este código aquí, creo que es un poco más limpio.

Y ahí lo tienen, una implementación funcional de un subconjunto muy limitado del motor de renderización JSX de React en el sistema de tipos. Repasemos desde el principio antes de terminar. He declarado aquí un tipo de registro de componentes, que es el concepto de un objeto que tiene dos propiedades. Un emoji tiene la cadena de emoji de brillo como su valor. No cualquier cadena, sino específicamente esa cadena. Y también encabezado, que es h1, este indicador de que tenemos hijos, /h1. Luego declaré el tipo de utilidad de componentes aquí, que es cualquiera de las claves del registro de componentes, prácticamente hablando de emoji y encabezado. Luego declaro este tipo de renderización de componentes, que es un tipo genérico. Toma parámetros de tipo y devuelve un tipo resultante basado en eso. Toma uno de los componentes, así que una etiqueta. Y luego hijos, que es una cadena que se predetermina a la cadena vacía. Comprueba. ¿Se extiende el valor del componente bajo esa etiqueta desde esta plantilla? Así que texto antes, el indicador de hijos, texto después. Si se extiende desde esa plantilla, entonces renderizas, o devuelves un resultado de antes, los hijos renderizados, y después, de lo contrario devuelves el componente en sí. Eso se usa en nuestro principal, nuestro conductor, nuestro tipo de trabajador, render, que toma un texto en bruto y verifica dos condiciones. Si el texto es esta plantilla, cualquier cadena antes, la etiqueta del componente dentro de un área de cierre automático, y después, entonces resultamos en el texto anterior, la renderización del componente, la renderización del después. De lo contrario, si es un componente con una plantilla ligeramente diferente, si es antes de la lección signo, el componente en sí con algunos hijos y luego el componente de nuevo con algo después. De manera similar, renderizamos antes. Renderizar componente, etiqueta hijos. Renderizar después. Si el texto en bruto no coincidía con ninguna de esas dos plantillas, lo devolvemos directamente.

Y al final, imprímeme es el resultado, donde tomamos este texto, recursamos un par de veces gratis, y obtenemos nuestros resultados de cadena. Yay. Me siento muy genial y fuerte haciendo eso. Y esto me hace feliz. Me trae mucha alegría jugar con TypeScript de esta manera. Pero entiendo totalmente si esto no es para ti, si nunca has jugado con TypeScript antes o hecho cosas profundas en el sistema de tipos, eso está totalmente bien.

De nuevo, esto no es algo que necesites usar en una base diaria de TypeScript, es solo algo genial que creo que es divertido explorar con algunas de las técnicas del sistema de tipos y fundamentos. Si quieres empezar con TypeScript, tengo la mayoría de los conceptos que necesitas para esto en una carpeta diferente en la misma fuente de repositorio slash foundations.

Entonces eso fue divertido. Vamos a concluir. Hablemos un poco de otras cosas por ahora. Si quieres aprender más, typescriptblind.org y theplaygrounds slash play son fantásticos. Son de código abierto en línea. Lo recomiendo mucho. También mencioné que tengo un libro, Aprendiendo TypeScript, que puedes probar absolutamente. Su sitio web tiene muchos artículos y proyectos de código abierto gratuitos para ayudarte a profundizar tu comprensión de TypeScript. Y si los libros no son para ti, o si solo quieres más o otro recurso, realmente me gusta mattpocockstotaltypescript.com. Si te preguntas, esto es todo genial, ¿qué diablos voy a hacer con ello? Bueno, un par de lugares a los que puedes ir después de esto, definitelytyped es uno de los más grandes públicos repositorios de código abierto en el mundo. Es el lugar donde todos los tipos de terceros, así que los paquetes que no describen cómo se ven a los TypeScripts, puedes describir cómo se ven en este repositorio existen. Entonces, si quieres decir, mira el tipo de React, porque React tiene tipos definitivamente tipados puedes ir a definitelytyped, tipos, react, index DTS, y ver un montón de sintaxis que en realidad usa muchas de las características con las que jugamos hoy. Entonces, si alguna vez tenemos un problema con un tipo de terceros, o hay un paquete que usas que no tiene información de tipo, definitely typed es un lugar al que puedes ir para avanzar en eso, para hacerlo mejor para todos. En segundo lugar, los desafíos de tipo es un gran repositorio. También, tienen una página de inicio muy linda, desafío de tipo que enlaza con el GitHub. Tiene un montón de desafíos de tipo pequeños, que se vuelven mucho más complejos para flexionar los conceptos que mostramos hoy. El sistema de tipos es increíblemente poderoso y podría modelar no solo React sino TypeScript en sí mismo. Las personas han implementado TypeScript en el sistema de tipos de TypeScript. Si quieres ser una de esas personas ridículas, esta es una forma de llegar allí. O puedes usar los desafíos fáciles y medios para profundizar tus características básicas de TypeScript y fundamentales del sistema de tipos de TypeScript. Todo lo que hemos hablado hoy es, al menos, construido hacia mi libro Aprendiendo TypeScript. Muy recomendado. Creo que es bastante bueno. Además, porque soy un mantenedor de código abierto a tiempo completo, cualquier cosa que puedas enviarme, en términos de amor, aprecio, dinero, problemas presentados, solicitudes de extracción enviadas me ayudará a trabajar para todos ustedes. De manera similar, TypeScript VS Lint es un proyecto independiente. No estamos asociados con ninguna empresa. Entonces, cualquier cosa que puedas hacer para ayudarnos a presentar errores, enviar código y enviar nos dinero sería realmente apreciado, para ayudarnos a seguir haciendo TypeScript mejor para todos. Dicho todo esto, me lo pasé genial con esto. Espero que lo hayas disfrutado. Puedes encontrarme en línea como JoshuakGoldberg en la mayoría de los sitios, incluyendo por joshuakgoldberg.com. ¡Gracias a todos, disfruten el resto de la masterclass!