Nas lições anteriores, você aprendeu a trabalhar com tipos primitivos como string e booleano. Mas o TypeScript permite que você crie novos tipos a partir dos existentes. Um exemplo disso seria o tipo união. Um tipo union é um tipo que combina dois ou mais outros tipos. Aqui está a sintaxe básica:

type1 | type2 | type3

Vamos dar uma olhada em alguns exemplos para entender melhor o conceito. Aqui está uma variável chamada id com um tipo união para string ou number:

let id: string | number = "user_783";

O valor pode ser atualizado para um número que ainda seja válido para o tipo união:

let id: string | number = 1024;

Se você tentou atribuir outro valor que não seja um string ou number, então o TypeScript exibirá uma mensagem de erro:

// Type 'string[]' is not assignable to type 'string | number'.
let id: string | number = ["Java", "Python"];

Ao trabalhar com tipos union, é importante usar métodos que funcionem para todos os tipos, caso contrário o TypeScript lançará um erro como este:

function getId(id: string | number) {
  // Property 'toUpperCase' does not exist on type 'string | number'.
  return id.toUpperCase();
}

Existe uma solução para isso que envolve restringir a união. Mas você aprenderá mais sobre isso assim como sobre como os tipos união funcionam com aliases de tipo em lições futuras. Tipos union também são úteis ao trabalhar com null e undefined values. Aqui está um exemplo onde uma variável pode conter um string value, ou pode ser null se nenhum valor tiver sido definido ainda:

let username: string | null;

// Type 'number' is not assignable to type 'string | null'.
username = 42;

Neste caso, username pode ser uma string ou null, mas nada mais. Você pode usar null quando quiser intencionalmente representar a ausência de um valor. Aqui está outro exemplo usando undefined:

let score: number | undefined;

score = undefined; 

// Type 'string' is not assignable to type 'number | undefined'.
score = "high";

Neste exemplo, score pode ser um number ou undefined. Você pode usar undefined quando um valor ainda não foi atribuído. Usar tipos união com null e undefined deixa claro quando um valor pode estar ausente, enquanto ainda permite que o TypeScript detecte atribuições inválidas.