Dica de Código: Desestruturação em TypeScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 11 Horas 25 Min 29 Seg Tempo restante da oferta: 11 25 29 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Dica de Código: Desestruturação em TypeScript [ Dica de código ](https://www.treinaweb.com.br/blog/categoria/dica-de-codigo) [ TypeScript ](https://www.treinaweb.com.br/blog/categoria/typescript) # Dica de Código: Desestruturação em TypeScript Aprenda como a desestruturação em TypeScript simplifica o código e torna-o mais legível. Técnica essencial para desenvolvedores! [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-TS.jpg) 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. [ ![TypeScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/typescript.svg) Curso TypeScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/typescript-fundamentos) ## Desestruturaçã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: ```ts // 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: ```ts // 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'] ``` [ ![TypeScript - Avançado](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/typescript.svg) Curso TypeScript - Avançado Conhecer o curso ](https://www.treinaweb.com.br/curso/typescript-avancado) ## Desestruturaçã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: ```ts // 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. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/sessao-mentoria.jpg) ](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?forma=cartao) - [ #TypeScript ](https://www.treinaweb.com.br/blog/tag/typescript) - [ #dica de código ](https://www.treinaweb.com.br/blog/tag/dica-de-codigo) - [ #dica de código TypeScript ](https://www.treinaweb.com.br/blog/tag/dica-de-codigo-typescript) - [ #TS ](https://www.treinaweb.com.br/blog/tag/ts) - [ #Desestruturação ](https://www.treinaweb.com.br/blog/tag/desestruturacao) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## Wesley Gado Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-para-o-react) Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-TS-400x280.jpg) [ Dica de código ](https://www.treinaweb.com.br/blog/categoria/dica-de-codigo) 3 anos atrás ## [ Dica de Código: Métodos para trabalhar com arrays em TypeScript ](https://www.treinaweb.com.br/blog/dica-de-codigo-metodos-para-trabalhar-com-arrays-em-typescript) Desvende os segredos dos arrays em JavaScript! Aprenda métodos poderosos para manipulação eficiente. Torne-se um mestre na arte do desenvolvimento. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-JAVA-1-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Dica de Código: Programação Assíncrona com CompletableFuture no Java ](https://www.treinaweb.com.br/blog/dica-de-codigo-programacao-assincrona-com-completablefuture-no-java) Domine a programação assíncrona com CompletableFuture no Java e impulsione o desempenho de sua aplicação. Leia agora! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-PHP-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 3 anos atrás ## [ Dica de Código: Enums no PHP ](https://www.treinaweb.com.br/blog/dica-de-codigo-enums-no-php) Descubra como os enums no PHP podem transformar seu código, tornando-o mais claro e eficiente. Otimize seu código agora! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-PHP-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 3 anos atrás ## [ Dica de Código: Propriedades Somente Leitura no PHP ](https://www.treinaweb.com.br/blog/dica-de-codigo-propriedades-somente-leitura-no-php) Descubra como utilizar as propriedades somente leitura no PHP 8.1 para criar código mais seguro e confiável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-JAVA-1-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Dica de Código: Principais coleções do Java ](https://www.treinaweb.com.br/blog/dica-de-codigo-principais-colecoes-do-java) Explore as poderosas ferramentas do Java Collections Framework: List, Set e Map. Domine a manipulação de dados com eficiência! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-TS-400x280.jpg) [ Dica de código ](https://www.treinaweb.com.br/blog/categoria/dica-de-codigo) 3 anos atrás ## [ Dica de Código: Utilizando Enums com TypeScript ](https://www.treinaweb.com.br/blog/dica-de-codigo-utilizando-enums-com-typescript) Desvende o poder dos Enums em TypeScript: código mais claro e robusto! Simplifique switch cases e reforce tipagem de objetos. Confira! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-PHP-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 3 anos atrás ## [ Dica de Código: Arrow Functions no PHP ](https://www.treinaweb.com.br/blog/dica-de-codigo-arrow-functions-no-php) Aprenda a usar Arrow Functions no PHP para tornar seu código mais conciso e poderoso. Confira exemplos práticos e dicas essenciais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-HTML-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Dica de Código: Conheça a propriedade CSS text-decoration ](https://www.treinaweb.com.br/blog/dica-de-codigo-conheca-a-propriedade-css-text-decoration) Descubra o poder da propriedade CSS text-decoration: estilos únicos para seus textos front-end! Explore posições, estilos e personalizações! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-JAVA-1-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Dica de Código: Expressões Lambda em Java ](https://www.treinaweb.com.br/blog/dica-de-codigo-expressoes-lambda-em-java) Aprenda como as expressões lambda simplificam o código Java ao criar instâncias de interfaces funcionais e veremos alguns exemplos de uso. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-JAVA-1-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Dica de Código: Trabalhando com Data e Hora no Java ](https://www.treinaweb.com.br/blog/dica-de-codigo-trabalhando-com-data-e-hora-no-java) Nessa dica de código veremos como podemos trabalhar com data e hora no Java, para isso veremos as classes do pacote java.time. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/temas-wordpress-400x280.jpg) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 10 anos atrás ## [ Personalizar temas Wordpress sem alterar o código-fonte ](https://www.treinaweb.com.br/blog/personalizar-temas-wordpress-sem-alterar-o-codigo-fonte) O Wordpress é o CMS mais usado do mundo. Veja algumas dicas sobre como personalizar seu site/blog utilizando temas premium. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **11h 25min 29s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58