A desestruturação é uma técnica poderosa no TypeScript que permite simplificar e tornar o código mais legível. Com essa abordagem, podemos declarar e atribuir variáveis de forma concisa, especialmente ao lidar com objetos e arrays.
Neste artigo, exploraremos a utilização da desestruturação em objetos e arrays, bem como sua aplicação como parâmetros de função. Veremos como essa técnica pode tornar o código mais eficiente e flexível.
Curso TypeScript - Fundamentos
Conhecer o cursoDesestruturação de objetos
A desestruturação de objetos nos permite extrair diretamente as propriedades de um objeto em variáveis separadas. Isso elimina a necessidade de acessar cada propriedade individualmente, tornando o código mais enxuto e legível.
No exemplo abaixo, temos um objeto chamado carro, com várias propriedades, e demonstraremos como obter suas propriedades usando a desestruturação:
// Temos o seguinte objeto.
const carro = {
modelo: 'Fiesta',
ano: 2015,
cor: 'vermelho',
transmissao: 'manual',
quilometragem: 120223
};
// Código sem desestruturação de objetos.
const modelo = carro.modelo;
const ano = carro.ano;
const cor = carro.cor;
const transmissao = carro.transmissao;
const quilometragem = carro.quilometragem;
console.log(modelo, ano, cor, transmissao, quilometragem);
// 'Fiesta', 2015, 'vermelho', 'manual', 120223
// Código com desestruturação de objetos.
const { modelo, ano, cor, transmissao, quilometragem } = carro;
console.log(modelo, ano, cor, transmissao, quilometragem);
// 'Fiesta', 2015, 'vermelho', 'manual', 120223
Desestruturação com arrays
A desestruturação também pode ser aplicada em arrays, permitindo-nos atribuir os elementos do array a variáveis distintas. Essa abordagem é particularmente útil quando lidamos com listas de valores e queremos extrair seus elementos facilmente.
A seguir, temos um exemplo de um array chamado posicaoDeEquipes, onde mostramos como acessar seus elementos usando a desestruturação:
// Temos o seguinte array.
const posicaoDeEquipes = ['Red Bull', 'Aston Martin', 'Mercedes', 'Ferrari']
// Código sem desestruturação de arrays.
const primeiro = posicaoDeEquipes[0]
const segundo = posicaoDeEquipes[1]
const terceiro = posicaoDeEquipes[2]
const quarto = posicaoDeEquipes[3]
console.log(primeiro, segundo, terceiro, quarto);
// ['Red Bull', 'Aston Martin', 'Mercedes', 'Ferrari']
// Código com desestruturação de arrays.
const [ primeiro, segundo, terceiro, quarto ] = posicaoDeEquipes;
console.log(primeiro, segundo, terceiro, quarto);
// ['Red Bull', 'Aston Martin', 'Mercedes', 'Ferrari']
Curso TypeScript - Avançado
Conhecer o cursoDesestruturação como parâmetros de uma função
Outra aplicação útil da desestruturação é no uso de parâmetros de função. Isso nos permite passar objetos como argumentos e extrair suas propriedades diretamente dentro da função.
No exemplo a seguir, temos uma função exibirEndereco que recebe um objeto com propriedades rua e cep. Demonstraremos como a desestruturação facilita o acesso às propriedades desse objeto:
// Função sem desestruturação.
function exibirEndereco(rua: string, cep: string): void {
console.log(`O endereço cadastrado é: rua: ${rua}, cep: ${cep}`);
}
const endereco = { rua: 'Av. Paulista', cep: '07090580', estado: 'São Paulo' };
exibirEndereco(endereco);
/*
* error: An argument for 'cep' was not provided => como passamos o objeto endereço
* é obrigatório que a função tenha os 3 argumentos.
*/
// Função com desestruturação.
function exibirEndereco({ rua, cep }: { rua: string, cep: string}): void {
console.log(`O endereço cadastrado é: rua: ${rua}, cep: ${cep}`);
}
const endereco = { rua: 'Av. Paulista', cep: '07090580', estado: 'São Paulo' };
exibirEndereco(endereco);
// 'O endereço cadastrado é: rua: Av. Paulista, cep: 07090580'
exibirEndereco({ rua: 'alameda', cep: '070203258' });
// 'O endereço cadastrado é: rua: alameda, cep: 070203258'
Conclusão
Em resumo, a desestruturação é uma poderosa técnica no TypeScript para simplificar o código, tornando-o mais legível e eficiente. Utilize-a em objetos, arrays e como parâmetros de função para extrair valores de forma concisa. Ao adotar a desestruturação, você melhorará a qualidade do seu código e facilitará a colaboração em equipe. Experimente essa abordagem em seus projetos para obter benefícios imediatos em desenvolvimento e manutenção de código.
