TypeScript Academy · Aula

Spread em Matrizes e Objetos

Espalhe valores preservando os tipos corretos.

Spread em Matrizes e Objetos é 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.

Expandir Valores

O operador de expansão ... copia elementos de um vetor ou propriedades de um objeto para um novo vetor ou objeto. O TypeScript acompanha o tipo resultante com precisão, o que é fundamental para atualizações imutáveis.

Expansão de Vetores

Expanda dois vetores em um novo vetor para concatená-los. O tipo dos elementos do resultado é a união dos tipos de elementos das duas fontes.

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

Combinar Expansões e Literais

Você pode intercalar elementos expandidos com valores individuais. A ordem é preservada exatamente como foi escrita.

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

Tipos dos Elementos Expandidos

Quando as fontes expandidas têm tipos de elementos diferentes, o resultado é um vetor cuja tipagem é a união desses tipos. Anote o tipo ou deixe a inferência fazer o trabalho.

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

Expansão de Objetos

A expansão de objetos copia propriedades enumeráveis próprias para um novo objeto. O tipo resultante combina as estruturas das fontes.

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

Expansão que Sobrescreve Propriedades

Quando as chaves entram em conflito, a última vence. Expanda um objeto e depois substitua campos específicos — essa é a base das atualizações imutáveis.

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

A Ordem Determina o Vencedor

A precedência das propriedades segue a ordem das fontes. Coloque as substituições depois da expansão para que vençam; antes dela, a expansão as sobrescreverá.

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

Tipo de uma Propriedade Sobrescrita

Se uma substituição mudar o tipo de uma propriedade, o tipo resultante refletirá o novo tipo. O TypeScript restringe o tipo à ocorrência mais recente.

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

A propagação é uma cópia superficial

A propagação copia apenas um nível. Objetos aninhados são compartilhados por referência, portanto alterar um campo aninhado afeta ambas as cópias. Faça a propagação do objeto aninhado também para obter uma cópia mais profunda.

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

Propagação e readonly

Propagar um vetor ou objeto readonly produz uma cópia nova e mutável. O modificador readonly não é mantido na propagação, pois você está criando um valor novo.

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

Padrão de atualização imutável

A propagação é a forma idiomática de atualizar o estado sem mutação: copie o objeto antigo, sobrescreva os campos alterados e retorne o objeto novo.

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

Verificação rápida

Teste sua compreensão dos tipos de propagação e da precedência.

Recapitulação

A propagação copia elementos de vetores ou propriedades de objetos para um valor novo. A propagação de vetores concatena os elementos com um tipo de união; a propagação de objetos combina estruturas e, quando há colisões de keys, a última ocorrência vence. A propagação é uma cópia superficial — objetos aninhados continuam compartilhados — e produz valores novos e mutáveis até mesmo a partir de fontes readonly. Esse é o padrão idiomático de atualização imutável.

Perguntas Frequentes

A aula “Spread em Matrizes e Objetos” é grátis?

Sim — o texto completo de “Spread em Matrizes e 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 “Spread em Matrizes e Objetos”?

Espalhe valores preservando os tipos corretos. 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 “Spread em Matrizes e 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