União de Tipos em TypeScript

União ou union não são propriamente um tipo de dado, mas permitem combinar ou unir outros tipos. Com as uniões, é possível definir uma variável que pode armazenar valores de dois ou mais tipos:

let id: number | string;
id = "1345dgg5";
console.log(id); // 1345dgg5
id = 234;
console.log(id); // 234

Para definir todos os tipos que uma variável pode representar, esses tipos são separados por uma barra vertical: number | string. Neste exemplo, a variável id pode representar tanto o tipo string, ou seja, uma cadeia de caracteres, quanto um número.

Da mesma forma, é possível usar union para definir os parâmetros de uma função:

function printId(id: number | string) {
  console.log(`Id: ${id}`);
}

let id: string | number = "ruy74";

printId("1h2e3l4o5");
printId(9876);
printId(id);

Neste exemplo, a função printId pode aceitar como parâmetro id valores do tipo number ou string.

O tipo union é adequado para situações em que a lógica de trabalho com todos os tipos combinados é uniforme. No exemplo acima, o valor é incorporado a uma cadeia de caracteres e exibido no console, independentemente do tipo, pois as ações são idênticas.

function printSentence(words: string[] | string) {
  // Se words for uma string
  if (typeof words === "string") {
    console.log(words);
  } else {
    // Se words for um array de strings
    console.log(words.join(" "));
  }
}
printSentence(["Linguagem", "de", "programação", "TypeScript"]);
printSentence("Linguagem de programação JavaScript");

Neste caso, a função printSentence() pode aceitar tanto uma string quanto um array de strings, e então exibe os valores no console. Dependendo do tipo de dado, as ações são diferentes. Para o array, é utilizado o método words.join(" "), que une todos os elementos do array em uma única string, separados por espaços.