TypeScript Gymnastics: ¿Por Qué Son Tan Poderosos para Ti?

Hola y bienvenidos a esta charla donde hablo sobre TypeScript y algunas características avanzadas de él. Primero que nada, quién soy. Soy Luca Del Pupo, Ingeniero de Software estonio en Pneumformal de JavaScript y TypeScript. Y en mi tiempo libre intento llevar mi canal de YouTube, pero estoy fallando en ese período porque del tiempo. Y también escribo publicaciones tecnológicas para personas de tecnología. En mi tiempo libre, también corro, amo correr, hacer senderismo, y amo a los animales. Por cierto, comencemos desde aquí.

Probablemente la mayoría de ustedes ya se han encontrado con algo como esto, una definición de archivo de TypeScript con miles y miles de filas y muy difícil de entender. Así que hoy intentaré ayudarles a entender qué sucede dentro de este archivo y cómo pueden crear su función de TypeScript para mejorar la adherencia de su base de código y hacer su código TypeScript más estricto. Así que en este punto, saltemos al código. Comencemos desde aquí. Cuando trabajas con TypeScript y JavaScript, tienes que entender dónde JavaScript y cuándo comienza TypeScript.

Por ejemplo, en este ejemplo, tenemos una mezcla de, por ejemplo, tenemos un tipo welcome y una const welcome, ambos con el mismo nombre. Como pueden ver aquí, types es un tipo específico welcome con el valor welcome to everybody. Y const es una variable de JavaScript en este caso, con un valor de cadena welcome to everybody. Esta parte es solo TypeScript. Esta parte es una mezcla de JavaScript y TypeScript. Este código es código real de JavaScript y este código se ejecutará después en su navegador o dentro de, no sé, su servidor node o algo. Y esta parte, la segunda parte de esta línea es solo código TypeScript.

Esto nos ayuda a hacer welcome to everybody const y verificamos si esta cadena cumple con el welcome type. Si entiendes cuándo comienza JavaScript y TypeScript, entonces puedes comenzar a trabajar con TypeScript avanzado. Hoy, te muestro solo código de TypeScript que básicamente desaparece después de la fase de construcción, pero te ayuda a aumentar la experiencia del desarrollador o aumentar la adherencia de tu aplicación. Comencemos desde aquí.

Cuando trabajas con TypeScript, es importante ser estricto al modelar tus tipos. Por ejemplo, en este caso, si tienes un state, state puede ser una cadena. Una cadena es demasiado abierta como valor para lo que queremos describir. Por ejemplo, en este caso, state puede ser starting, running, arriving, o retiring. Y usando TypeScript, podemos hacerlo usando tipos específicos, un tipo literal llamado starting. Entonces, en este caso, starting no es una cadena real, sino un tipo starting que le dice a TypeScript, la cadena debe ser una cadena starting, una cadena con un valor específico starting, o un valor específico running, o un valor específico arriving, o un valor específico retiring. Y usando la barra vertical, podemos crear una especie de orden.

Entonces, en este caso, puede ser uno de estos, pero solo una vez en un tiempo específico. Y luego podemos verificar si state, state en este caso es igual a starting, es tanto una cadena real como también una cadena que en este caso coincide con la cadena state, con el tipo state. Luego usando, podemos usar las barras verticales, por lo que el tipo de unión también con otro tipo de tipo. Por ejemplo, el true, el false, podemos crear otro tipo y podemos mezclar true, false, y cero o uno de tipo cadena y bla, bla, bla. Podemos usar un tipo de unión también con el tipo, con tipo de objeto.

Y como puedes ver aquí, status, status es igual a cero y coincide con el status. Si entiendes cómo funcionan los tipos literales, puedes pasar al tipo literal de plantilla. En algunos casos, queremos crear tipos a partir de otros tipos, en este caso a partir del tipo literal de cadena. Y, por ejemplo, lo que queremos hacer es crear una especie de combinación entre runner y state. Así que runner puede ser Kevin, John o Dough. Y state puede ser starting, running, arrived y retired. Queremos crear un running status que básicamente coincida con el nombre del corredor, es, y el estado del corredor.

En este caso, usando la sintaxis de plantilla, así que la comilla invertida, y luego usando la sintaxis de plantilla común que probablemente uses en JavaScript, puedes básicamente mezclar los tipos y crear el runner status. En este caso, como puedes ver, runner status es una combinación de todos los posibles runner con todos los posibles state, usando el es. Y si, por ejemplo, eliminas el state, TypeScript elimina esta computación por nosotros automáticamente. Y esto significa que si alguien agrega un nuevo state, tendremos gratis el nuevo status ya mapeado dentro del runner state.

Y como puedes ver aquí, podemos crear una cadena que debe coincidir con los tipos específicos. En este caso, arrived es sin e al final. Y como puedes ver, TypeScript es capaz de entender que Kevin is arrived sin e, no es asignable a un runner state. Luego podemos usar la sintaxis de plantilla también para crear otro tipo de tipo. Y, por ejemplo, podemos, por ejemplo, crear otra sintaxis. Por ejemplo, en este caso, usando RGB, podemos decir, está bien, la primera parte aquí debe ser un número. Luego hay una coma, otro número, y otra coma. De esta manera, podemos describir el patrón RGB de una columna.

Y como puedes ver aquí, podemos usar RGB, y en este caso, 230, cero, y blah, blah, blah. Pero si establezco a como segundo valor para la parte verde, como puedes ver, TypeScript es capaz de entender que a no puede ser asignable a un número. Esto significa que tu cosa no puede ser asignable a un tipo de color RGB. {{^}}Y como puedes imaginar, usando esta sintaxis de plantilla, podemos crear muchos, muchos tipos que nos ayudan a ser más estrictos con nuestro sistema de tipos y a modelar de la mejor manera la forma de nuestro objeto y nuestros tipos.

Así que cuando entiendes esto, es momento de entender cómo podemos manejar if y else usando el sistema de tipos. Desafortunadamente, el sistema de tipos no tiene una declaración if real, pero usa una especie de coincidencia de patrones. ¿Qué significa esto? Echa un vistazo a este tipo de condición if. Este es un tipo de condición, excepto tres tipos genéricos. El primero es una condición, el segundo es el valor verdadero si se cumple la condición, y el tercero es el else si la condición no se cumple. ¿Qué significa esto?

La primera parte es una condición que puede ser verdadera o falsa. Y aquí, lo que estamos haciendo es si C extiende true, devuelve los genéricos T, de lo contrario, devuelve else. ¿Cómo podemos usarlo? Como puedes ver aquí, si paso true y yes o no, el if devolverá yes. Si paso false, yes o no, el if devolverá no. Esto significa que usando el extend, podemos crear una especie de if, y si el extend se ha cumplido, podemos hacer algo. De lo contrario, podemos hacer otra cosa.

Lo que hace esta condición es que esta condición de tipo de retorno acepta un genérico T, y este T es un genérico, y queremos verificar si T es una especie de función, y si esto es una función, por favor infiere el tipo de retorno de la función dentro de R. Si T básicamente es una función, al final, devolveremos el tipo de retorno de esta función. De lo contrario, devolveremos lo que es never. Never es nada. Esto significa que es algo que no tiene nada dentro. En este caso, la condición de retorno, si paso una función que devuelve un string, devuelve un string. Si paso una función que devuelve un Boolean, devuelve un Boolean. Si paso un Boolean, por ejemplo, devuelve un never. Y la condición de tipo de retorno ya está incorporada en TypeScript. Se llama return type, y ya puedes usarla para extraer el tipo de retorno de una función. Y esto significa que puedes extraer el tipo de la función, y no tienes que recrear nuevamente el tipo. Significa que tienes este tipo de una biblioteca externa. No quieres recrear los tipos, pero quieres depender de ese tipo. Usando el return type, puedes extraerlo de esta función, y crear, y luego usar este tipo para tu negocio. Lo mismo podemos hacer para los parámetros.

Así que en este caso, en lugar de usar el infer dentro del retorno, podemos usarlo dentro del parámetro. Los args son un array, así que P al final será un array con todos los parámetros dentro de él. En este caso, el primero es sin parámetros, así que hay un array vacío. En este caso, hay solo un parámetro con número, y tenemos un array con solo un elemento, número. Y también para la condición de parámetro, ya tenemos un parámetro incorporado dentro de TypeScript, y la función se llama parameter. Puedes usar el extend también para extraer datos de un tipo literal específico. Por ejemplo, en este caso, como puedes ver, tenemos un tipo RGB. Y queremos verificar si T es un tipo RGB, y queremos extraer el rojo, el verde, y el azul. Usando T, podemos hacer extend, podemos usar el acento grave RGB, luego queremos inferir R, y si queremos que R sea un número, lo mismo queremos hacer con G, y queremos que G sea un número, y B blah, blah, blah. Al final, queremos devolver RGB si T extiende el número RGB. De lo contrario, devolveremos never. Como puedes ver aquí, podemos extraer 255 para RGB aquí. Podemos extraer el rojo, verde, y azul también aquí. Es importante prestar atención a este espacio, porque si elimino el espacio de aquí, como puedes ver, esto no cumple con el requisito, porque este no cumple con el patrón dentro del extend. Como puedes ver, también tienes que prestar atención a estas cosas más pequeñas, porque a veces estas pueden crear un resultado incorrecto.

Bien, ahora es momento de pasar al bucle. Bien, entendimos cómo podemos crear if, y else. Ahora, es momento de entender cómo podemos iterar tipos para extraer datos. En cada uno, tienes un tipo, un tipo de usuario que es un array que contiene para cada elemento del array la definición de columna. En este caso, nombre, primer nombre, y valor, nombre, apellido, el valor es string, y nombre, rol puede ser manager o empleado. Queremos crear una especie de get column que pueda ser usado de esta manera. Queremos pasar una tabla de usuario y el nombre del valor, y devolver la definición de esa columna si existe. ¿Cómo podemos hacer eso? Usando el bucle. Desafortunadamente, en TypeScript, no podemos iterar, pero podemos usar recursión. Entonces, ¿cómo podemos hacer eso? Usando lista. Podemos verificar si lista extiende un array, y queremos tomar el primer elemento del array, y básicamente esparcir el resto del array dentro del resto. Primero, ahora tenemos que verificar si primero extiende una columna con nuestro nombre específico. Si es así, podemos devolver primero, de lo contrario, queremos iterar la lista, el resto de la lista.

¿Cómo podemos hacer eso? Podemos llamar de nuevo, get column. Pero esta vez, no pasamos una lista, sino que pasamos el resto de la columna que no hemos verificado aún con el mismo nombre. Esto, como puedes imaginar, es una especie de recursión que, en algún punto, esta lista, si no tienes ninguna columna con ese nombre, devolverás never. De lo contrario, en algún punto, devolverás el primero, y este es el resultado. Básicamente, también puedes crear otro tipo de bucle, más simple. Por ejemplo, en este caso, podemos usar append. Tienes una tupla y el elemento usando el spread. Básicamente, puedes crear otro tipo con la primera parte del array y el nuevo elemento. En este caso, tenemos uno, dos, tres, y cuatro, y el resultado es uno, dos, tres, cuatro. Si tienes un array vacío, puedes pasar cuatro. Si tienes muchos, puedes tener muchos y muchos, y blah, blah. También puedes mezclar. Puedes crear, encontrar, filtrar, lo que quieras. Esto es solo una cuestión de lo que necesitas hacer, y puedes crear tu propio tipo condicional de TypeScript para crear otros tipos.

Otra parte importante, cuando trabajamos con TypeScript, queremos trabajar con tipos de objetos, y queremos manipularlos. Lo que queremos hacer es eliminar un campo, añadir un campo, o eliminar la condición opcional, o hacer todo opcional, o añadir solo lectura, y blah, blah. Para hacer eso, debemos conocer solo dos cosas importantes en TypeScript, la clave de una palabra clave y el tipo de mapeador.

La palabra clave key of es específica que nos permite obtener todas las props de un tipo específico. En este caso, si llamo key of person, recibiré todas las props de primer nivel de la interfaz person. En este caso, name, así que name, age, gender, address, email, phone, y policy accepted.

Luego tenemos el tipo de mapeador. El tipo de mapeador es la forma de manipular los tipos de objeto dentro de TypeScript. La sintaxis es bastante simple. Es como la sintaxis de objeto, y tenemos que definir la key del objeto y el tipo de esa key.

Usando key in, estamos diciendo, bien, para cada k dentro de esta lista de key, en este caso, todas las key de person, básicamente, estás creando un nuevo objeto. De esta manera, básicamente recreo el mismo tipo person usando el tipo de mapeador.

Lo que quiero hacer es básicamente usar el key of, así que quiero iterar sobre todas las claves de person, y usando el person bracket key, puedo usar el square bracket key, puedo obtener el tipo de esta clave específica. El resultado es este nuevo person que básicamente es la misma interfaz recreada usando el tipo de mapeador. Si entiendes cómo funcionan los tipos de mapeador, también puedes manipular los datos.

Por ejemplo, quieres hacer todo opcional. En este caso, queremos crear un partial person. Usando la misma sintaxis, puedes añadir el signo de interrogación, en este caso, y esto significa que para el partial person, tenemos todos los signos de interrogación dentro de las propiedades. Esto funciona solo en el primer nivel. Si quieres hacerlo también en profundidad dentro de cada elemento, tienes que crear otro tipo aquí.

Si el tipo de clave de person es un objeto, tienes que iterar dentro de los tipos y crear esto también dentro del objeto anidado. Luego, el partial utility ya está incorporado en TypeScript, así que puedes usar partial person aquí. Puedes usar required y lo mismo aquí. El required elimina el signo de interrogación, así que solo necesitarás añadir el guion antes del signo de interrogación, y el resultado es básicamente que tienes todo requerido, y required aquí está, como puedes ver, ya implementado.

O puedes crear el tipo de utilidad read-only. Básicamente, quieres añadir la palabra clave read-only para cada propiedad en este caso, y también read-only ya está incorporado si lo deseas. Y también puedes usar extract. Extract te permite extraer un tipo de un tipo específico. Por ejemplo, en este caso, tienes el tipo extract name, o surname o age, y quieres extraer name y surname. Usando el tipo extract, tienes name y surname.

Extract ya está incorporado en TypeScript, o puedes usar exclude que es lo opuesto a extract, o, por ejemplo, quieres usar pick u omit. Pick es básicamente una forma de, a partir de un tipo, seleccionar solo propiedades específicas, como de esta manera, y pick ya está implementado. También, en TypeScript, omit es lo opuesto. Si quieres eliminar propiedades de un tipo específico, básicamente tienes que usar pick y excluir todas las propiedades que quieres excluir. Bastante simple.

Usando todo este tipo de utilidades, puedes crear y manipular tus tipos y crear tipos que dependen de otros tipos. Al final, lo que sucede es que puedes tener algo como esto. Puedes crear una especie de función get key que acepta una clave de objeto y una clave key que esta clave es una propiedad que coincide con el nombre de propiedad específico que existe dentro de T. Esta utilidad get all key es un poco enigmática, pero puedes revisarla en el repositorio sin ningún problema. Que básicamente usa todas estas cosas que hemos visto antes para construir una especie de tipo literal de unión con todas las posibles propiedades dentro de ese tipo.