Desafio TypeScript

Declaration merging e interface vs type

Enunciado

Crie uma interface Config com url: string. Depois, declare novamente Config adicionando timeout: number. Crie um objeto config que atenda à interface mesclada e imprima URL: https://api.com, Timeout: 5000. Em seguida, crie um type Ponto com x e y e imprima a soma das coordenadas.

Requisitos

  • A interface Config deve ser declarada duas vezes e sofrer merging.
  • O objeto config deve ter url e timeout.
  • O type Ponto deve ter x e y numéricos.
  • A saída deve ser exatamente URL: https://api.com, Timeout: 5000 seguida de Soma: 3.

Código inicial

// Declare a interface Config duas vezes

// Crie o objeto config

// Defina o type Ponto

// Crie um ponto e imprima a soma

Saída esperada

URL: https://api.com, Timeout: 5000
Soma: 3
Ver dica

Para o merging, basta declarar interface Config novamente com a nova propriedade. Para o type, use type Ponto = { x: number; y: number }.

Mostrar solução 
// Primeira declaração de Config
interface Config {
  url: string;
}

// Segunda declaração: o TypeScript mescla automaticamente
interface Config {
  timeout: number;
}

// Objeto que atende à interface mesclada
const config: Config = {
  url: "https://api.com",
  timeout: 5000,
};

console.log(`URL: ${config.url}, Timeout: ${config.timeout}`);

// Type alias para um ponto
type Ponto = {
  x: number;
  y: number;
};

const ponto: Ponto = { x: 1, y: 2 };
console.log(`Soma: ${ponto.x + ponto.y}`);

Passo a passo

  1. Declaramos interface Config com url: string.
  2. Declaramos interface Config novamente com timeout: number; o TypeScript mescla as duas, resultando em { url: string; timeout: number }.
  3. Criamos config com ambas as propriedades, respeitando a interface mesclada.
  4. Imprimimos os valores formatados.
  5. Definimos type Ponto com x e y numéricos.
  6. Criamos ponto e imprimimos a soma das coordenadas.

Por que funciona

O declaration merging permite que interfaces com o mesmo nome se combinem, somando seus membros. Já o type cria um alias para uma estrutura, sem possibilidade de merging. Ambos são válidos, mas servem a propósitos diferentes.

Erros comuns

  • Tentar mesclar type com o mesmo nome: type Config = { url: string } e depois type Config = { timeout: number } gera erro de duplicata.
  • Esquecer de incluir timeout no objeto config após o merging: erro de propriedade faltante.
  • Usar interface para uniões: interface X = A | B é inválido; para isso use type.

Outra forma de resolver

Para o Ponto, poderia ser uma interface:

interface Ponto { x: number; y: number }

Mas se precisasse de união, type seria obrigatório.

Saída esperada

URL: https://api.com, Timeout: 5000
Soma: 3