TypeScript: Union

Dando continuidade a minha serie de artigos sobre TypeScript, hoje eu irei apresentar o Union.

O Union é um dos tipos do TS que nos permite combinar um ou mais tipos de types. Sua sintaxe é um pouco diferente do que eu demonstrei nos últimos artigos, ele utiliza um barra vertical para passar os tipos que ele irá aceitar.

Sintaxe:

(tipo1| tipo2 ...)

Para ficar mais claro, vamos criar alguns exemplos práticos:

let exemploVariavel: (string | number);
exemploVariavel = 123;
console.log(exemploVariavel); //123
exemploVariavel = "ABC";
console.log(exemploVariavel); //ABC

Note que a variável exemploVariavel aceitou os dois valores: 123 (number) e “ABC” string.

Mas ai vem aquela dúvida, ele só aceita dois types? Não, nós podemos passar mais de um type para ele.

let exemploVariavel: (string | number | boolean);
exemploVariavel = 123;
console.log(exemploVariavel); //123
exemploVariavel = "ABC";
console.log(exemploVariavel); //ABC
exemploVariavel = true;
console.log(exemploVariavel); //true

Nós podemos utilizar ele também como parâmetro de função.

function deleteTeste(usuario: string | string[]) {
    if (typeof usuario == "string") {
        console.log(usuario, "deletado");
        //função para deletar um registro
    } else {
        var i;
        for (i = 0; i < usuario.length; i++) {
            //função para deletar mais de um registro
            console.log(usuario[i], "deletado");
        }
    }
}

Nesse exemplo nós podemos passar um registro para o nosso método deleteTeste ou passar um array de registros para serem deletados.

E para finalizar esse artigo, nós podemos utilizar ele também com Arrays.

var arr: (number[] | string[]);
var i: number;
arr = [1, 2, 4]

for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

arr = ["A", "B", "C", "D"]

for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

Resultado:

Image for post
Resultado union TypeScript

Bom, a ideia desse artigo era apresentar mais um dos types do TS 😉 Espero que tenham gostado e até um próximo artigo pessoal.

Referência: https://medium.com/xp-inc/typescript-union-4c6899ccf408