Operador REST e Desestruturação

Operador REST e Desestruturação

Assim como nas versões mais novas do Javascript (ES6), nós também temos acesso ao operador rest, famoso pelos seus 3 pontinhos:

...valor

Que é amplamente usado para fazer com que uma determinada função aceite um número gigantesco de argumentos, como por exemplo:

function somaTotal(...n: number[]){
 const soma = n.reduce((number, sum) => sum + number);
 console.log('A soma total é: ' + soma);
}

somaTotal(1, 2, 3, 4, 10, 99, 888);

Alí em cima, usamos o operador rest (...n) para indicar que o argumento n pode receber diversos tipos númericos (number), e é obvio que o tanto o JS quanto o TS trata aqueles dados como um array (por isso usamos o number[]).

Vejamos um outro exemplo de uma função que faz o uso do operador rest:

function concatStrings(separator: string, ...strings: string[]): string {
 return strings.join(separator);
}

console.log(concatStrings('-', 'apple', 'banana', 'cherry'));//'apple-banana-cherry'
console.log(concatStrings(' ', 'Hello', 'World'));//'Hello World'

Neste exemplo, o parâmetro separator é um argumento fixo, enquanto ...strings captura todos os argumentos restantes em um array.

Desestruturação com Typescript

Para acessar o link da lição, clique aqui.

No Typescript, podemos fazer o uso do conceito de desestruturação para determinar o tipo de cada dado que será desestruturado.

Nós podemos fazer isso da seguinte forma:

const num = [1, 2, 3, 4, 5];

const [primeiro, segundo, ...restante] = num;

console.log(primeiro);//1
console.log(segundo);//2
console.log(restante);//[3, 4, 5]

A desestruturação também funciona com objetos da seguinte forma:

const pessoaInfo = {
 nome: 'Alice',
 idade: 30,
 pais: 'Brasil',
 ocupacao: 'Advogada'
};

const { nome, ...detalhes } = pessoaInfo;

Com ela nos separamos em pequenas variáveis os elementos que nós queremos 😊

Abaixo temos um exemplo onde combinamos o conceito de desestruturação com o operador rest:

function mostraInfo(nome: string, idade: number, ...adicional: (string | number)[]): void {
 console.log(`Nome: ${nome}`);
 console.log(`Idade: ${idade}`);
 console.log(`Informações Adicionais: ${adicional}`);
}

const informacoes: (string | number)[] = ['Desenvolvedor', 5];
const [trabalho, experiencia] = informacoes;

mostraInfo('John Doe', 25, trabalho, experiencia);

Vejamos agora um outro exemplo onde podemos passar um objeto diretamente para dentro de uma função de forma desestruturada:

function mostraDados({ nome, idade }: { nome: string; idade: number }): string {
 return `Olá ${nome}, parece que você tem ${idade} anos`;
}

console.log(mostraDados({ nome: 'Micilini Roll', idade: 18 }));

Dessa forma a sintaxe fica bem mais limpa, se comparada a alternativa de passar objetos para dentro da função.

Arquivos da lição

Os arquivos desta lição podem ser encontrados no repositório do GitHub por meio deste link.

Conclusão

Nesta lição você aprendeu um pouco mais sobre o uso do operador rest e desestruturação.

Até a próxima 🤩