DEV Community

Cover image for Unions and Intersection Types en TypeScript
Juan Delgado
Juan Delgado

Posted on

Unions and Intersection Types en TypeScript

Soy una nota nice

A veces debemos de admitir parámetros en una funcion donde el tipo de parametro puede ser por ejemplo String o Number :

function padLef(value: string, padding: any) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return  `${value} ${padding}`;
    }
    throw new Error(`Solo se admiten tipos de valores string o number, no se aceptan ${padding}`)
}

console.log(padLef("Hola mundo", 10));

El problema de declarar el parametro padding como any es que recibe cualquier tipo de valor ya sea true* o hasta un **Array y el compilador de Typescript lo aceptara sin problemas.

Para solucionar este problema utilizaremos las uniones de Typescript, donde solo se aceptaran los tipos que se declaren en el parámetro, no hay limite de uniones puedes utilizar 2 o mas uniones si es necesario:

function padLeft(value: string, padding: string | number) {
  // ...
}

let indentedString = padLeft("Hello world", true);

El compilador de Typescript nos dirá que no se puede aceptar valores Booleanos porque en el parametro solo aceptan valores de tipo string o number

Sindicatos discriminantes

Una técnica común para trabajar con uniones es tener un solo campo que use tipos literales que puede usar para permitir que TypeScript reduzca el posible tipo actual. Por ejemplo, vamos a crear una unión de tres tipos que tienen un solo campo compartido.

type NetworkLoadingState = {
    state: "loading";
  };

  type NetworkFailedState = {
    state: "failed";
    code: number;
  };

  type NetworkSuccessState = {
    state: "success";
    response: {
      title: string;
      duration: number;
      summary: string;
    };
  };

  // Crea un tipo que representa sólo uno de los tipos anteriores
  // pero aún no estás seguro de cuál es.
  type NetworkState =
    | NetworkLoadingState
    | NetworkFailedState
    | NetworkSuccessState;

Todos los tipos anteriores tienen un campo llamado state, y luego también tienen sus propios campos. Dado que el campo state es común en todos los tipos internos NetworkState, es seguro para su código acceder sin una verificación de existencia.

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay