¡Vaya! ¿Puede TypeScript hacer eso?

Rate this content
Bookmark

Hoy en día, TypeScript es un estándar de la industria ya que proporciona una increíble experiencia de desarrollo con autocompletado, refactorización de código con confianza y mucho más. Pero la mayoría de los desarrolladores solo rascan la superficie y no utilizan TypeScript en todo su potencial.


Esta charla profundizará en los conceptos poderosos y avanzados de TypeScript como los genéricos, los tipos condicionales, los type guards, los utility types para transformaciones de tipos y mucho más, utilizando ejemplos del mundo real para comprender mejor estos conceptos.

41 min
05 Jun, 2023

Video Summary and Transcription

La charla de hoy cubre conceptos avanzados de TypeScript, incluyendo type guards, genéricos, utility types y tipos condicionales. Estos conceptos mejoran la experiencia del desarrollador y mejoran la calidad del código al garantizar la seguridad de tipos y reducir errores. La charla también explora el uso de genéricos para hacer que los componentes sean más genéricos y reutilizables. Además, se discute el poder de los utility types personalizados y la palabra clave infer para crear definiciones de tipos flexibles y precisas. Las plantillas de cadenas de TypeScript se destacan como una herramienta para imponer restricciones en valores como los márgenes en CSS. En general, la charla proporciona información valiosa sobre cómo aprovechar las características avanzadas de TypeScript para un desarrollo de software más robusto y mantenible.

Available in English

1. Advanced Concepts of TypeScript

Short description:

La charla de hoy trata sobre los Conceptos Avanzados de TypeScript. Aprenda conceptos menos conocidos de TypeScript para mejorar su experiencia como desarrollador. El primer concepto son los typeguards. Los typeguards ayudan a TypeScript a determinar el tipo de una variable. Al utilizar typeguards, puede asegurarse de que TypeScript conozca el tipo de la variable y pueda utilizar los métodos apropiados. Otro concepto son las aserciones, que le permiten indicar al compilador que cierto escenario no volverá a ocurrir. Al utilizar aserciones, puede prevenir errores y garantizar el comportamiento esperado de su código.

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.

2. Type Guards in TypeScript

Short description:

Esta parte explica cómo funcionan los type guards en TypeScript. Al utilizar type guards, puede asegurarse de que una variable sea de un tipo específico y utilizar los métodos y propiedades apropiados. Los type guards son particularmente útiles cuando desea lanzar un error si una variable no es del tipo esperado. Este concepto es poderoso y puede mejorar la experiencia del desarrollador.

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.

3. Genéricos en TypeScript

Short description:

Esta parte explica el concepto fundamental de los genéricos en TypeScript. Los genéricos son esenciales para crear tipos reutilizables y hacer que los componentes de React sean más genéricos. Te permiten crear tipos de utilidad y trabajar con uniones de claves. La palabra clave keyof en TypeScript devuelve todas las claves de un objeto, que luego se pueden usar para asignar valores a variables. Al comprender los genéricos, puedes analizar las claves de un objeto y devolver todos los tipos asociados a ellas.

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á.

4. Conceptos fundamentales de los genéricos

Short description:

Esta parte cubre los conceptos fundamentales de los genéricos, incluyendo la palabra clave keyof y el uso de literales para guardar valores individuales como tipos. Estos conceptos son esenciales para las próximas lecciones sobre Genéricos.

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.

5. Usando Máquina de Estados y Genéricos

Short description:

Ahora veamos un ejemplo sencillo de cómo usar una máquina de estados. Al usar la propiedad keyof y los genéricos, podemos restringir el estado inicial para que solo sea A o B. Esto asegura que obtengamos errores en tiempo de compilación y los resolvamos antes de pasar a producción.

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.

6. Usando Genéricos para Restringir los Valores de las Variables

Short description:

Al usar genéricos, podemos restringir los posibles valores de una variable y detectar errores en tiempo de compilación. Esto asegura que solo se utilicen valores válidos y evita errores en tiempo de ejecución. Los genéricos son una herramienta poderosa para mejorar la calidad del código y reducir errores.

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.

7. Haciendo un Componente de Lista más Genérico con Genéricos

Short description:

Esta parte discute cómo hacer un componente de lista más genérico utilizando genéricos en TypeScript. Al definir una propiedad genérica para los elementos y otra propiedad para la representación, el componente de lista puede personalizarse para renderizar diferentes tipos de elementos según la propiedad de color. La lógica de representación y la definición de elementos se mueven al componente que llama, lo que permite flexibilidad en la representación y tipos de elementos. Este uso de genéricos mejora la reutilización y flexibilidad del componente de lista.

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.

8. Tipos de Utilidad en TypeScript

Short description:

Ahora el componente de lista es más genérico gracias a los tipos genéricos. Ahora veamos algunos tipos de utilidad. TypeScript proporciona tipos de utilidad como pick, omit y partial. Pick te permite seleccionar claves específicas de un tipo, omit elimina claves específicas y partial hace que todas las claves sean opcionales.

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.

9. Partial, Read-Only, Parameters, and Return Types

Short description:

Esta parte cubre los conceptos de tipos parciales, de solo lectura, de parámetros y de tipos de retorno en TypeScript. Partial permite campos opcionales en una función, mientras que read-only hace que las propiedades no sean modificables. Los parámetros y los tipos de retorno se pueden obtener utilizando tipos de utilidad. Los ejemplos próximos demostrarán cómo crear tipos de utilidad personalizados utilizando estos conceptos.

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.

10. Haciendo Objetos de Solo Lectura y Parciales

Short description:

Entonces, tomemos un ejemplo. Tenemos una persona y queremos hacerla de solo lectura. Usando la clave de persona, podemos recorrer cada clave y devolver su tipo. Para hacerla de solo lectura, agregamos el modificador de solo lectura al tipo de mapa, haciendo que todas las claves sean de solo lectura. El mismo concepto se aplica a parcial, donde recorremos las claves y las hacemos opcionales. Para hacerlas requeridas, usamos el modificador menos. Lo mismo se aplica a no de solo lectura, donde usamos el modificador menos para hacer que todas las claves sean requeridas.

Vimos el tipo de dato definido por el usuario de solo lectura, ¿verdad? Veamos, veamos cómo se implementa. Tenemos una persona y quiero hacer que esta persona sea de solo lectura, persona de solo lectura. Cómo lo haré es lo mismo. Usaré K en clave de persona. Esto devolverá todas las claves de este tipo de persona y las recorreré una por una. Y lo que haré es, simplemente devolver cualquier tipo que tenga. Así que no estoy modificando nada. Esto simplemente, si solo hago esto y no agrego solo lectura, simplemente devolverá lo mismo que está en la persona. Básicamente estoy recorriéndolo y luego enviando, así que esta clave, persona de clave devolverá string, persona de edad devolverá número y así sucesivamente. Ahora solo quiero hacerlo de solo lectura, así que agregaré este modificador de solo lectura a este tipo de mapa y esto agregará solo lectura a todas las propiedades de la clave, todas las claves básicamente. Ahora esto es de solo lectura. Una vez que lo asigno, no puedo cambiarlo, cambiar la edad. Así que lanzará un error de solo lectura. Lo mismo para parcial. Así que lo estamos recorriendo y guardando todas las claves individualmente y luego haciéndolas opcionales. Y luego, ya sabes, este no está modificado. Simplemente devolvemos cualquier tipo que esté aquí. Ahora todas las claves de persona son parciales, básicamente opcionales. Y si quieres hacerlas requeridas, ¿verdad? Ahora es parcial. ¿Qué pasa si quieres hacerlas requeridas? Entonces simplemente usaremos el menos delante del modificador. Estos son todos modificadores. Entonces el signo de interrogación, es de solo lectura, todos estos se llaman modificadores. Entonces, si agregamos un menos, entonces estaríamos negando el propósito inicial. Entonces ahora estamos pasando parcial, esto es opcional. Ahora estamos usando menos. Ahora todos serán requeridos. Lo mismo ocurre con no de solo lectura. Así que ya teníamos persona de solo lectura, esto es de solo lectura. Y si agregamos el menos delante de solo lectura, ahora esto sería, todos serían requeridos.

11. Comprendiendo los Tipos Condicionales en TypeScript

Short description:

Ahora profundicemos en los tipos condicionales. Son similares a los operadores ternarios y se utilizan para devolver tipos no vacíos de una unión de tipos. Al utilizar la palabra clave extends y la sintaxis del operador ternario, podemos verificar si un tipo se extiende de null o undefined y devolver el resultado correspondiente. Veamos cómo funciona. Comenzamos con un tipo de unión y verificamos individualmente cada tipo. Si un tipo se extiende de null o undefined, devuelve never. De lo contrario, devuelve el tipo original. Esto nos permite filtrar los tipos null y undefined de una unión y devolver solo los tipos no vacíos.

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í.

12. Explorando los Tipos Condicionales en TypeScript

Short description:

Si undefined se extiende de null o undefined, entonces devolverá never. Y lo mismo, si null se extiende de null o undefined, sí, se extiende, por lo que devolverá never. Si es un Y, ¿verdad? Si es una intersección, ahora todo será lineal. Así es como obtenemos tipos no vacíos. Esta es la sintaxis que tenemos para los tipos condicionales.

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.

13. Excluyendo Tipos con Tipos Condicionales

Short description:

Podemos usar tipos condicionales para excluir tipos específicos de una unión. Al declarar un tipo de exclusión y pasar los tipos que queremos ignorar, podemos eliminarlos del tipo resultante. Los tipos condicionales nos permiten verificar si el tipo base se extiende del tipo de exclusión y devolver el resultado apropiado. Esta poderosa característica mejora la seguridad de tipos y garantiza que solo se incluyan los tipos deseados.

Aquí tenemos una lista de estados. Queremos excluir, así que declaramos un tipo de exclusión, que será un tipo de errores en el tipo base y una unión de tipos de exclusión. Esto excluirá lo que sea que pasemos. Similar a omitir, pero esto es para tipos de unión. Omitir 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 ignorar, los tipos literales que queremos ignorar. Estos dos. Ahora esto devolverá el estado de progreso pendiente. Eliminará los estados negativos. Básicamente, es la misma sintaxis. Así que verificamos si el tipo base se extiende del tipo de exclusión. Si se extiende, entonces no devolvemos nada. Básicamente, devolveremos never, y si no está en estos tipos posibles, entonces devolvemos el tipo base. Se verificará individualmente, se verificará para pendiente y advertencia, pendiente y error, en progreso advertencia, en progreso error, todas las condiciones se verificarán, y se devolverá en consecuencia. Así que esos son los tipos condicionales.

14. Combinando Tipos de Mapa y Tipos Condicionales

Short description:

Ahora combinemos los tipos de mapa y los tipos condicionales para crear un tipo de utilidad personalizado. Queremos crear un tipo similar a omitir, pero con una funcionalidad diferente. En lugar de proporcionar las claves exactas para omitir, queremos especificar los tipos de claves que queremos eliminar. Mediante el uso del tipo de mapa, podemos recorrer el objeto base y verificar el tipo de cada clave. Si el tipo se extiende del tipo a eliminar, devolvemos la propia clave. De lo contrario, devolvemos never. Esto nos permite convertir el tipo a las claves reales y crear el tipo de utilidad personalizado deseado.

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.

15. Tipos de Utilidad Personalizados y Palabra Clave Infer

Short description:

Se utilizan tipos reales para omitir tipos específicos y crear tipos de utilidad personalizados. La palabra clave infer extrae tipos y los almacena en un tipo diferente para usar en tipos condicionales. Podemos pasar un tipo de función para verificar si se extiende de una función específica e inferir el tipo de retorno. Estos conceptos mejoran el poder y la flexibilidad del sistema de tipos de TypeScript.

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.

16. Inferencia y Tipos de Retorno de Plantilla

Short description:

Podemos inferir el tipo de retorno de una función utilizando la función de inferencia de tipos de TypeScript. Al pasar el tipo de función, TypeScript puede inferir el tipo de retorno en función de la implementación de la función. De manera similar, podemos inferir los tipos de propiedades de un componente utilizando la utilidad de tipo de componente en React. Al verificar si la propiedad pasada es del tipo de componente, podemos inferir el tipo de propiedad. Esto nos permite obtener todos los tipos de propiedades de un componente. Por último, exploremos los tipos de retorno de plantilla, que se utilizan para definir el tipo de retorno de un componente de función. Al especificar los tipos de entrada y utilizar firmas de índice, podemos crear definiciones de tipo más precisas para nuestros componentes.

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.

17. Extensión de Color y Restricción de Márgenes

Short description:

Podemos extender la propiedad de color para incluir cualquier color en formato hash. El margen puede ser cualquier cadena, pero queremos restringirlo a propiedades de espaciado reales como 12 píxeles, 12 rem, uno rem, dos em. Utilizamos plantillas de cadena para imponer estas restricciones.

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.

18. Restricción de Márgenes con Plantillas de Cadena

Short description:

Los márgenes en CSS se pueden restringir utilizando plantillas de cadena en TypeScript. Al definir las unidades y valores aceptables dentro de las comillas invertidas, puedes imponer restricciones en los valores de margen. Por ejemplo, los márgenes deben comenzar con un número y terminar con píxel, rem o em. Si un valor no cumple con estos requisitos, TypeScript mostrará un error. Esta característica mejora la experiencia del desarrollador al proporcionar sugerencias de autocompletado y advertencias en tiempo de compilación para la comprobación de tipos.

¿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. (?) (?) (?) (?) (?) (?)

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
We don't think of React as shipping its own types. But React's types are a core part of the framework - overseen by the React team, and co-ordinated with React's major releases.In this live coding talk, we'll look at all the types you've been missing out on. How do you get the props type from a component? How do you know what ref a component takes? Should you use React.FC? And what's the deal with JSX.Element?You'll walk away with a bunch of exciting ideas to take to your React applications, and hopefully a new appreciation for the wonders of React and TypeScript working together.
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
The more you keep working on an application, the more complicated its routing becomes, and the easier it is to make a mistake. ""Was the route named users or was it user?"", ""Did it have an id param or was it userId?"". If only TypeScript could tell you what are the possible names and params. If only you didn't have to write a single route anymore and let a plugin do it for you. In this talk we will go through what it took to bring automatically typed routes for Vue Router.
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
I'll dive into the internals of Nuxt to describe how we've built a TypeScript-first framework that is deeply integrated with the user's IDE and type checking setup to offer end-to-end full-stack type safety, hints for layouts, middleware and more, typed runtime configuration options and even typed routing. Plus, I'll highlight what I'm most excited about doing in the days to come and how TypeScript makes that possible not just for us but for any library author.
React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Top Content
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
TypeScript Congress 2022TypeScript Congress 2022
10 min
How to properly handle URL slug changes in Next.js
Top Content
If you're using a headless CMS for storing content, you also work with URL slugs, the last parts of any URL. The problem is, content editors are able to freely change the slugs which can cause 404 errors, lost page ranks, broken links, and in the end confused visitors on your site. In this talk, I will present a solution for keeping a history of URL slugs in the CMS and explain how to implement a proper redirect mechanism (using TypeScript!) for dynamically generated pages on a Next.js website.

Add to the talk notes: https://github.com/ondrabus/kontent-boilerplate-next-js-ts-congress-2022 

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2022React Advanced Conference 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Workshop
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practice TypeScript Techniques Building React Server Components App
Workshop
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
 
During the workshop, you will:
- Maximize code maintainability and scalability with advanced TypeScript practices
- Unleash the performance benefits of React Server Components, surpassing traditional approaches
- Turbocharge your TypeScript with the power of Mapped Types
- Make your TypeScript types more secure with Opaque Types
- Explore the power of Template Literal Types when using Mapped Types
 
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
 
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced
TestJS Summit 2023TestJS Summit 2023
78 min
Mastering Node.js Test Runner
Workshop
Node.js test runner is modern, fast, and doesn't require additional libraries, but understanding and using it well can be tricky. You will learn how to use Node.js test runner to its full potential. We'll show you how it compares to other tools, how to set it up, and how to run your tests effectively. During the workshop, we'll do exercises to help you get comfortable with filtering, using native assertions, running tests in parallel, using CLI, and more. We'll also talk about working with TypeScript, making custom reports, and code coverage.