Codificación Con Complejidad de Tiempo O(0): Diversión Con TypeScript Avanzado

Hola a todos, espero que estén teniendo una conferencia increíble y estoy feliz de poder hablar con ustedes hoy. Mi nombre es Dante, pueden encontrarme en dantedruwe.com y voy a hablar un poco sobre el lado divertido de TypeScript avanzado. Y esto va a ser una sesión de codificación interactiva. Y eso significa que nunca dejaré mi VS Code. Esto también está dentro de VS Code y saltaremos directamente al código.

Muy bien. Así que comencemos. Tengo una pequeña demostración, eh, para ustedes. Este es un juego de Wordle. Y lo que pueden ver es que este es un tipo llamado game y se evalúa a cinco puntos en blanco aquí. Y para que no tenga que seguir pasando el cursor sobre este tipo, eh, para mostrarles qué tipo es realmente. Voy a usar una pequeña extensión de VS Code que puede mostrarles este tipo en línea. Si solo apunto a él, entonces mostrará este tipo y se actualizará en tiempo real. Así que será fácil.

Ahora, ¿qué es Wordle? Espero que todos lo conozcan. Pueden adivinar una palabra y luego, eh, obtienen una puntuación basada en qué tan cerca están de la palabra secreta. Y si es verde, entonces significa que su letra es correcta. Si es amarillo, eso significa que su letra es correcta, pero no está en el lugar correcto. Y blanco en este caso significa que ninguno de los caracteres, que este carácter en ese lugar no es correcto. Así que podemos hacer nuestra primera adivinanza y voy a adivinar "water" y pueden ver inmediatamente este tipo actualizándose a un punto verde, un punto amarillo y tres puntos blancos. Así que eso significa que nuestra W es correcta. Nuestra R también es correcta, pero está en el lugar equivocado y sí, las otras letras no aparecen en esta palabra. Así que adivinemos "words" porque la R está ahí. Bien. Ahora la R está en el lugar correcto. La O también. Así que adivinamos eso correctamente. La D está en la palabra, pueden ver por los puntos amarillos, pero está en el lugar equivocado. Así que tiene que ser así. Y luego por supuesto creo que esto es "world".

Así que ahora adivinamos este juego de palabra correctamente y no cometemos ningún error. Esto es wordle en tiempo de compilación. Esto no se está ejecutando en ningún lugar. Todo esto es puramente dentro de los tipos de TypeScript. Y si paso el cursor sobre la palabra secreta, puedes ver que de hecho era world.

Bien. ¿Cómo implementaríamos ahora este tipo de wordle? Esto parece que hay mucha magia ocurriendo y es algo mágico, pero sí, puedo explicarte lo que está sucediendo. No voy a mostrar el código todavía. Ya puedes ver que estamos en la línea 29. Así que eso significa que en 28 o menos líneas, este tipo de wordle está definido. No está en un archivo diferente. Está todo aquí. Así que eso es bastante impresionante.

Así que sí, intentemos explicar cómo funciona, pero no te lo voy a mostrar, voy a construirlo. Así que ten paciencia conmigo. Ahora, ¿cómo implementaríamos esto en TypeScript simple? Esto es pseudo. Sí, compila. Quiero decir, se ejecuta, pero así es como puedes hacer esto. Así que tenemos una adivinanza y un secreto.

Mantienes un array de resultados aquí. Recorremos los otros secretos y verificamos si las letras coinciden haciendo index off. Entonces, si una, eh, la primera letra de la adivinanza es index off en la palabra es si es menos uno, la función index off, significa que no está en la palabra. Así que, por ejemplo, esta a aquí hacemos index off a en el secreto y vemos que la a no está allí. Es menos uno. Entonces obtenemos un punto blanco si el index off es igual a la i. Así que esto significa que por ejemplo, este buscará la w en la siguiente palabra y vuelve como cero w es un índice cero aquí y es un índice cero allí. Eso significa que está en el mismo lugar. Así que eso significa un punto verde. Por ejemplo, la R aquí no estaría en el índice I, porque miraríamos aquí en este en el índice cuatro y aquí está en el índice dos. Así que eso no sería una coincidencia. Entonces obtendríamos un punto amarillo. Y así es como haríamos esto en TypeScript. También podrías agregar a este array, pero elegí escribirlo así porque en los tipos de TypeScript, no podemos agregar a arrays. Solo podemos usar el operador de propagación.

Así que si, si te preguntas por qué este código está estructurado así, es porque tiene una semejanza con el código final de TypeScript que vamos a escribir. Entonces, ¿qué tenemos que hacer para que esto funcione? Sí. Tenemos que encontrar una manera de recorrer una cadena. Como hacemos aquí. Tenemos que seguir contando el bucle. Tenemos que tener este índice aquí para poder comparar las diferentes posiciones. Tenemos que tener una especie de funcionalidad de index of en nuestro producto final de TypeScript. Necesitamos hacer comprobaciones if, necesitamos hacer una comprobación condicional y necesitamos mantener un array de resultados y agregar a él. Y eso es lo que te dije antes con el, con el operador de propagación aquí. Así que esto es todo lo que tendremos que hacer en los tipos de TypeScript para que esto funcione con los tipos de TypeScript.

Muy bien, comencemos. ¿Verdad? Um, bueno, sí, esta función index off, ¿qué tenemos que hacer y realmente para que esto funcione? Bueno, esta cosa, esa función off también está recorriendo la cadena, manteniendo el conteo y verificando si sus letras coinciden.

Bien, comencemos con la primera cosa, la comprobación condicional. ¿Qué vamos a hacer? Voy a poner esto de nuevo para que podamos seguirlo. Um, ¿qué vamos a hacer en los tipos de TypeScript para una comprobación condicional? Así que, por ejemplo, podemos hacer un tipo, not empty y va a tomar, sí, lo llamaré normalmente todo en tipos genéricos se llama T, pero lo llamaré S para string. Uh, por ahora también puedes decir aquí que debería extender string, para asegurarte de que solo puedes pasar un string en él. Y, um, vamos a comprobar si este string está vacío. Bueno, no podemos simplemente, no podemos hacerlo así, ¿verdad? No podemos decir verdadero o falso. Tenemos que decir que el string extiende algo. Así que en los tipos de TypeScript solo puedes hacer comprobaciones condicionales usando extends. Y eso significa que este string debería extender este string o debería ser asignable a ese string. Así que si F es, si S está vacío, bueno, eso no es bueno. Haremos que sea never y never simplemente significa algo así, es más matizado que eso, pero esto significa algo así como, sí, esto es un tipo de error. Si, si, si algo evalúa a un never, solo puedes asignar never a eso. Así que eso en la práctica, siempre será un error de tipo. Y si no está extendiendo el string vacío, bueno, entonces tenemos not empty. Así que simplemente devolvemos S de nuevo. ¿Cómo usamos esto entonces not empty de? Hello, por ejemplo, bueno, not empty de hello. Eso simplemente devolverá. Hello, porque esto no extenderá el string vacío. Así que simplemente devolveremos. ¿Cuál es la entrada si not empty de string vacío eso será never. Y entonces sabemos en nuestro código, por ejemplo, Oh, uh, si, uh, sí, eso, eso, eso es un string vacío. Así que esta es la forma en que hacemos comprobaciones condicionales, uh, en TypeScript. Simplemente usamos el operador ternario y el extends, uh, sí, cláusula allí.

Construyamos otro tipo para, para reforzar esto. Así que hacemos un contains, por ejemplo, esto es algo que necesitaremos comprobar si las letras están contenidas en, en un string. Así que tenemos un string y una letra, y queremos comprobar si este string extiende algo que contiene esta letra en algún lugar. Y si eso es, simplemente lo escribiré así por ahora, si eso es correcto, entonces, está bien. Lo contiene. Devolveremos uno, por ejemplo, y de lo contrario devolveremos cero solo si eso es, también podemos devolver verdadero o falso. Esos también son tipos en TypeScript, así que puedes tener un tipo verdadero.

Um, sí. Bien. Solo necesitamos averiguar cómo vemos si este S extiende algo que tiene una L en él. Bueno, entonces en TypeScript, tienes lo que se llama, uh, literales de plantilla de tipo. Sí. Literales de plantilla de cadena. Y puedes verificar si algo tiene, por ejemplo, de la forma string number, por ejemplo, puedes verificar si algo es versus string y luego el número en, en, en una cadena, lo cual es bastante, uh, avanzado, lo cual es bastante genial, pero podemos, por ejemplo, simplemente hacer esto también para verificar si algo es una cadena seguida por la letra que ponemos, seguida por otra cadena. Y estas cadenas también pueden ser la cadena vacía. Así que eso significa que esta L, esta letra puede estar contenida en cualquier parte de la cadena, pero TypeScript se queja de que L no es asignable al tipo string number. Así que tenemos que restringirlo aquí, uh, para asegurarnos de que TypeScript sepa que definitivamente pasaremos una cadena y si ves los resultados, por ejemplo, si ves cómo usamos esto, puedes ver contains, um, sí. React. Si eso contiene una A, verificaremos. Sí. Eso contiene una A. ¿Contiene eso una X? No, eso no es. Entonces, lo que realmente está haciendo es verificar si react extiende este patrón. Bueno, ¿lo hace con la X en el medio? No, no lo hace. Porque no se encuentra en ninguna parte. Bien. Así que podemos usar literales de plantilla para verificar la forma de una cadena.

Interesante. Um, ¿qué pasa si queremos tomar el primer elemento de una cadena? ¿Qué pasa si queremos encontrar eso? Bueno, podemos usar los literales de plantilla nuevamente. Podemos ver si S extiende el literal de plantilla de algún primer carácter y luego una cadena. Hmm. Sí. Bueno, si eso es cierto, entonces devuelve el primer carácter y de lo contrario devuelve never. Hay un problema aquí. No pueden encontrar el nombre F. No tenemos este tipo. Si recuerdas anteriormente, entonces pasamos el tipo y luego TypeScript sabe, oh, está bien.

Querías pasar el tipo aquí, pero ahora no lo tenemos. Necesitamos inferir lo que TypeScript ve aquí. Necesitamos inferir el primer carácter y eso es exactamente para lo que sirve la palabra clave infer. Así que TypeScript puede inferir cuál es este primer carácter aquí. Y si sigue esta forma, entonces también sabe cuál es este primer carácter. Así que si hago los resultados primero de React, por ejemplo, entonces verás que el resultado es R porque TypeScript vio que esta cadena extiende este patrón. Es decir, la F sería la R y luego el resto de la cadena es esta parte y luego devolvemos la primera letra. Así que encontraría la R. Genial.

Un buen uso de la palabra clave infer. Veamos qué pasa si usamos esto ahora para implementar esta función index off. Así que podemos mantener el conteo y el bucle. Esto no es realmente, esto no es realmente lo que hemos visto aún. Podemos hacer verificaciones condicionales con cadenas y cosas. Eso es todo fácil. También necesitamos encontrar una manera de recorrer una cadena. Así que para eso, construyamos una función repeat que tome un tipo, cualquier tipo, y lo repita n veces.

Bien. Así que eso hará, por ejemplo, si hacemos repeat React tres veces, dirá una tupla y tipo tupla de React, React, React. Esto es lo que queremos lograr. Bien. ¿Cómo vamos a construir esto? Vamos a tener que ver si el resultado, vamos a tener que construir un resultado. Vamos a tener que construir esta tupla. Comenzamos con una tupla vacía y construiremos, agregaremos React a ella hasta que tengamos tres instancias. Así que para eso, voy a mantener una tupla de resultados y va a extender una tupla de T porque vamos a agregar el tipo que pasamos en ella, extiende, disculpa. Y va a comenzar vacía. ¿Y cuándo nos detenemos? Sigue agregando a esto porque no, sí, tenemos que saber cuántas iteraciones va a tomar el bucle. ¿Cuándo dejamos de agregar? Cuando la tupla de resultados sea tan larga como el conteo. Así que en este caso, tres, así que tres elementos de conteo.

Afortunadamente podemos tomar la longitud de las tuplas. Podemos tomar la longitud de esta tupla de resultados y verificar si extiende N. Así que eso significa que si la tupla tiene tres elementos en este caso, entonces nos detenemos. ¿Y qué significa que nos detenemos? Devolvemos el resultado, por supuesto. Así que hemos construido estos resultados, aún no, pero lo haremos. Y luego, cuando extiende la longitud correcta, lo devolvemos. Si no extiende la longitud correcta, eso significa que no hemos terminado aún. Y eso significa que estamos entrando en recursión.

Así que teníamos el caso base cuando está hecho, devolver, y ahora vamos a hacer repeat de nuevo con el mismo tipo, el mismo N, pero añadiremos al resultado un tipo extra. Así que hacemos la misma operación exacta con los mismos parámetros, excepto que mantenemos un T extra en este resultado. Así que extendemos, tal como hacemos aquí, extendemos el resultado con un valor extra y extendemos aquí también. Y ahora si pasas el ratón sobre resolve, puedes ver React, React, React, lo cual es muy agradable. También puedes hacer cinco y entonces lo hará cinco veces. Creo que puedes llegar hasta 999 y lo hará. Pero si llegas a 1000, TypeScript se quejará porque sí, es posiblemente infinito. No, no lo es, pero lo limitan debido a los límites de recursión en el sistema de tipos. Bastante loco.

Así que ahora tenemos un bucle. Podemos mantener el conteo en el bucle porque seguimos construyendo este array de resultados y siempre podemos obtener la longitud de él. Así que el índice es solo la longitud del array en ese punto, o podemos seguir contando este bucle. Tenemos verificaciones condicionales, mantenemos un array de resultados, añadimos a él. Creo que estamos listos para mostrarte cómo el ejemplo de Wordle está realmente funcionando. Sí. Recorrer una cadena, por cierto, es realmente lo que también hicimos en el, en el, en el caso con las palabras clave infer, porque si siempre tomas el primer carácter y con infer, así que si haces algo como esto, uh, tipo X es, sí, X de S por ejemplo, es verificar si este S extiende primero y luego el resto de la cadena. Y luego si has terminado, simplemente devuelves los resultados.

Pero si no has terminado y haces algo recursivamente con el resto de la cadena. Y así seguirías cortando la primera parte de la cadena y seguirías recursando con el resto y eventualmente habrás terminado y habrás recorrido una cadena. Y eso es exactamente lo que sucede en el ejemplo de Wordle aquí.

Desplazo hacia arriba. Esta es, así que esta es la parte que no viste al principio. Tenemos un índice de tipo y toma una cadena, un carácter para buscar en la cadena. Y también mantiene un array de resultados. Y por ahora solo mantuve un resultado, sí, no un array, en realidad una tupla. Solo usé ceros porque es un carácter y es, es fácil de contar y verificas si este S extiende primero y el resto.

Así que eso significa que solo cortas la primera parte. Y luego verificas si estos dos son iguales entre sí. Uh, podrías simplemente hacer, uh, first extiende rest para verificar si las cadenas son algo iguales, pero para protección extra y contra la entrada del, del, del usuario, también puedes, sí, ponerlas ambas en mayúsculas primero para hacerlo, uh, para hacerlo insensible a mayúsculas. Este tipo Uppercase está, por cierto, en la biblioteca base de TypeScript. Así que puedes usarlo cuando quieras y en cada proyecto tendrás que escribirlo tú mismo.

Si estos dos caracteres son iguales entre sí, tomamos la longitud del array de resultados porque es ahí donde mantenemos nuestro índice. Así que esto significa que hemos encontrado un carácter en las palabras. Así que devuelves el índice, donde lo encontraste. Si aún no lo encontraste, entonces sigues buscando a través del resto que tienes aquí.

Así que sigues cortando la primera cosa. El primero no coincide con la letra. Bien. Cortaremos la siguiente parte. Bien. Eso no coincide con la letra. Sigues buscando a través del resto. Si todo lo demás falla y esto ya no se evalúa, has, has llegado al final de la cadena. No hay más primero para cortar. Entonces devuelves negativo uno porque eso significa que no has encontrado nada. Y eso significa que devuelves negativo uno. Eso es lo que hace la función index off.

Así que si quieres ver aquí, index off, entonces si haces index off React a, entonces encontrarás que es dos porque a está en el segundo lugar de este tipo de cadena. Simplemente hará esto. Tomará la R y verificará si la R y la A son iguales. No lo son. Así que continuarán con el resto, que será E-act. Y también añadimos un elemento extra al array de resultados. Eso dice que ahora estamos en el índice uno.

Así que verificará la E y así sucesivamente. Y luego eventualmente verificará la A. Ya habremos añadido tres cosas al array de resultados. Y eso significa que encontraremos la, eh, perdón, dos cosas. Encontraremos la A en los siguientes dos. Así que eso es, eso es más o menos cómo funciona. Y esto es lo más complicado que necesitas saber para construir este tipo de palabra porque ahora solo está verificando cuál es el índice. ¿Es el índice igual a la longitud del array de resultados? Así que eso significa, ¿está en el lugar correcto? Sí. Bueno, entonces es verde. Justo como hicimos aquí. Esta es solo, esta parte es la última pieza del rompecabezas.

Así que aquí verificamos si no encontramos la letra en la palabra, entonces significa que es un punto blanco y todo lo demás es el punto amarillo. De esta manera podemos hacer un tipo de TypeScript extremadamente complicado solo usando un pensamiento muy extraño, lógico y solo conociendo los límites del sistema TypeScript y usándolos. Y si piensas, bueno, ¿por qué estamos haciendo esto? Sí. Eh, solo porque es increíblemente genial. Sabes, es simplemente genial. Um, estos tipos, rara vez los escribirás tú mismo, pero si estás escribiendo cualquier código de biblioteca que otras personas tengan que usar, puedes escribir seguro. Estos, estos, estos tipos, este tipo de repetición para hacer tuplas, y estos tipos serán realmente útiles para, para tus desarrolladores para los que estás escribiendo esta biblioteca.

Así que espero que hayas aprendido algo nuevo. No tuve suficiente tiempo para mostrarte todo lo que quería, pero espero que lo hayas disfrutado. Espero que disfrutes el resto de la conferencia. Y si hay alguna pregunta, siéntete libre de hacerla a mí, eh, en el chat más tarde, o, eh, envíame un correo electrónico. Encontrarás todos mis datos de contacto, en mi sitio web. Muchas gracias. Y nos vemos más tarde.