TypeScript Academy · Aula

Desestruturação de Matrizes e Tuplas

Desestruture matrizes e tuplas com os tipos corretos de elementos.

Desestruturação de Matrizes e Tuplas é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 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 por Posição

A desestruturação de vetores vincula variáveis por posição, e não por nome. Com tuplas, cada posição tem um tipo específico, proporcionando uma extração ordenada e precisa.

Desestruturação Básica de Vetores

Colchetes à esquerda extraem elementos pela ordem dos índices. Em um vetor comum, todas as vinculações compartilham o tipo de elemento do vetor.

const nums = [10, 20, 30]
const [first, second] = nums
console.log(first + second) // 30

Anotar um Padrão de Tupla

Anote fornecendo um tipo de tupla para a vinculação depois do padrão. Cada posição recebe seu próprio tipo — aqui, primeiro um número e depois uma cadeia de caracteres.

const [a, b]: [number, string] = [1, "two"]
console.log(a, b) // 1 two

Os Tipos Seguem a Posição

Em uma tupla, o tipo de cada índice é fixo. A primeira vinculação é um número e a segunda é uma cadeia de caracteres — trocar os valores causaria um erro de tipo.

const pair: [string, number] = ["age", 30]
const [label, value] = pair
console.log(label.toUpperCase(), value + 1)

Ignorar Elementos com Vírgulas

Deixe um espaço usando uma posição vazia entre vírgulas para ignorar uma posição de que não precisa. O tipo do elemento ignorado é simplesmente desconsiderado.

const rgb: [number, number, number] = [255, 128, 0]
const [red, , blue] = rgb
console.log(red, blue) // 255 0

Desestruturação com o Restante

Um elemento de restante reúne os itens restantes em um vetor. Em uma tupla, seu tipo representa as posições que sobraram.

const [head, ...tail] = [1, 2, 3, 4]
console.log(head)        // 1
console.log(tail.length) // 3

Tipo do Restante a Partir de uma Tupla

Quando você desestrutura uma tupla com um restante, o TypeScript infere a variável de restante como uma tupla dos elementos restantes, preservando seus tipos.

const data: [string, number, boolean] = ["x", 1, true]
const [name, ...rest] = data
// rest is [number, boolean]
console.log(rest[0], rest[1])

Trocar Variáveis

Um truque interessante possibilitado pela desestruturação de vetores: trocar dois valores sem uma variável temporária. Os tipos precisam ser compatíveis para que a troca seja validada.

let x = 1, y = 2
;[x, y] = [y, x]
console.log(x, y) // 2 1

Desestruturação em Retornos de Funções

Funções que retornam tuplas combinam muito bem com desestruturação — o padrão do React useState é exatamente esse.

function useCounter(): [number, () => number] {
  let n = 0
  return [n, () => ++n]
}
const [count, inc] = useCounter()
console.log(count, inc())

Valores Padrão em Padrões de Vetor

Forneça um valor padrão para uma posição que possa ser undefined. O valor padrão só se aplica quando o elemento está ausente ou é undefined.

const [a = 0, b = 0] = [5]
console.log(a, b) // 5 0

Desestruturação Aninhada de Vetores

Você pode desestruturar vetores dentro de vetores em uma única instrução. Os tipos são aninhados de forma correspondente, mas leve a legibilidade em consideração em estruturas profundas.

const grid: [[number, number], [number, number]] = [[1, 2], [3, 4]]
const [[a, b], [c, d]] = grid
console.log(a, b, c, d) // 1 2 3 4

Verificação rápida

Teste sua compreensão sobre a desestruturação de vetores e tuplas.

Recapitulação

A desestruturação de vetores vincula por posição; anote com um tipo de tupla depois do padrão para que cada índice receba seu próprio tipo. Ignore elementos com posições vazias entre vírgulas, reúna o restante com um elemento de restante (que continua sendo uma tupla das posições restantes) e forneça valores padrão para posições possivelmente ausentes. Retornos de tupla combinados com desestruturação dão força a padrões como useState.

Perguntas Frequentes

A aula “Desestruturação de Matrizes e Tuplas” é grátis?

Sim — o texto completo de “Desestruturação de Matrizes e Tuplas” é 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 “Desestruturação de Matrizes e Tuplas”?

Desestruture matrizes e tuplas com os tipos corretos de elementos. 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 2 de 4.

Quanto tempo leva a aula “Desestruturação de Matrizes e Tuplas”?

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