Inferir varias cosas a la vez con tipos mapeados inversos

Mi nombre es Mateusz Kruzynski. Trabajo en Stately, donde trabajamos en máquinas de estado y todas las cosas relacionadas con eso. También mantengo un par de proyectos de código abierto populares, como Emotion, Redux Saga, ChangeSets, XState, obviamente, y también contribuyo a TypeScript de vez en cuando. Y me gustaría contarles hoy más sobre la inferencia de varias cosas a la vez con tipos de mapa inverso. Entonces, comencemos con un breve resumen de lo que realmente son los tipos de mapa. Entonces, son algo así como una función a nivel de tipo y aceptan una unión de claves, producen un tipo de objeto, y son muy útiles para la transformación del tipo de objeto. Se utilizan comúnmente para transformar los valores de las propiedades del objeto, pero desde TypeScript 4.1 también es posible transformar las claves de las propiedades del objeto. Entonces, en cierto sentido, solo tenemos nuestra x, nuestra entrada n, y la transformamos en nuestra y con cualquier transformación que la sintaxis de TypeScript nos permita. Entonces, veamos un breve ejemplo. Definimos que nuestra entrada es un tipo de objeto con dos propiedades, foo y bar, y ambas tienen tipos diferentes. Entonces, también definimos nuestro tipo de función. Este es solo identidad. Y podemos ver cómo se ve la sintaxis para ello. Ponemos en corchetes nuestra k. Eso es como nuestra i en un bucle for. Entonces, podemos usar eso para buscar esa propiedad en nuestro parámetro de tipo t y usar ese valor de alguna manera. Aquí, simplemente tomamos lo mismo y lo devolvemos. Ahora, podemos intentar llamarlo a nivel de tipo, y el punto es que deberíamos ser, deberíamos obtener realmente la misma cosa solo

de vuelta. Entonces, podemos inspeccionar eso, y sí, este es exactamente el mismo tipo. Tal vez echemos un vistazo a algo un poco más útil en la práctica. Podemos definir otra función a nivel de tipo. Esta se llama promiseify, y hacemos algo muy similar. Iteramos sobre la clave de t con nuestra k, y simplemente envolvemos la k actual de t con una función que devuelve una promesa de ese tipo. Así que reutilizamos nuestro tipo de objeto anterior y lo tratamos como una especie de objeto RPC aquí. Ahora podemos intentar usarlo en runtime, podemos encadenar el método bar de él, y luego podemos ver que realmente podemos usarlo, por lo que es una promesa, y en el callback recibimos nuestro valor. Y al inspeccionar, podemos ver que esta propiedad bar es efectivamente una función que devuelve una promesa de número y val se resuelve con éxito a un tipo de número.

Entonces, ¿qué son los tipos de mapa inverso y cómo se relacionan con lo que acabamos de discutir? Así que con los tipos de mapa inverso, la situación es solo un poco diferente porque todavía tratamos con una transformación de X a Y. Pero esta vez está un poco invertido porque lo que sabemos es la transformación en sí y el resultado final, nuestra salida Y. Y lo que estamos tratando de averiguar es lo que obtuvimos como entrada para satisfacer esta transformación en Y. Así que intentamos averiguar cuál es nuestra entrada, cuál es nuestra X aquí. ¿Y para qué sirve esto realmente? Es útil para la inferencia. Kensi.s preguntó en Twitter cómo se puede hacer este tipo de cosas y esto inspiró esta charla. Así que echemos un vistazo a este ejemplo. Así que la pregunta aquí es cómo puede intentar definir un objeto y proporcionarle algún tipo contextual para los tipos de parámetros y esas diferentes claves para resolver a esas mismas claves. Entonces, en el método A, ¿cómo podemos resolver el nombre del parámetro a A y cómo podemos hacer lo mismo para B y cómo podemos resolver el nombre allí para ser. Así que esto realmente no se puede hacer con satisfies porque satisfies no participa en la inferencia y realmente no podemos crear un candidato para ello aquí pero podemos hacerlo con funciones así que veamos cómo podemos hacerlo aquí. Así que primero definamos una función a nivel de tipo satisfy name para parecerse a lo que teníamos en la diapositiva anterior y esta es esta misma operación iteramos sobre la clave de T con K y simplemente producimos una función que recibe K como su parámetro de nombre y puede devolver libremente cualquier cosa porque su tipo de retorno está tipado como void. Ahora, para utilizarlo realmente, necesitamos introducir una función, la llamamos satisfy object name y reutilizamos esa función a nivel de tipo que acabamos de declarar anteriormente. Y la parte complicada es que ahora aquí ese objeto literal que pasamos a la función satisfy object name es una especie de nuestra salida y necesitamos que el motor de inferencia de TypeScript tenga que revertir lo que podría ser la entrada para esto. Así que podemos ver que realmente puede hacer eso, como podemos resolver el rompecabezas de Kant y podemos resolver esas claves aquí para esos tipos de parámetros y podemos buscarlo en la función satisfyObjectName que efectivamente infirió con éxito algún objeto de entrada que si lo proporcionamos entre los corchetes angulares utilizados como un explícito parámetro de tipo podríamos pasar de este objeto a esta salida que hemos visto como un argumento pasado a la función satisfyObjectName. Continuemos con un ejemplo más avanzado de la función provideValue y de nuevo declaramos una función a nivel de tipo aquí y esta vez ponemos k de t en la propiedad val de toda esta plantilla de este tipo mapeado y también introducimos una nueva propiedad que es un cb que significa callback y usamos esa misma k de t aquí como en una función por lo que deberíamos ser capaces de resolver a lo que se ha utilizado como la propiedad val. Deberíamos ser capaces de usar eso como el tipo de parámetro para esta función y ahora podemos ver que efectivamente es capaz de averiguar que debería usar ese tipo específico de propiedad de valor para a y b las claves de nivel superior de este objeto de entrada y podemos ver que aquí fue capaz de comprimir todo este objeto en una forma más sencilla para responder de nuevo a la pregunta de qué podría ser la entrada para satisfacer toda esta operación de mapeo y para que esta salida sea producida aquí he resaltado aquí esos lugares aquí que fueron utilizados para crear este objeto de entrada y si echamos un vistazo a nuestra plantilla en el tipo mapeado veríamos que esos lugares se relacionan exactamente con nuestra plantilla y que TypeScript fue capaz de ingeniería inversa de alguna manera ese tipo de entrada. Continuemos con otro ejemplo. Esta vez declaramos algo, digamos, una entidad database, usuario que tiene tres propiedades, nombre, apellido y edad. De nuevo, definimos nuestra plantilla para nuestro tipo de mapa y aquí especificamos algunos requisitos para toda la transformación y la propiedad needs. Noten que esto puede ser cualquier cosa aquí, realmente no nos importa lo que será, lo usaremos de una manera específica pero en este punto está sin vincular y en realidad podría resolver a cualquier cosa. Pero lo que pongamos en esta propiedad needs será utilizado en la propiedad compute y esta vez elegimos del usuario objeto, clave de esta k de t que se resuelve a nuestra propiedad needs en este lugar muy específico y lo intersectamos con la clave del usuario. Este es un truco ingenioso para filtrar esas propiedades porque lo que pongamos en la propiedad needs deberían ser propiedades del usuario objeto de usuario. Así que al intersectar esos requisitos en la posición needs con las claves reales del usuario creamos un conjunto común de esas dos cosas por lo que es como filtrar en el mapa en el

a nivel de tipo. Y aquí extendemos nuestra entidad de usuario con la propiedad extra del apellido. Nosotros especificamos sus requisitos. Vemos que especificamos que necesitamos la última propiedad y tratamos de calcular su valor, el valor de este apellido. Y aquí usamos la propiedad last del objeto de usuario y este valor de sonido. Y todo eso devuelve una única función de desvinculación o podría devolver tal que podría a su vez ser devuelta a React y podría invocar eso cuando está limpiando el efecto que el efecto de configuración. Es bastante ingenioso porque simplemente elimina algo de código repetitivo para nosotros a expensas de usar esta pequeña utilidad. Así que echemos un vistazo a cómo está definido. Tenemos aquí su declaración, vinculamos el parámetro de tipo que se resuelve a algún elemento HTML y ahora podemos usar sus claves para calcular para como restringir nuestro tipo de mapa inverso a sólo posibles tipos de eventos de ese elemento HTML específico. Así que no seremos capaces de usar tipos de eventos que no estén relacionados con este y luego simplemente usamos esos dos parámetros de tipo vinculados aquí. Pasamos t al primer argumento que es nuestro objetivo y extendemos una lista de enlaces de esos tipos para la posición del parámetro de los oyentes. Ese pequeño spread simplemente ayuda a TypeScript a inferir realmente una tupla aquí porque de lo contrario podría inferir un array así que es una pequeña pista para TypeScript para hacer lo que queremos que haga. ¿Qué es un enlace aquí? Así que podemos ver aquí que tenemos nuestro t que tiene un read-only tenemos enlaces aquí y eso acepta nuestro parámetro de tipo t que tiene una restricción de read-only array de cadenas. Así que para iterar sobre un array o una tupla usamos la misma sintaxis que estamos usando para mapear sobre las propiedades del objeto. Así que hacemos exactamente eso aquí, usamos k de t como la propiedad de tipo aquí y usamos esa k de t dentro del parámetro del oyente aquí, y usamos ese tipo para de alguna manera recuperar posibles tipos de eventos con la ayuda de un extra tipo que está un poco fuera de esta presentación, así que asumamos que simplemente existe. También tenemos este posible tipo de evento que agarra una lista de claves de nuestro objetivo e intenta inferir posibles tipos de eventos, pero recuerda que de aquí estaremos devolviendo sólo algunas cadenas como click, blare, input, etc. Pero el getEvent helper que no mostré se suponía que mapeaba esas cadenas a tipos de eventos reales, y podemos ver que este ejemplo es capaz de resolver en cada posición específica tipos de eventos específicos. Así que para el evento blare, para el tipo blare esto es un evento de foco, mientras que para el tipo click esto es un evento de ratón. Esto es muy bueno porque fuimos capaces de reducirlo tanto como fue posible así que cada oyente puede lidiar con su propio tipo de evento específico en lugar de tener que lidiar con cada otro tipo que podría aparecer aquí dentro de toda esta tupla. Y lo bueno de ello es también que el auto-completado funciona bastante bien aquí así que podemos, lo que es genial de ello es que el auto-completado funciona aquí y así nosotros incluso podemos proporcionar una buena experiencia de desarrollador para esas cosas aquí. Y gracias al posible tipo de evento helper allí que estaba calculando los tipos de eventos permitidos, todos ellos aparecen aquí. Esto es bastante bueno porque la firma original de Bundle estaba usando como un montón de sobrecargas, creo que hasta diez quizás. Pero con esos tipos de mapa inverso aplicados aquí, podemos simplemente reducir todo a una sola firma, lo cual es una gran mejora en la legibilidad. Para la implementación completa de este ayudante, puedes mirar en este repositorio,

en este paquete de oyente de eventos vinculantes. Así que hablemos ahora de lo que amo. Así las máquinas de estado. Veamos cómo podemos utilizar los tipos de mapa inverso en este contexto. Esta función createMachine que acepta algún estado inicial, una lista de esos estados como el primer estado, el segundo estado y el tercero. Y cada uno de esos también tiene definido transiciones para ellos. Pueden aceptar eventos para cambiar el estado actual a otro estado dentro de este objeto de configuración completo aquí. Y esa función createMachine puede ser definida como esta. Lo interesante aquí es que tenemos un mapeo de todas esas cosas, de todas esas propiedades. Definimos nuestro propio registro que apuntará a diferentes estados, pero también podemos referirnos a este tipo de mapa inverso completo, como fuera de él. Así que podemos tipificar fuertemente la propiedad inicial que es siendo utilizada fuera de él y podemos verificar que funciona. Aquí los autocompletados funcionan genial y nosotros logramos con éxito limitar esta propiedad solo a aquellos estados que existen en esta misma configuración. Y de manera similar, las transiciones aquí también están vinculadas solo a aquellos estados que aparecen en esta configuración y puedes seleccionarlos de la lista y todo eso.

Hablemos de recursión porque sería realmente genial hacer esas cosas de manera recursiva y resulta que también podemos hacer eso usando una versión expandida de la función createMachine. Así que aquí, esto es muy similar al anterior. Simplemente define una máquina de estado jerárquica eso significa que dentro de los estados podemos tener más estados y tal como un estado compuesto puede apuntar a sus hijos con su propia propiedad inicial. Definimos una firma para createMachine aquí. Como configuración usamos un tipo de estado auxiliar y eso es muy similar a el anterior con un cambio muy pequeño. Aquí estamos usando el estado de manera recursiva. Así que mientras K de T aparece desnudo aquí podemos simplemente pasarlo recursivamente a otros tipos como estado aquí y inferirá todas esas cosas de manera recursiva a través de las capas. Así que eso proporciona una muy buena dx porque en cada nivel de la máquina de estado podemos vincular los tipos aceptados solo a ese nivel porque en este nivel solo podemos hacer la transición al primer o segundo estado pero no deberíamos ser capaces, al menos no con esta sintaxis, no deberíamos ser capaces de hacer la transición a sus hijos. Así que no deberíamos ser capaces de hacer la transición a mi hijo o a mi otro hijo. Así que podemos ver que esta transición específica está correctamente vinculada y esas son las únicas dos válidas valores válidos aquí y los autocompletados funcionan bien. De manera similar, en la transición anidada solo esos estados, esos estados hermanos pueden ser utilizados allí como valores de transición. Así que realmente no podemos hacer la transición de aquí a los estados de nivel superior primero y segundo y los autocompletados también están correctamente limitados a los válidos aquí. Hay algunas limitaciones corregibles a esta técnica completa como que solo pueden inferir una sola cosa por propiedad de objeto o elemento de tupla y hay algunos PRs en progreso que podrían abordar esa inferencia de expresión intra también no funciona dentro de ellos o o otros parámetros de tipo que aparecen dentro de ese tipo de mapa inverso no pueden ser lo siento, hagamos una pausa. Hay algunas limitaciones corregibles a esta técnica completa como por ejemplo solo pueden inferir una sola cosa por propiedad de objeto o tupla así que si tenemos más relaciones entre diferentes puntos dentro de nuestra ranura realmente no podríamos expresarlas al menos no ahora hay algunas solicitudes de pull que están abiertas algunas de ellas son cosas en progreso que podrían ser capaces de abordar esas limitaciones de manera similar en la inferencia de expresión intra simplemente no funciona con ellos ahora mismo y también hay un PR en progreso para eso y las fuentes de inferencia para otros tipos de parámetros realmente no pueden ser utilizados cuando aparecen en esos tipos de mapa inverso porque son como evaluados perezosamente y también hay una solicitud de pull para eso gracias este es mi manejador de twitter soy anders rake en twitter y under es en github sígueme o convence a tu empresa para patrocinar mi trabajo porque todos esos prs mencionados en la diapositiva anterior son en realidad míos