¡Vaya! ¿Puede TypeScript Hacer Eso?

Hola a todos, la charla de hoy trata sobre Conceptos Avanzados de TypeScript. Algunos conceptos menos conocidos de TypeScript que puedes aprender y luego usar en tus proyectos diarios que pueden mejorar drásticamente tu experiencia como desarrollador y, ya sabes, el uso de TypeScript en sí, así que continuemos.

Antes de comenzar, una pequeña 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í. Así que también hablo mucho en conferencias y encuentros, 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 una pequeña introducción sobre mí, y vamos a entrar en la charla.

Así que el primer concepto son los typeguards. Veamos qué es. Digamos que tienes una función que toma cualquier tipo de argumento, y si es de cierto tipo, hacemos algún tipo de operación con él. Por ejemplo, aquí estoy comprobando si es una cadena, y si es una cadena estoy usando algunas propiedades de cadena y accediendo a ellas. De lo contrario, no es una cadena, entonces lo hacemos de manera diferente. Así que en este ejemplo, tengo una función de cadena que verifica el tipo de la variable y devuelve que es un Booleano, es un verdadero o falso. Así que con esto, si lo tienes así, entonces TypeScript no sabrá si la variable es realmente una cadena. Así que tenemos esta verificación, devuelve verdadero o falso, pero no hay manera de que TypeScript sepa si la variable es cadena o no. Solo sabe que es verdadero o falso y llega aquí y no sabe sobre el tipo de la variable, ¿verdad? Así que para eso, lo que puedes hacer es algún tipo de verificación de tipo aquí, así que puedes usar la palabra clave is en TypeScript, y declarar explícitamente que la variable es cadena como un tipo de retorno aquí. Así que ahora lo que sucede es que, una vez que esta verificació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. Así que esa es la belleza de este typeguard. Veamos un ejemplo en el código, un ejemplo real. Así que esto es antes de agregar el typeguard. Así que ahora si ves, esto devuelve Booleano, esto devuelve Booleano. Y una vez que llegas aquí, ahora la variable es any e incluso después de que devuelve verdadero, la variable es any. Así que no obtienes todas las verificaciones de tipo, ya sabes, en tiempo de compilación. Así que ahora después de que agregamos el typeguard, ahora aquí la variable es any, pero una vez que esta verificación pasa y llega aquí, ahora la variable es cadena. Lo que significa que le estamos diciendo a TypeScript que es una cadena y puedes usar todos los métodos de cadena que tiene y será fácil para nosotros hacer todas las operaciones de cadena dentro de esta condición verdadera.

Así que ahora veamos las aserciones, así que esta es la manera de decirle al compilador que este escenario no volverá a ocurrir. Estamos afirmando que no volverá a ocurrir. Así que en esta función estoy probando si la variable es cadena o no. Así que si no es una cadena, lanzamos un error. Así que si es una cadena, entonces no habrá errores. Así que llamamos a esta función aquí con la variable pasándola y si no es una cadena entonces no habrá ningún error.

Entonces este console log ocurrirá, así que básicamente después de que se ejecute esta función, la variable sería una string y estamos afirmando que es una string. Así que ahora lo que sucede es, este tipo de retorno es asserts y una vez que pasamos esta llamada de función, sabemos que la variable es una string entonces obtenemos la variable como string y podemos usar todas las propiedades de string. Así que esto es más poderoso si no quieres hacer una condición, condición Booleana y quieres lanzar un error en tu función de ejemplo allí cuando no es una string, quieres lanzar un error. Así que una vez que el error no se lanza entonces sabemos con certeza, es una string y usamos todas las propiedades de string. Así que eso es con un type guard.

Así que ahora veamos los generics en TypeScript. Este es el concepto avanzado central de TypeScript que debes aprender para hacer todo tipo de tipos reutilizables y también si estás usando React, hacer que tu componente de React sea más reutilizable y más genérico. Y si estás usando JavaScript normal, puedes usar todo tipo de tipos utilitarios, puedes crear todo tipo de tipos utilitarios con el concepto central de generics.

Así que antes de entrar en eso, quiero mostrarte algunos ejemplos antes de comenzar con los generics. Así que veamos un par de palabras clave en TypeScript. Digamos que este es un objeto person con nombre, edad, email y student Boolean. Y una vez que asignas el person, estos serían los valores que puedes dar a una variable. Y este keyof es una palabra clave de TypeScript que devuelve todas las claves de un objeto. Así que aquí todas las claves son nombre, edad, email y student. Así que devolverá toda la unión de todas las claves. Así que una vez que asignas esa clave a una variable, todo lo que puedes ver es todo el valor que puedes asignar a esta variable son todas las claves del objeto person. Así que esto es más poderoso. Lo estarás usando en todos los ejemplos siguientes.

Básicamente devolverá todas las uniones. Así que devuelves edad, nombre, email y student, y puedes asignar valores a ello. Esto es similar a cómo accedes a un objeto normal. Así que defines el objeto, y llamas a la clave del objeto dentro de él, y devolverá el valor. Así que aquí, como es un tipo, no devolverá el valor, pero devolverá el tipo de la clave. Así que esta clave de objeto. Así que el tipo de nombre es string. Esto devolverá string. Esto también puede tomar una unión de claves. Así que aquí estoy dando nombre, que también es una clave, y edad también es una clave. Así que con estos dos, esto devolverá tanto string como number, porque el tipo de nombre es string, y el tipo de edad es number. Así que devolverá la unión de estos dos. Básicamente, ahora con esto, podemos analizar también la clave de person. Así que la clave de person es básicamente la unión de todas las claves. Ahora podemos analizar eso, y devolver todos los tipos que son parte de ese objeto en particular. Así que este objeto tiene claves con string, number y Boolean. Eso es lo que devolverá.

Así que estos tres son conceptos básicos para conocer los generics y los otros tipos que están por venir. Así que uno es el key of, que devuelve la unión de claves, y key of del objeto dentro de estos Corchetes Cuadrados devolverá todos los tipos de las claves. Esto es para objeto. Ahora esto también es útil para arrays. Así que digamos que esto es un array de string, así que si no tienes este const, esto será solo un array de string. Pero digamos que los roles son, solo tenemos estos tres roles, roles 0, 1, y 2. Ahora si haces un const, 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. Roles 0, 1, y 2 son literales. Así que usando esto, puedes obtener los literales individuales y guardarlos en un tipo. Así que como es una variable de JavaScript, queremos usar una palabra clave type of para convertir esta variable de JavaScript a un tipo. Así que eso es lo que hace esto. Y estamos usando la firma de índice de número para obtener todos los valores y guardarlos como una unión de tipos. Así que esto también es útil en la próxima lección. Así que estos son los conceptos principales que quiero mostrarte antes de que pasemos a Generics.

Bien. Ahora veamos un ejemplo simple de usar una máquina de estados. Así que una máquina de estados es algo que tiene un montón de estados y también un estado inicial para comenzar con. Así que si quieres tipar esta función, principalmente lo que harás es declarar un tipo o interfaz y definir los estados.

Así que básicamente toma un objeto de estado y también inicial como un objeto. Así que esto será un objeto con estados y eso es básicamente un objeto de Javascript. Así que es un tipo de objeto y es un inicial. Eso es un string. Así que lo tiparemos así.

Esto funciona bien pero incluso podemos restringirlo más para que cuando estemos usando el make state sea más fácil para nosotros implementarlo y usarlo. Así que lo que quiero decir con eso es, 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 cualquiera de los estados que se están definiendo.

Así que lo que puedes hacer es, puedes usar la propiedad keyof que acabamos de, la palabra clave keyof que acabamos de discutir y usamos generics así. Así que definimos, así que ya teníamos una config, estamos definiendo el generic así. Esto puede ser cualquier tipo y cualquier tipo. Así que lo que sea que pases, eso se pasa al estado y el valor inicial sería keyof state. Básicamente, todas las propiedades son las claves del estado que pueden ser el valor inicial. Y así es como pasas en una función. Así que defines el generic en los corchetes angulares aquí. Y también una vez que lo defines, puedes pasarlo al tipo de config. Así que una vez que tienes eso, ahora los únicos valores posibles son A y B. Así que veamos cómo funciona.

Bien. Así que como tengo un generic escrito aquí, si solo pongo las comillas dobles, el único valor posible son A y B. Si doy C, habrá un error que dice que C no es parte de A y B. Eso es debido a la palabra clave que usamos. Si solo lo tenemos como string, ahora cualquier cosa es posible. Puedes simplemente dar C, entonces obtendrás un error de tipo en tiempo de ejecución, porque C no es parte de los estados disponibles. Así que con esta restricción, podemos estar seguros de que obtenemos los errores en el tiempo de compilación y resolverlo antes de ir a producción. Así es como los generics pueden usarse para restringir más tipos y luego hacer que los errores sean fácilmente identificables.

So that's one example of generics. Let's take a look at another example with a React component. Así que este es un componente de lista simple que tenemos. Y esta lista toma una prop de items y los recorre y renderiza el ID y el nombre. Así que si quieres tiparlo, eso es lo que usualmente haces. Simplemente listas un tipo de prop y la firma del item aquí, ID y nombre, y es un array.

Así que lo tenemos como un array. Pero ¿qué pasa si queremos hacer este componente de lista más genérico? Digamos que queremos hacer este componente de lista de manera que el color de este componente debería definir el tipo del item en sí y cómo debería ser renderizado el item. Entonces, ¿cómo hacemos eso? Así que lo hacemos así. Así que ahora estas props de lista toman otro generic, y toman items y sería un array de item. Pero también definimos cómo los items serán renderizados por el color en sí. Así que definimos otra prop, render item, y que toma, que es básicamente una función que toma un item y devuelve un elemento de JavaScript. Así que básicamente la parte de renderizado de esto.

Y así es como lo defines en la lista. Así que similar a las funciones, definimos el generic en los corchetes angulares, y damos las props y pasamos el item a ello. Así que ahora simplemente estamos recorriendo y renderizando el item aquí. Pero la lógica de renderizado y la definición del item serían parte del componente que llama. Así que donde el componente está siendo llamado. Así que lo estamos llamando en el componente de formulario aquí. Así que si ves aquí, estamos definiendo la firma del item y esta firma sería inferida en el render item. Así que lo que sea que pases, cualquier firma que pases en el primer array de items, esa firma se mantendrá en el render item porque tenemos el mismo tipo t item en el argumento de render item en sí. Así que si ves el ejemplo aquí, así que aquí tengo ID nombre y edad. los items serían del tipo ID nombre y edad. Así que si doy este estudiante verdadero, ahora esto será, esto también será añadido aquí. Así que lo que sea, así que ahora el control se da al componente que llama. Así que no está en la declaración ahora, cuando el componente está siendo creado ahora. Ahora el control se da al componente que llama. Así que ahora el que llama puede decidir cómo quiere renderizar y cuáles son los items que quiere. Puede ser un item de estudiantes, puede ser un item de, ya sabes, listas de compras y todas esas cosas, cualquier tipo de items.

Ahora el componente de lista es más genérico gracias a los tipos genéricos. Bien. Ahora veamos algunos utility types.

Así que 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 pueden ser usados para crear otros, transformar algún tipo particular a otro tipo y devolver ese tipo. Así que básicamente, básicamente transformación de tipos. Eso es lo que son los utility types.

Así que hay un montón de utility types integrados disponibles en TypeScript. Así que veámoslos uno por uno. Así que digamos que tenemos un objeto to-do con título, descripción y completado. Y queremos definir otro tipo, otro tipo to-do preview que solo tenga título y completado. No tiene que tener la descripción porque solo estamos previsualizando el to-do, digamos.

Así que para eso, TypeScript proporciona un utility type llamado pick, que básicamente toma el tipo base, que es to-do aquí y pasa diferentes claves. Así que aquí, las claves son título, descripción y completado. Así que estoy pasando título y completado. Así que estamos seleccionando estas dos claves de este tipo y luego ejecutándolo aquí. Así que ahora esta previsualización solo tendrá título y completado. No tendrá descripción. Así que esta es una utilidad poderosa que podemos usar. Así que esto es similar a, tenemos un, de manera similar, tenemos el utility type omit. Esto es justo lo opuesto a pick. Simplemente omite cualquier clave que pases. Pero aquí, solo voy a omitir la descripción. Así que ahora será título y completado. Así que estas dos son dos utilidades poderosas que se usan bastante a menudo. Y también hay una utilidad más que se usa bastante a menudo que es partial. Así que aquí, todas las propiedades son requeridas, título, descripción y todo es requerido aquí. Así que ¿qué pasa si quiero hacer un partial básicamente, hacer todas las claves opcionales. Así que usa el partial. Así que una vez que pasas el to-do, aquí verás que todas las propiedades han sido marcadas como opcionales.

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

Así que eso es sobre el partial. Ahora hagámoslo read only. Así que ahora este tipo to-do puede ser modificable. Así que si lo asignas a una variable, eso puede ser modificado, puedes modificar title, description y competitor. Pero si quieres que sea read only e inmutable, entonces puedes usar read only. Ahora esto marcará todas las propiedades como read only y se pueden asignar solo una vez y no se pueden modificar. Eso es read only.

Y ahora veamos un par de cosas, parameters y return types. Así que digamos que esta es una función, ¿verdad? Así que estoy obteniendo un tipo de la función y almacenándolo aquí usando el keyword type of. Ahora quiero obtener el tipo de los argumentos que se están pasando a esta función. Así que usando este utility type parameters puedes obtener eso. Así que devolverá una tupla de tipos de argumentos. Así que aquí tenemos to-do y es de tipo to-do y hemos actualizado los campos de to-do de este partial to-do. Y de la misma manera también podemos obtener el return type usando el utility return type. Ahora devolveremos, así que aquí estamos devolviendo el to-do exacto en sí. Así que estamos obteniendo title, description y computer. Así que esto es más poderoso. Estos utilities son más poderosos. En los próximos ejemplos te mostraré cómo puedes crear tu propio utility type usando estos dos conceptos. Antes de eso, utility types personalizados. Antes de eso queremos ver, queremos aprender dos conceptos. Uno es los map types y los conditional types. Así que primero veamos los map types. Bien, así que esto básicamente es una sintaxis para map types. Así que lo que hace es, usamos el mismo keyword key of para obtener todas las claves de un tipo de objeto particular y esto es como un iterador. Así que si ves un bucle for, ¿verdad? Así que 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. Así que esto en, es como un iterador. Así que esto, todas las claves individuales del objeto se almacenarán en key, almacenadas en K y puedes usar esta K en cualquier lugar en el, en el lado derecho del colon.

Tomemos un ejemplo. Así que vimos el tipo read only UDT, ¿verdad? Veamos, veamos cómo se implementa. Así que tenemos una persona y quiero hacer que esta persona sea read only, persona read only. Cómo haré eso es lo mismo. Usaré K en key of person. Así que esto devolverá todas las claves de este tipo de persona y las recorreré una por una. Y lo que haré es, simplemente devolveré cualquiera que sea el tipo que tenga. Así que no estoy modificando nada. Así que esto simplemente, si solo hago esto y no añado read only, simplemente devolverá lo mismo que está en la persona. Básicamente, solo estoy iterando a través de él y luego enviando, así que esta clave, persona de clave simplemente devolverá string, persona de edad simplemente devolverá number y así sucesivamente. Ahora solo quiero hacerlo read only, así que simplemente añadiré este modificador read only a este map type y esto añadirá read only a todas las propiedades de la clave, básicamente todas las claves. Así que ahora esto es read only. Así que una vez que lo asigno, no puedo cambiarlo, cambiar la edad. Así que lo lanzará como read only. Lo mismo para partial. Así que estamos iterando a través de él y guardando todas las claves individualmente y luego haciéndolas opcionales. Y luego, ya sabes, este no está modificado. Simplemente devolvemos cualquiera que sea el tipo aquí. Así que ahora todas las claves de la persona son partial, básicamente opcionales. Y si quieres hacer esto como requerido, ¿verdad? Así que ahora es partial. Entonces, ¿qué pasa si quieres hacerlo como requerido? Así que simplemente usaremos el menos delante del modificador. Así que estos son todos modificadores. Así que el signo de interrogación, es read only, todos estos se llaman modificadores. Así que si añadimos un menos, entonces estaría negando el propósito inicial. Así que ahora estamos pasando partial, esto es opcional. Ahora estamos usando menos. Ahora esto será, todo será requerido. Lo mismo ocurre con non read only. Así que ya teníamos persona read only, esto es read only. Y si añadimos el menos delante de read only, ahora esto sería, todo sería requerido.

Quiero decir, todo será non read only. Así que esto es para tipos de mapa.

Ahora son tipos condicionales. Así que tipos condicionales. Bien. Así que estos tipos condicionales, son básicamente similares a un operador ternario. Así que, esto no está vacío.

Hagamos, así que el ejemplo que quiero mostrarte aquí es, si pasamos, esto es básicamente una utilidad que queremos crear usando tipos condicionales. Lo que hace es, lo que debería hacer es, si pasamos múltiples uniones de tipos, devolvería los tipos no vacíos. Así que los tipos no vacíos son tipos no undefined y null. Así que si es string, Boolean, o number, entonces será devuelto, de lo contrario no será devuelto. Así que ahora, si el resultado será string, si solo tengo Boolean, ahora el resultado sería string y Boolean. Así que básicamente tipos no vacíos.

Así que para eso, usamos la palabra clave extends y usamos el signo de interrogación y dos puntos, sintaxis del operador ternario. Así que lo que hace es, cualquiera que sea la unión que pasemos, eso estaría en T, y estamos verificando si T extiende, null, o undefined. Así que básicamente lo que significa es, verá si el tipo que pasamos es null o undefined. Si es null o undefined, entonces devolverá never, de lo contrario, si no lo es, si es no nulo, entonces devolverá lo que pasemos. String, Boolean, o number. Así que desglosémoslo para entender cómo funciona. Así que este tipo de unión que tenemos, esto se expandiría algo así. Así que individualmente será llamado. Es igual a Boolean por ahora. Y después de esto, el string será pasado aquí. Así que la T sería string. Así que esto sería extendido básicamente. Así que en lugar de T, tenemos string, extiende, null o undefined, never. En lugar de T, tenemos string. Lo mismo ocurre con undefined, lo mismo ocurre con null. Ahora esta verificación ocurrirá. Así que string extiende null o undefined, así que no, no extiende, así que devolverá string aquí.

Ahora aquí, undefined extiende null o undefined, sí. Undefined extiende null o undefined, entonces devolverá never. Y lo mismo, null extiende null o undefined, sí, extiende, por lo que devolverá never. Así que una cosa genial sobre TypeScript es, de la palabra clave never es, sería ignorada por TypeScript si es una unión. Así que esto es unión. Así que ahora, el never será ignorado, y solo se escribirá el string. Así es como obtenemos string aquí. Pero si es un AND, ¿verdad?, si es, digamos, si es intersección, ahora todo estará en línea. Es similar al operador AND y al operador OR. Similar a cero o unos, ¿verdad? Así que cero, cero, cero, y uno es, AND uno es cero, y uno y cero OR uno es uno. Eso es lo que significa. Así es como obtenemos tipos no vacíos. Así que básicamente, esta es la sintaxis de turn-in que tenemos para tipos condicionales.

Así que tenemos una lista de estados aquí. Queremos excluir, así que declaramos un tipo de exclusión, detectará errores de tipo en el tipo base y una unión de tipos de exclusión. Así que eso excluirá lo que pasemos. Similar a omit, pero esto es para tipos de unión. Así que omit es para objetos, y esto es para tipos de unión. Así que pasamos el estado, básicamente todo esto, y pasamos los tipos que queremos, los tipos literales que queremos ignorar. Así que estos dos. Así que ahora esto devolverá el estado de progreso pendiente. Eliminará los estados negativos. Así que básicamente, es la misma sintaxis. Así que verificamos si el tipo base extiende el tipo de exclusión. Si extiende, entonces no devolvemos nada. Nunca lo haremos básicamente, y si no está en estos tipos posibles, entonces devolvemos lo que sea el tipo base. Así que lo revisará individualmente, así que verificará pendiente y advertencia, pendiente y error, en progreso advertencia, en progreso error, todas las condiciones serían verificadas, y se devolvería en consecuencia. Así que esos son los tipos condicionales.

Ahora combinemos estos dos, map types y conditional types, y creemos un tipo utilitario personalizado. Así que el tipo utilitario que quieres crear es similar a omit, pero un poco diferente. Así que omit toma la clave de, así que esto es lo que hace omit. Tipo omit keys, omit person, coma, así que tomará todas las claves de person, digamos h, y omitirá todas estas cosas y solo devolverá lo que quede, lo que sea que queden las claves. Ahora lo que quieres es, en lugar de dar el person, en lugar de dar las claves como segundo argumento, queremos dar los tipos que queremos eliminar. Así que no queremos dar el nombre exacto de la clave, pero queremos dar el tipo de la clave que quieres eliminar. Así que queremos eliminar aquí, Boolean y numbers, no queremos esto, y no queremos esto, solo queremos name y email. Así que una vez que demos eso debería devolver solo las variables de tipo string. Entonces, ¿cómo hacemos eso? Solo claves de tipo string, entonces, ¿cómo hacemos eso? Así que solo usamos la misma firma que tenemos para omit, así que omit toma el objeto principal como base, y también tomamos todos los tipos de unión. Y usamos el mismo omit pero con un tipo diferente, así que básicamente omit espera claves como segundo argumento, ¿verdad?, eso es lo que espera, claves como segundo argumento. Pero estamos enviando number, y estamos enviando ese tipo real como segundo argumento. Así que queremos convertir este a number, queremos convertir el tipo a las claves reales. Así que eso es lo que se está haciendo aquí. Así que estamos usando el map type para recorrer el objeto base y obtener todas las claves, y lo que estoy verificando es el tipo. Así que este objeto principal de clave devolverá name o number basado en lo que sea la clave, si es name, entonces es string. Así que será string extiende el tipo a eliminar es number o Boolean, digamos string extiende Boolean, no es correcto, así que no extiende Boolean. Entonces devolvemos la clave en sí, así que devolvemos name. Así que para name, es un string, si extiende, devolvemos eso, así que en este ejemplo, digamos que esto es un string extiende Boolean, no extiende Boolean, así que será never, así que eso es lo que está aquí, y el siguiente es age. Así que age, un tipo de age es number, así que esto es number extiende number o Boolean, sí extiende, entonces devolverá el number, la clave en sí, así que será age. Así que estoy devolviendo la clave, no estoy devolviendo el tipo, solo estoy devolviendo la clave directamente. Nuevamente, email, el tipo de email es string, será never, luego is student, así que este, el tipo de is student es parte de Boolean o number, sí, entonces devolverá el tipo, básicamente is student, devolverá la clave, básicamente is student, así que esto es lo que devuelve después de que esto se ejecute. Nuevamente, ahora queremos, no queremos este objeto. Lo que queremos es que pasen name y age, ¿verdad? Entonces, ¿cómo pasamos eso? Con este, así que si recuerdas este ejemplo que vimos, esta person puede tomar, este tipo, puede tomar claves de person, básicamente unión de todas las claves, ¿verdad? Así que devolverá todo el tipo de esos. Así que si paso, digamos que esto es Boolean, ¿verdad? También devolverá name, number y Boolean. ¿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 age como tipo literal, y never. Y nuevamente, student es un tipo literal. Así que eso es lo que se está escribiendo.

Los tipos actuales que están siendo utilizados, así que será después de esto, será never, age, never, y tu student. Bien, eso es lo que devolverá. Ahora, si sabes, en el ejemplo anterior que vi, dije que never puede ser, sería ignorado. Así que age y student quedarían, y eso es lo que se pasa a omit. Entonces omit, ¿qué pasamos a omit? El tipo base y age y student. Así que si pasas eso, entonces omitirá esos dos tipos, y devolverá solo name y email. Así que eso es lo que se está haciendo. Así que para recapitular, creamos un tipo utilitario tipo omit, pero con tipos reales, no las claves, y omitiría de la misma manera como omite las claves reales. Así que esto es más poderoso si lo combinas con, así es como es poderoso combinarlo con los map types de clave y los tipos condicionales. Así que puedes hacer mucho más como estos tipos utilitarios por tu cuenta.

Así que eso es con tipos utilitarios personalizados. Ahora veamos la palabra clave infer. Así que infer también se usa junto con los tipos condicionales. Básicamente infer extrae los tipos y los almacena en un tipo diferente y puedes usarlo en cualquiera de las condiciones que tenemos en los tipos condicionales. Así que asumamos que esta es la función que devuelve name y age. Y así es como funciona el tipo de retorno. Así que vimos el tipo de retorno, tipo utilitario incorporado tipo de retorno Así que así es como se ha implementado. Así que esta es solo la firma de la función. Así que considera, básicamente quieres pasar, así que queremos pasar el tipo de la función, ¿verdad? Así que básicamente este t es básicamente una función. Así que queremos verificar si este t es del tipo de función. Así que eso es lo que es esto. Por ahora considera esto como any. Bien, entonces lo que es la función, la función tiene argumentos, cualquier número de argumentos de cualquier tipo y también devuelve cualquier tipo de valor. Así que así es como se hace. Pero mientras lo estamos devolviendo, también estamos infiriendo el valor. Así que cualquiera que sea el valor que se devuelve, estamos infiriendo el tipo de ese valor y almacenándolo en R. Y lo estamos devolviendo en la condición verdadera básicamente. Así que si t extiende 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 pasamos 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, así que inferirá esto y lo almacenará en R y estamos devolviendo el R en la condición verdadera. Entonces, si es una función, entonces devolvemos el tipo de retorno de la función. Así que devolveremos name y age. Así es como se calcula el tipo de retorno.

De manera similar, podemos calcular los tipos de props de un componente. Así que digamos que este es un componente funcional y este es el tipo de prop, name y age. Y así es como se define el componente. Así que escribámoslo como un tipo, todos los tipos de prop, y que toma un tipo p y estamos verificando si este p es del tipo de componente. Así que React tiene esta utilidad de tipo de componente para verificar si es un componente. Así que en lugar de definir la función, React también tiene su propio verificador de tipo de componente. Así que estamos verificando eso y mientras lo verificamos, así es como pasamos el tipo de función en React. Así que estamos infiriendo la propiedad pasada. De manera similar a como inferimos el tipo de retorno, ahora estamos infiriendo el tipo de prop. Así que estamos infiriendo eso y guardándolo en p y si se cumple esta condición, estás devolviendo el tipo de prop de lo contrario, nunca. Así que ahora si lo llamas con el componente, simplemente obtenemos todos los tipos de props del componente. Así que esto es sobre infer.

Bien. Así que en la cosa final, esto es mucho más emocionante cuando acabo de aprender esto. Así que veamos qué es. Tipos de retorno de plantilla. Bien, creo que también tengo una diapositiva. Bien. Así que digamos que tenemos una función. Es un componente de React, es un componente de etiqueta. Y toma color, label, margin, y lo pasa a, y luego renderiza la etiqueta del label. Entonces, ¿cómo tiparí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. Así que recuerda, ascons, haremos esto como de solo lectura. Y podemos usar esta firma de índice, firma de índice de número para obtener los colores individuales.

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

¿Y qué pasa con los márgenes, verdad? Entonces los márgenes terminan con pixel, rem o em. Esas son las unidades de espaciado. Así es como termina. ¿Y con qué comienza? Comienza con un número. Así que es como 12 pixel, un rem, dos rem, así. Entonces comienza con un número. Así que dentro de estas comillas invertidas, puedes dar lo que quieras dar. Quiero leer número, y también quiero que termine con pixel, rem o em. Así que ahora veamos el ejemplo. Estaría en, sí, este. Entonces, ahora una vez que tienes eso, digamos color. Entonces, 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 simplemente podemos dar cualquier color solo comenzando con hash. Pero si das algo más que no comienza con hash, entonces lanzaremos un error, diciendo que no es asignable a la propiedad color. Lo mismo ocurre con los márgenes. Así que los márgenes son opcionales, por eso no está lanzando ningún error. Pero una vez que comienzas a dar eso, el valor que puedes dar es, digamos, punto pixel. Eso puedes dar, porque ese es el valor aceptado. Pero si intentas dar algo, alguna A en medio del amigo, lanzará un error diciendo que no es de tipo, porque debería comenzar con un número. Y termina con pixel, así que si das algo más, entonces dirá, no, no termina con eso. Así de poderosas son las plantillas de cadenas, 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, está bien, este es el valor exacto que esta prop requiere para hacer que el componente funcione. Así que la experiencia del desarrollador se mejora aún más con todas estas restricciones y advertencias en tiempo de compilación que obtienes haciendo todas estas verificaciones de tipos.