TypeScript Academy · Aula

Tipos na Desestruturação de Objetos

Defina os tipos das propriedades de objetos desestruturados sem confundir a sintaxe de renomeação.

Tipos na Desestruturação de Objetos é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

Desestruturação e tipos

A desestruturação de objetos extrai propriedades de um objeto para variáveis locais. Com o TypeScript, você pode anotar a estrutura desestruturada — mas a sintaxe tem uma armadilha conhecida. Vamos fazer isso corretamente.

Desestruturação básica de objetos

A desestruturação simples extrai propriedades pelo nome. O TypeScript infere o tipo de cada variável a partir do objeto de origem.

const user = { name: "Ada", age: 36 }
const { name, age } = user
console.log(name, age) // Ada 36

Anotando o padrão inteiro

Para anotar variáveis desestruturadas, você coloca o tipo após todo o padrão, descrevendo a estrutura do objeto — não após cada variável.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Desestruturando parâmetros de funções

Um padrão muito comum: desestruturar um objeto de parâmetros diretamente na assinatura, anotando sua estrutura. Dentro do corpo, name e id são variáveis locais tipadas.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

A armadilha da confusão com dois-pontos

Na desestruturação, dois-pontos significam renomear, não anotar. Escrever { name: string } cria uma variável chamada string que contém o valor de name — quase nunca é isso que você deseja.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Renomear e Anotar em Conjunto

Se precisar renomear e tipar, renomeie com dois-pontos e depois anote o padrão inteiro. A anotação da estrutura ainda usa os nomes de propriedade originais.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Usar um Tipo Nomeado

Para qualquer estrutura que não seja trivial, prefira uma interface nomeada a uma estrutura em linha. A leitura fica melhor e ela pode ser reutilizada.

interface User {
  name: string
  age: number
}
function show({ name, age }: User) {
  console.log(name + " is " + age)
}
show({ name: "Ada", age: 36 })

Desestruturar Apenas Algumas Propriedades

Você não precisa extrair todos os campos. Escolha o que precisa; o tipo do restante do objeto é ignorado para as variáveis locais que você cria.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Desestruturar Valores de Retorno

Quando uma função retorna um objeto, você pode desestruturar o resultado imediatamente. Os tipos são transferidos do tipo de retorno para as variáveis locais.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Coletar o Restante

Um padrão de restante reúne as propriedades restantes em um novo objeto. O TypeScript o tipa como a origem menos as chaves extraídas.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Recapitulação: Em Linha ou Nomeado

Estruturas em linha são adequadas para padrões pequenos e usados uma única vez. Prefira um tipo nomeado assim que a estrutura crescer ou se repetir. E lembre-se: os dois-pontos renomeiam; a anotação vem depois da chave de fechamento.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Verificação rápida

Teste sua compreensão sobre a desestruturação tipada de objetos.

Recapitulação

Anotações de tipo em desestruturações vêm depois do padrão inteiro e descrevem a estrutura do objeto. Os dois-pontos dentro do padrão renomeiam uma vinculação, não a anotam. Desestruture parâmetros e valores de retorno de funções usando anotações de estrutura ou tipos nomeados, extraia apenas os campos necessários e use um padrão de restante para coletar o que sobrar.

Perguntas Frequentes

A aula “Tipos na Desestruturação de Objetos” é grátis?

Sim — o texto completo de “Tipos na Desestruturação de Objetos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Tipos na Desestruturação de Objetos”?

Defina os tipos das propriedades de objetos desestruturados sem confundir a sintaxe de renomeação. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Tipos na Desestruturação de Objetos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para TypeScript Academy