Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Union Literals

Veamos cómo podemos usar Union con valores literales, y un ejemplo de cómo esto nos puede resultar de ayuda.

Uso de Uniones con Valores Literales en TypeScript

Así como nosotros podemos usar el operador de unión para que una propiedad acepte dos tipos de datos, también podemos usar unión con valores literales, es decir, con cadenas y con números.

Estos valores específicos podemos definirlos cuando una variable solo debe admitir cierto tipo de valores.

Ejemplo de Estados de Usuario

Por ejemplo, queremos indicar que este usuario se encuentra activo y queremos indicar que este otro usuario se encuentra inactivo.

Tal vez luego tengamos un tercer usuario y este valor no se especifique. ¿Cómo solucionamos este error?

Como ya sabemos, solo tenemos que agregar un state. De esta manera ya no hay errores.

Vemos que este primer usuario se encuentra activo, este segundo usuario inactivo y este tercer usuario ABC. Este dato de aquí no tiene sentido, sin embargo, no hay errores porque es un string.

Restringiendo Valores con Unión

¿Cómo podemos indicar en la definición de nuestro tipo que esta variable solo puede tener ciertos valores? Podemos hacerlo usando union e indicando aquí cuáles son los valores posibles para esta propiedad.

Vamos a decir que active está permitido, inactive también, y que todos los usuarios pueden tener solo estos dos estados. Entonces:

active pasará correctamente.
inactive pasará correctamente.
ABC generará un error.

El valor literal ABC no es asignable, nos dice TypeScript, porque el tipo para state en este caso solo admite dos valores: active o inactive. Por lo tanto, esto de aquí está incorrecto.

Beneficios de Usar Tipos en TypeScript

Como vemos, resulta de mucha ayuda usar tipos porque, de esta manera, nosotros podemos detectar errores en nuestro código sin tener que ejecutar nuestro programa.

De repente, alguien estuvo contribuyendo a nuestro proyecto y se equivocó; por ejemplo, en vez de escribir active, puso acttve.

Sin TypeScript, probablemente nadie lo hubiese notado, pero con TypeScript, incluso la misma persona que está haciendo el cambio va a recibir un error.

Entonces, como vemos, TypeScript es de bastante ayuda, nos permite encontrar problemas a tiempo.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Así como nosotros podemos usar el operador de union para que una propiedad acepte dos tipos de datos, también podemos usar union con valores literales, es decir, con cadenas y con números. Estos valores específicos podemos definirlos cuando una variable solo debe admitir cierto tipo de valores. Por ejemplo, queremos indicar que este usuario se encuentra activo y queremos indicar que este otro usuario se encuentra inactivo. Tal vez luego tenemos un tercer usuario y este valor no se especifica. ¿Cómo solucionamos este error? Como ya sabemos, solo tenemos que agregar un state. De esta manera ya no hay errores. Vemos que este primer usuario se encuentra activo, este segundo usuario inactivo y este tercer usuario ABC. Este dato de aquí no tiene sentido, sin embargo no hay errores porque es un string. ¿Cómo podemos indicar en la definición de nuestro tipo que esta variable solo puede tener ciertos valores? Podemos hacerlo usando union e indicando aquí cuáles son los valores posibles para esta propiedad. Vamos a decir que active está permitido inactive también y que todos los usuarios pueden tener solo estos dos estados. Entonces esto pasará correctamente, esto también y aquí vamos a tener un error. El valor literal ABC no es asignable, nos dice para state porque el tipo para state en este caso solo admite dos valores. Dos valores literales, active o inactive. Por lo tanto, esto de aquí está incorrecto. Como vemos resulta de mucha ayuda usar tipos porque de esta manera nosotros podemos detectar errores en nuestro ejemplo. Sin tener que ejecutar nuestro programa, podemos detectar errores en nuestro código, de repente alguien estuvo contribuyendo nuestro proyecto y se equivocó y escribió en vez de active puso la R por ejemplo que en el teclado está cerca la letra E, sin TypeScript probablemente nadie lo hubiese notado, pero con TypeScript, incluso la misma persona que está haciendo el cambio va a recibir un error, entonces como vemos TypeScript es de bastante ayuda, nos ayuda a encontrar problemas a tiempo.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code