Saltar al contenido principal
Curso/Fundamentos/Union Types
Volver a Fundamentos

Fundamentos — Leccion 8

·15 min

Union Types

Permite que una variable tenga múltiples tipos.

Union Types

Un union type permite que una variable sea de uno de varios tipos.

typescript
let id: string | number;

id = "abc123";  // OK
id = 123;      // OK
// id = true;  // Error

Con arrays

typescript
let datos: (string | number)[] = [1, "dos", 3, "cuatro"];

Con funciones

typescript
function formatId(id: string | number): string {
  if (typeof id === "string") {
    return id.toUpperCase();
  }
  return id.toString();
}

formatId("abc"); // "ABC"
formatId(123);   // "123"

Type narrowing

TypeScript automáticamente sabe que tipo es después de una condición.

typescript
function procesar(valor: string | number) {
  if (typeof valor === "string") {
    // Aquí TypeScript sabe que valor es string
    valor.toUpperCase();
  } else {
    // Aquí TypeScript sabe que valor es number
    valor.toFixed(2);
  }
}

Literales cómo tipos

typescript
type Dirección = "norte" | "sur" | "este" | "oeste";
let dir: Dirección = "norte";
// dir = "arriba"; // Error

type Resultado = "exito" | "error" | "cargando";
let estado: Resultado = "exito";

Ejercicio pratico

Crea una función 'formatear' que acepte un string o number y retorne un string formateado.

exercise.ts
Loading...
Resultado

Haz clic en "Ejecutar" para ver el resultado...

Curso de TypeScript — Aprende desde cero