¡Vaya! ¿Puede TypeScript hacer eso?

Hola a todos, la charla de hoy trata sobre los Conceptos Avanzados de TypeScript. Algunos conceptos menos conocidos de TypeScript que pueden aprender y luego utilizar en sus proyectos diarios, lo que puede mejorar drásticamente su experiencia como desarrollador y el uso de TypeScript en sí mismo, así que continuemos.

Antes de comenzar, una breve introducción sobre mí, soy Nikhil, soy un Desarrollador Front-end Senior en Syncradi. Es una plataforma de automatización de datos y hacemos muchas cosas con TypeScript allí. También hablo mucho en conferencias y meetups, también escribo publicaciones de blog y artículos técnicos sobre todo lo relacionado con JavaScript, TypeScript y React. Así que sí, esa es un poco de introducción sobre mí, y vamos a sumergirnos en la charla.

El primer concepto son los typeguards. Veamos qué es. Supongamos que tiene una función que recibe cualquier tipo de argumento, y si es de cierto tipo, realizamos alguna operación con él. Por ejemplo, aquí estoy comprobando si es una cadena, y si es una cadena, estoy utilizando algunas propiedades de cadena y accediendo a ellas. De lo contrario, si no es una cadena, lo hacemos de manera diferente. En este ejemplo, tengo una función de cadena que verifica el tipo de la variable y devuelve si es un booleano, es verdadero o falso. Con esto, si lo tienes así, entonces TypeScript no sabrá si la variable es realmente una cadena. Tenemos esta comprobación, devuelve verdadero o falso, pero no hay forma de que TypeScript sepa si la variable es una cadena o no. Solo sabe que es verdadero o falso y viene aquí y no conoce el tipo de la variable, ¿verdad? Para eso, lo que puedes hacer es hacer algún tipo de comprobación de tipo aquí, puedes usar la palabra clave 'is' en TypeScript, y declarar explícitamente que la variable es una cadena como tipo de retorno aquí. Entonces, ¿qué sucede ahora es que una vez que esta comprobación pasa, una vez que devuelve verdadero, entonces TypeScript seguramente sabe que esta variable es de tipo cadena y puede usar todos los métodos de cadena que tiene. Esa es la belleza de este typeguard. Veamos un ejemplo real en el código. Esto es antes de agregar el typeguard. Ahora, si ves, esto devuelve un booleano, esto devuelve un booleano. Y una vez que llegas aquí, ahora la variable es any y incluso después de que devuelve verdadero, la variable es any. Entonces no obtienes todas las comprobaciones de tipo en tiempo de compilación. Ahora, después de agregar el typeguard, ahora aquí la variable es any, pero una vez que esta comprobación pasa y llega aquí, ahora la variable es una cadena. Lo que significa que le estamos diciendo a TypeScript que es una cadena y puede usar todos los métodos de cadena que tiene y será fácil para nosotros realizar todas las operaciones de cadena dentro de esta condición verdadera.

Ahora veamos las aserciones, esta es la forma de decirle al compilador que este escenario no volverá a ocurrir. Lo estamos afirmando para que no vuelva a ocurrir. En esta función estoy probando si la variable es una cadena o no. Si no es una cadena, lanzamos un error. Entonces, si es una cadena, no habrá errores. Llamamos a esta función aquí con la variable pasándola como argumento y si no es una cadena, entonces no habrá ningún error.

Entonces, este console log ocurrirá, básicamente después de que se haya ejecutado esta función, la variable será una cadena y estamos afirmando que es una cadena. Entonces, lo que sucede ahora es que este tipo de retorno es un assert y una vez que pasamos esta llamada de función, sabemos que la variable es una cadena y luego obtenemos la variable como cadena y podemos usar todas las propiedades de cadena. Esto es más poderoso si no desea hacer una condición, una condición booleana y desea lanzar un error en su función de ejemplo cuando no es una cadena, desea lanzar un error. Entonces, una vez que no se lanza el error, sabemos con certeza que es una cadena y podemos usar todas las propiedades de cadena. Así que eso es con un type guard.

Ahora veamos los genéricos en TypeScript. Este es el concepto fundamental de TypeScript que debes aprender para crear todo tipo de tipos reutilizables y también, si estás utilizando React, hacer que tus componentes de React sean más reutilizables y genéricos. Y si estás utilizando JavaScript normal, puedes utilizar todo tipo de tipos de utilidad, puedes crear todo tipo de tipos de utilidad con el concepto fundamental de los genéricos.

Pero antes de entrar en eso, quiero mostrarte algunos ejemplos antes de comenzar con los genéricos. Veamos algunas palabras clave en TypeScript. Supongamos que este es un objeto persona con nombre, edad, correo electrónico y estudiante booleano. Y una vez que asignas la persona, estos serían los valores que puedes asignar a una variable. Y keyof es una palabra clave de TypeScript que devuelve todas las claves de un objeto. Aquí todas las claves son nombre, edad, correo electrónico y estudiante. Por lo tanto, devolverá la unión de todas las claves. Una vez que asignas esa clave a una variable, todo lo que puedes ver es que todas las claves del objeto persona se pueden asignar a esta variable. Esto es más poderoso. Lo utilizarás en todos los ejemplos siguientes.

Básicamente, devolverá todas las uniones. Devolverá edad, nombre, correo electrónico y estudiante, y puedes asignar valores a ello. Esto es similar a cómo accedes a un objeto normal. Definir el objeto y llamar a la clave del objeto dentro de él devolverá el valor. En este caso, como es un tipo, no devolverá el valor, sino el tipo de la clave. Por lo tanto, esta clave de objeto. El tipo de nombre es cadena. Esto devolverá cadena. También puede aceptar una unión de claves. Aquí estoy dando nombre, que también es una clave, y edad también es una clave. Con estas dos, devolverá tanto cadena como número, porque el tipo de nombre es cadena, y el tipo de edad es número. Por lo tanto, devolverá la unión de estos dos. Básicamente, ahora con esto, podemos analizar la clave de persona también. La clave de persona es básicamente la unión de todas las claves. Ahora podemos analizar eso y devolver todos los tipos que forman parte de ese objeto en particular. Este objeto tiene claves con cadena, número y booleano. Eso es lo que devolverá.

Estos tres son conceptos fundamentales para comprender los genéricos y los otros tipos que se presentarán. Uno de ellos es keyof, que devuelve la unión de las claves, y keyof del objeto dentro de estos Corchetes Cuadrados devolverá todos los tipos de las claves. Esto es para objetos. Ahora esto también es útil para arrays. Supongamos que este es un array de cadenas, por lo que si no tienes esta constante, esto será simplemente un array de cadenas. Pero supongamos que los roles son, solo tenemos estos tres roles, roles 0, 1 y 2. Ahora, si haces una constante, esto será de solo lectura, por lo que no será modificable. Nuevamente, puedes usar esta firma de índice para obtener los valores individuales. Básicamente, todos estos son literales. Los roles 0, 1 y 2 son literales. Por lo tanto, utilizando esto, puedes obtener los literales individuales y guardarlos en un tipo. Dado que es una variable de JavaScript, queremos usar la palabra clave type para convertir esta variable de JavaScript en un tipo. Eso es lo que hace esto. Y estamos usando la firma de índice numérico para obtener todos los valores y guardarlos como una unión de tipos. Por lo tanto, esto también es útil en la próxima lección. Estos son los conceptos principales que quiero mostrarte antes de adentrarnos en los Genéricos.

De acuerdo. Ahora veamos un ejemplo sencillo de cómo usar una máquina de estados. Una máquina de estados es algo que tiene un montón de estados y también un estado inicial para comenzar con. Entonces, si quieres escribir el tipo de esta función, principalmente lo que harás es declarar un tipo o una interfaz y definir los estados.

Básicamente, toma un objeto de estado y también uno inicial como objeto. Entonces, esto será un objeto con estados y básicamente es un objeto Javascript. Por lo tanto, es un tipo de objeto y es un inicial. Eso es una cadena. Por lo tanto, lo escribiremos de esta manera.

Esto funciona bien, pero incluso podemos restringirlo más para que cuando estemos usando el estado sea más fácil para nosotros implementarlo y usarlo. Lo que quiero decir con eso es que, dado que el estado es, donde las propiedades son A y B, el estado inicial solo puede ser A y B. No puede ser C, no puede ser D, ¿verdad? Porque el estado inicial es uno de los estados que se están definiendo.

Entonces, lo que puedes hacer es usar la propiedad keyof que acabamos de mencionar y usar genéricos de esta manera. Entonces definimos, ya teníamos una configuración, estamos definiendo el genérico de esta manera. Esto puede ser cualquier tipo y cualquier tipo. Entonces, lo que sea que pases, se pasa al estado y el valor inicial sería keyof estado. Básicamente, todas las propiedades son las claves del estado que pueden ser el valor inicial. Y así es como pasas una función. Entonces defines el genérico en los corchetes angular aquí. Y una vez que lo defines, puedes pasarlo al tipo de configuración. Entonces, una vez que lo tienes, ahora los únicos valores posibles son A y B. Veamos cómo funciona.

De acuerdo. Entonces, dado que tengo un genérico escrito aquí, si solo pongo las comillas dobles, los únicos posibles valores son A y B. Si doy C, se lanzará un error que dice que C no es parte de A y B. Eso es debido a la palabra clave que usamos. Si lo tenemos como string, ahora cualquier cosa es posible. Puedes simplemente darle C, luego obtendrás un error de tipo en tiempo de ejecución, porque C no es parte de los estados disponibles. Con esta restricción, podemos asegurarnos de obtener los errores en tiempo de compilación y resolverlos antes de pasar a producción. Así es como se pueden usar los genéricos para restringir más tipos y hacer que los errores sean fácilmente identificables.

Entonces, ese es un ejemplo de genéricos. Veamos otro ejemplo con un componente React. Este es un componente de lista simple que tenemos. La lista recibe una propiedad de elementos y los recorre para renderizar el ID y el nombre. Si quieres escribir el tipo, esto es lo que normalmente haces. Simplemente enumeras un tipo de propiedad y la firma de los elementos aquí, ID y nombre, y es un array. Lo tenemos como un array. Pero, ¿qué pasa si queremos hacer este componente de lista más genérico? Digamos que queremos hacer que el color de este componente defina el tipo del elemento en sí y cómo se debe representar el elemento. ¿Cómo lo hacemos? Así es como lo hacemos. Ahora, las propiedades de esta lista reciben otro genérico, y toma elementos y sería un array de elementos. Pero también definimos cómo se representarán los elementos según el color en sí. Definimos otra propiedad, renderItem, que básicamente es una función que toma un elemento y devuelve un elemento de JavaScript, básicamente la parte de representación. Y así es como lo defines en la lista.

Similar a las funciones, definimos el genérico entre corchetes angulares y pasamos el elemento a él. Ahora solo estamos iterando y representando el elemento aquí. Pero la lógica de representación y la definición de elementos serán parte del componente que llama. Donde se llama al componente. Aquí lo estamos llamando en el componente de formulario. Si ves aquí, estamos definiendo la firma de los elementos y esta firma se inferirá en renderItem. Cualquier firma que pases en el primer array de elementos, esa firma se mantendrá en renderItem porque tenemos el mismo tipo de elemento en el argumento de items y renderItem. Si ves el ejemplo aquí, aquí tengo ID, nombre y edad. Los elementos serían del tipo ID, nombre y edad. Si le doy a este estudiante verdadero, ahora esto también se agregará aquí. Ahora el control se le da al componente que llama. Ya no está en la declaración cuando se crea el componente. Ahora el control se le da al componente que llama. Ahora el llamador puede decidir cómo quiere representar y qué elementos desea. Puede ser un elemento de estudiantes, puede ser un elemento de listas de compras y todas esas cosas, cualquier tipo de elementos.

Ahora el componente de lista es más genérico gracias a los tipos genéricos. De acuerdo. Ahora veamos algunos tipos de utilidad.

Entonces, estos son todos, ahora, anteriormente vimos componentes genéricos y funciones genéricas. Ahora los tipos también pueden ser genéricos y básicamente se pueden usar para crear otros, transformar algún tipo particular a otro tipo y devolver ese tipo. Básicamente, transformación de tipos. Eso es lo que son los tipos de utilidad.

Entonces, hay un montón de tipos de utilidad incorporados disponibles en TypeScript. Veámoslos uno por uno. Digamos que tenemos un objeto de tarea pendiente con título, descripción y completador. Y queremos definir otro tipo, otro tipo de vista previa de tarea pendiente que solo tenga título y completador. No tiene que tener la descripción porque solo estamos previsualizando la tarea pendiente, digamos.

Para eso, TypeScript proporciona un tipo de utilidad llamado pick, que básicamente toma el tipo base, que es tarea pendiente aquí y pasa diferentes claves. Aquí, las claves son título, descripción y completador. Así que estoy pasando título y completador. Estamos seleccionando estas dos claves de este tipo y luego ejecutándolo aquí. Ahora esta vista previa solo tendrá título y completador. No tendrá descripción. Esta es una utilidad poderosa que podemos usar. Esto es similar a, tenemos un, de manera similar, tenemos el tipo de utilidad omitir. Esto es justo lo contrario de pick. Simplemente omite la clave que pases. Pero aquí, voy a omitir la descripción. Así que ahora será título y completador. Estas dos son dos utilidades poderosas que se usan con bastante frecuencia. Y también hay otra utilidad que se usa con bastante frecuencia, que es partial. Aquí, todas las propiedades son requeridas, título, descripción y todo es requerido aquí. Entonces, ¿qué pasa si quiero hacer un partial básicamente, hacer que todas las claves sean opcionales. Usa partial. Una vez que pases la tarea pendiente, aquí verás que todas las propiedades se han marcado como opcionales.

Entonces, este to-do opcional se puede usar en lugar de actualizar, así que si quieres actualizar un elemento de to-do en particular, solo el campo de título o solo el campo de completado y el resto de los otros campos son opcionales, puedes usar esto en la función.

Entonces, eso es todo sobre el parcial. Ahora hagámoslo de solo lectura. Ahora este tipo de to-do se puede modificar. Entonces, si lo asignas a una variable, se puede modificar, puedes modificar el título, la descripción y el competidor. Pero si quieres que sea de solo lectura e inmutable, entonces puedes usar read-only. Ahora esto marcará todas las propiedades como de solo lectura y solo se pueden asignar una vez y no se pueden modificar. Eso es de solo lectura.

Y ahora veamos un par de cosas, parámetros y tipos de retorno. Entonces digamos que esta es una función, ¿verdad? Entonces estoy obteniendo un tipo de la función y almacenándolo aquí utilizando la palabra clave type of. Ahora quiero obtener el tipo de los argumentos que se pasan a esta función. Entonces, utilizando este tipo de utilidad parameters, puedes obtener eso. Así que devolverá una tupla de tipos de argumentos. Así que aquí tenemos to-do y es del tipo to-do y tenemos los campos actualizados de to-do esto de partial to-do. Y de la misma manera también podemos obtener el tipo de retorno utilizando el tipo de utilidad return type. Ahora vamos a devolver, así que aquí estamos devolviendo el propio to-do exacto. Así que estamos obteniendo título, descripción y competidor. Esto es más poderoso. Estas utilidades son más poderosas. En los ejemplos próximos te mostraré cómo puedes crear tu propio tipo de utilidad utilizando estos dos conceptos. Antes de eso, tipos de utilidad personalizados. Antes de eso queremos ver, queremos aprender dos conceptos. Uno es el tipo de mapa y los tipos condicionales. Así que primero veamos los tipos de mapa. Ok, esto básicamente es una sintaxis para los tipos de mapa. Entonces, lo que hace es, usamos la misma palabra clave key of para obtener todas las claves de un tipo de objeto en particular y esto es como un iterador. Así que si ves un bucle for, ¿verdad? Entonces tomará todas las claves individualmente y las recorrerá y luego devolverá algo más. Así que eso es lo que esto, puedes pensar en ello como la misma analogía. Entonces esto, es como un iterador. Entonces, todas las claves individuales del objeto se almacenarán en key, almacenadas en K y puedes usar esta K en cualquier lugar de la parte derecha de los dos puntos.

Quiero decir, todos serán no solo lectura. Esto es para los tipos de mapa.

Ahora vamos a los tipos condicionales. Así que tipos condicionales. Bien. Estos tipos condicionales son básicamente similares a un operador ternario. Esto es no vacío. Veamos un ejemplo aquí. Si pasamos esto, básicamente es una utilidad que queremos crear utilizando tipos condicionales. Lo que debería hacer es que si pasamos una unión de múltiples tipos, devolverá los tipos no vacíos. Los tipos no vacíos son los tipos no definidos y nulos. Entonces, si es una cadena, booleano o número, se devolverá; de lo contrario, no se devolverá. Ahora, si el resultado es una cadena, si solo tengo booleano, el resultado sería una cadena y un booleano. Básicamente, tipos no vacíos.

Para eso, usamos la palabra clave extends y usamos el signo de interrogación y dos puntos, la sintaxis del operador ternario. Lo que hace es que cualquier unión que pasemos, eso estaría en T, y estamos verificando si T se extiende de null o undefined. Básicamente, lo que significa es que verá si el tipo que pasamos es nulo o indefinido. Si es nulo o indefinido, entonces devolverá never; de lo contrario, si no es nulo, si no es nulo, entonces devolverá lo que pasamos. Cadena, booleano o número. Veamos cómo funciona. Este tipo de unión que tenemos, se expandiría algo así. Individualmente se llamará. Es igual a booleano por ahora. Y después de esto, la cadena se pasará aquí. Entonces T sería cadena. Esto se extendería básicamente. En lugar de T, tenemos cadena, se extiende de null o undefined, nunca. En lugar de T, tenemos cadena. Lo mismo ocurre con indefinido, lo mismo ocurre con nulo. Ahora se realizará esta verificación. Cadena se extiende de null o undefined, no, no se extiende, así que devolverá cadena aquí.

Ahora aquí, undefined se extiende de null o undefined, sí. Undefined se extiende de null o undefined, entonces devolverá never. Y lo mismo, null se extiende de null o undefined, sí, se extiende, por lo que devolverá never. Entonces, lo genial de TypeScript es que la palabra clave never es ignorada por TypeScript si es una unión. Así que esto es una unión. Ahora, el never será ignorado y solo se escribirá la cadena. Así es como obtenemos la cadena aquí. Pero si es un Y, ¿verdad? Si es una intersección, ahora todo será lineal. Es similar al operador Y y al operador O. Similar a ceros o unos, ¿verdad? Cero, cero, cero, y uno es Y uno es cero, y uno y cero O uno es uno. Eso es lo que significa. Así es como obtenemos tipos no vacíos. Básicamente, esta es la sintaxis que tenemos para los tipos condicionales. Así que veamos otro ejemplo.

Ahora combinemos estos dos, los tipos de mapa y los tipos condicionales, y creemos un tipo de utilidad personalizado. Así que el tipo de utilidad que quieres crear es similar a omitir, pero un poco diferente. Entonces omitir toma la clave de, esto es lo que hace omit. Tipo omitir claves, omitir persona, coma, así que tomará todas las claves de persona, digamos h, y omitirá todas estas cosas y solo devolverá lo que quede, las claves que queden. Ahora lo que quieres es, en lugar de dar la persona, en lugar de dar las claves como segundo argumento, queremos dar los tipos que queremos eliminar. No queremos dar el nombre exacto de la clave, sino el tipo de la clave que queremos eliminar. Así que queremos eliminar aquí, booleanos y números, no queremos esto, y no queremos esto, solo queremos nombre y correo electrónico. Así que una vez que lo demos, debería devolver solo las variables de tipo cadena. ¿Cómo lo hacemos? Solo claves de cadena, ¿cómo lo hacemos? Así que usamos la misma firma que tenemos para omitir, así que omitir toma el objeto principal como base, y también tomamos todos los tipos de unión. Y usamos el mismo omitir pero con un tipo diferente, así que básicamente omitir espera las claves como segundo argumento, ¿verdad?, eso es lo que espera, claves como segundo argumento. Pero estamos enviando número, y estamos enviando ese tipo real como segundo argumento. Así que queremos convertir esto a número, queremos convertir el tipo a las claves reales. Eso es lo que se está haciendo aquí. Así que estamos usando el tipo de mapa para recorrer el objeto base y obtener todas las claves, y lo que estoy comprobando es el tipo. Así que este objeto principal de clave devolverá nombre o número según sea la clave, si es nombre, entonces es cadena. Así que será cadena se extiende del tipo a eliminar es número o booleano, digamos que cadena se extiende booleano, no es correcto, así que no se extiende booleano. Entonces devolvemos la propia clave, así que devolvemos nombre. Así que para nombre, es una cadena, si se extiende, lo devolvemos, así que en este ejemplo, digamos que esto es una cadena se extiende booleano, no se extiende booleano, así que será never, así es como se hace aquí, y luego está edad. Así que edad, el tipo de edad es número, así que esto es número se extiende número o booleano, sí se extiende, entonces devolverá el número, la propia clave, así que será edad. Así que estoy devolviendo la clave, no estoy devolviendo el tipo, estoy devolviendo directamente la clave. Nuevamente, correo electrónico, el tipo de correo electrónico es cadena, será never, luego está estudiante, así que este, el tipo de estudiante es parte de booleano o número, sí, entonces devolverá el tipo, básicamente es estudiante, devolverá la clave, básicamente es estudiante, así es como se devuelve después de que se ejecute esto. Nuevamente, ahora no queremos este objeto. Lo que queremos es que nombre y edad pasen, ¿verdad? ¿Cómo lo pasamos? Con esto, así que si recuerdas este ejemplo que vimos, esta persona puede tomar, este tipo, puede tomar las claves de persona, básicamente la unión de todas las claves, ¿verdad? Devolverá todos los tipos de esas. Así que si paso, digamos que esto es booleano, ¿verdad? También devolverá nombre, número y booleano. ¿Cuáles son todos los tipos de estas claves que se escribirán? Así que en nuestro ejemplo, es un poco diferente. Devolverá lo mismo, pero ¿qué tipo tenemos? Tenemos todos los tipos literales, tenemos never, tenemos edad como tipo literal, y never de nuevo. Y nuevamente, estudiante es un tipo literal. Así es como se escribe. Así que esta clave de esto es así, y devolverá todos los tipos reales que se hayan dado.

Los tipos reales que se están utilizando son never, edad y estudiante. Eso es lo que se devolverá. Ahora, si recuerdas, en el ejemplo anterior que vimos, te dije que never se ignoraría. Entonces la edad y el estudiante quedarían, y eso es lo que se pasa a omitir. Entonces, ¿qué pasamos a omitir? El tipo base, la edad y el estudiante. Si pasas eso, omitirá esos dos tipos y devolverá solo nombre y correo electrónico. Eso es lo que se está haciendo. En resumen, creamos un tipo de utilidad similar a omitir, pero con tipos reales, no las claves, y omitirá de la misma manera que omite las claves reales. Esto es más poderoso si se combina con los tipos de mapa de claves y los tipos condicionales. Así que puedes hacer mucho más con estos tipos de utilidad por tu cuenta. Eso es todo sobre los tipos de utilidad personalizados. Ahora veamos la palabra clave infer. Infer también se utiliza junto con los tipos condicionales. Básicamente, infer extrae los tipos y los almacena en un tipo diferente y se puede usar en cualquiera de las condiciones que tenemos en los tipos condicionales. Supongamos que esta es la función que devuelve nombre y edad. Y así es como funciona el tipo de retorno. Vimos el tipo de retorno, el tipo de utilidad incorporado return type. Así es como se implementa. Esto es solo la firma de la función. Considera que por ahora esto es cualquier cosa. Entonces, lo que queremos hacer es pasar el tipo de la función, ¿verdad? Básicamente, t es una función. Queremos verificar si t es del tipo de función. Eso es lo que esto es. Por ahora, considera esto como cualquier cosa. Lo que hace la función es que tiene argumentos, cualquier número de argumentos de cualquier tipo, y también devuelve cualquier tipo de valor. Así es como se hace. Pero mientras lo estamos devolviendo, también estamos inferiendo el valor. Sea cual sea el valor que se devuelve, estamos inferiendo el tipo de ese valor y almacenándolo en R. Y lo estamos devolviendo en la condición verdadera básicamente. Entonces, si t se extiende de esta función, entonces estamos devolviendo el tipo de retorno de la función. De lo contrario, no estamos devolviendo nada.

Estamos tomando never. Así que una vez que pasemos el tipo de la función, si es una función, sí, es una función, getUser es una función y luego devolverá el tipo, por lo que inferirá esto y lo almacenará en R y estamos devolviendo R en la condición verdadera. Luego, si es una función, devolvemos el tipo de retorno de la función. Así que devolveremos nombre y edad. Así es como se calcula el tipo de retorno.

De manera similar, podemos calcular los tipos de propiedades de un componente. Digamos que este es un componente funcional y este es el tipo de propiedad, nombre y edad. Y así es como se define el componente. Entonces escribamos un tipo, todos los tipos de propiedades, que toma un tipo p y estamos verificando si esta p es del tipo de componente. React tiene esta utilidad de tipo de componente para verificar si es un componente. Entonces, en lugar de definir la función, React también tiene su propio verificador de tipo de componente. Así que lo estamos verificando y mientras lo verificamos, así es como pasamos el tipo de función en React. Estamos inferiendo la propiedad pasada. De manera similar a como inferimos el tipo de retorno, ahora estamos inferiendo el tipo de propiedad. Así que lo estamos inferiendo y guardándolo en p y si se cumple esta condición, estamos devolviendo el tipo de propiedad, de lo contrario, es never. Ahora, si lo llamamos con el componente, obtenemos todos los tipos de propiedades del componente. Esto es sobre inferencia.

De acuerdo. Entonces, lo último, esto es mucho más emocionante cuando lo aprendí. Veamos qué es. Tipos de retorno de plantilla. De acuerdo, creo que también tengo una diapositiva. De acuerdo. Digamos que tenemos una función. Es un componente React, es un componente de etiqueta. Toma color, etiqueta, margen y lo pasa al componente y luego renderiza la etiqueta de la etiqueta. ¿Cómo escribirías esto? Digamos que también tenemos colores de estado, que es una lista de colores que tenemos. Y los colores pueden contener cualquiera de estos colores. Recuerda, ascons, haremos esto de solo lectura. Y podemos usar esta firma de índice, firma de índice numérico, para obtener los colores individuales.

Y pueden establecerse tipos individuales, tipos literales, y pueden establecerse para la propiedad de color. Así que esto funciona. Pero, ¿qué pasa si queremos, y el margen también es una cadena. Entonces, ¿qué pasa si queremos extender el color, no solo a estos cuatro colores, sino también a cualquier color en formato hash, ¿verdad? ¿Cómo lo harías? Entonces, queremos tener estos cuatro, y queremos tener autocompletado para estos cuatro. Y también necesitamos permitir a los usuarios dar cualquier otro color que no sea estos cuatro. Entonces, y este margen ahora es una cadena. Puede tener cualquier cadena, también puede tener solo verde. Pero queremos restringir los márgenes para que tengan las propiedades de espaciado reales, ¿verdad? Como 12 píxeles, 12 rem, uno rem, dos em, y esos valores de espaciado. Entonces, ¿cómo lo restringirías? Así es como usamos la plantilla de cadena para restringirlo. Así que esto ya lo teníamos, ya teníamos los cuatro incorporados, cuatro colores de estado. Pero también puede tener cualquier cadena que contenga, que comience con un hash. Entonces, todos los colores comenzarán con un hash. Por lo tanto, todas las cadenas que queremos enviar a esta propiedad de color también deben comenzar con un hash. Así es como restringimos los colores.

¿Y qué pasa con los márgenes, verdad? Entonces, los márgenes terminan con píxel, rem o em. Esas son las unidades de espaciado. Así es como termina. ¿Y con qué comienza? Comienza con un número. Por ejemplo, 12 píxel, uno rem, dos rem, así. Así que comienza con un número. Dentro de estas comillas invertidas, puedes dar lo que quieras dar. Quiero leer un número, y también quiero que termine con píxel, rem o em. Ahora veamos el ejemplo. Estaría en, sí, este. Entonces, una vez que tengas eso, digamos color. Si hago esto, obtendré el autocompletado para los colores de estado, porque eso es todo lo que obtenemos. Podemos dar cualquiera de los colores, o podemos simplemente dar cualquier color que comience con un hash. Pero si das algo más que no comienza con un hash, entonces mostrará un error, diciendo que no se puede asignar a la propiedad color. Lo mismo ocurre con los márgenes. Los márgenes son opcionales, por eso no muestra errores. Pero una vez que comienzas a dar eso, el valor que puedes dar es, digamos, punto píxel. Eso puedes dar, porque es el valor aceptado. Pero si intentas dar algo, alguna A en medio del paréntesis, mostrará un error diciendo que no es del tipo, porque debería comenzar con un número. Y termina con píxel, así que si das algo más, dirá que no termina con eso. Así de poderosas son las plantillas de cadena, así que puedes restringir aún más, para que cuando estés usando el componente, digamos, cuando estés usando el componente de etiqueta, entonces el usuario sabe, okay, este es el valor exacto que esta propiedad requiere para que el componente funcione. Por lo tanto, la developer experience se mejora aún más con todas estas restricciones y advertencias en tiempo de compilación que obtienes al realizar todas estas comprobaciones de tipos. Así que eso es con las plantillas de cadena. Eso es prácticamente todo. Para resumir lo que vimos, vimos los type guards para afirmar y también restringir ciertos tipos, y una vez que superas eso, todos los tipos que das se asignarán al type guard, por lo que obtendrás todos los autocompletados, por lo que puedes hacer todas las comprobaciones de tipos correctamente. Y vimos los genéricos, genéricos básicos, componentes genéricos y funciones genéricas. Y también vimos los tipos de utilidad incorporados que ya proporciona TypeScript, como el tipo de retorno, parámetros, parcial, omitir, seleccionar. También creamos nuestro propio tipo de utilidad basado en los conceptos de tipos de mapa y tipos condicionales. Creamos un tipo de utilidad similar a omitir, pero toma los tipos de las claves en lugar de solo las claves que toma omitir. Y también vimos inferir, cómo puedes extraer ciertos tipos junto con los tipos condicionales, extraer el tipo y luego usarlo en la condición verdadera o falsa de los tipos condicionales. Y finalmente, vimos algunos ejemplos impresionantes sobre tipos literales, plantillas literales. Básicamente usando las comillas invertidas en la cadena. Las comillas invertidas pueden usar todo tipo de comienzos y finales para restringir aún más los argumentos o las variables para que mientras las estés usando, sepas exactamente qué necesitas proporcionar a los componentes para que funcionen perfectamente. Así que sí, eso es prácticamente todo. Gracias por ver y espero que disfrutes la charla y obtengas muchos conceptos advanced avanzados que puedes usar en tu proyecto y hacer que tu proyecto sea aún más amigable para los desarrolladores y fácil de usar. (?) (?) (?) (?) (?) (?)