Precisei desenvolver uma funcionalidade em TypeScript para uma aplicação web que filtra jogadores de Quadribol. A aplicação deve fazer uma requisição GET para uma API que retorna informações sobre personagens de Harry Potter que JOGAM quadribol e entao retornar o Nome, Casa e posição.

A solução implementada foi a seguinte:

interface Character {
name: string;
house: string;
playsQuidditch: boolean;
position: string;
quidditchYears: number[];
}

fetch("[<https://coderbyte.com/api/challenges/json/quidditch-list>](<https://coderbyte.com/api/challenges/json/quidditch-list>)")
.then(result => result.json())
.then((characters: Character[]) => {
const quidditchPlayers = characters
.filter(player => player.playsQuidditch)
.map(player => ${player.name} ${player.house} ${player.position});
console.log(JSON.stringify(quidditchPlayers));
});

Passo a Passo da Solução

1. Interface Character

   Define os campos esperados da API (nome, casa, posição, etc).

2. Fetch (requisição GET)

   Usa fetch para buscar os dados da API externa.

3. Conversão para JSON

   O .json() transforma a resposta em um array de objetos Character.

4. Filtragem com .filter

   Seleciona apenas os personagens com playsQuidditch = true.

5. Transformação com .map

   Cria um novo array com strings formatadas:

   Nome Casa Posição
   
   

6. Exibição no Console

   O resultado é exibido em JSON, pronto para uso ou integração.

✅ Resumo

• .filter() → seleciona apenas os jogadores de Quadribol.
• .map() → cria uma lista formatada com Nome, Casa e Posição.
• O resultado final é um array de strings com os jogadores.