Map, Filter e Reduce com TypeScript: Como Usar Funções de Alta Ordem com Tipos

18/09/2024

Funções de Alta Ordem no TypeScript

No JavaScript, funções de alta ordem como map, filter e reduce são amplamente usadas para manipular arrays de maneira funcional. No TypeScript, essas funções podem ser usadas com a adição de tipagem estática, o que torna o código mais robusto e seguro. Neste artigo, vamos explorar como usar essas funções com tipagem no TypeScript.

O Método map

O método map é usado para transformar os elementos de um array, retornando um novo array com o resultado da transformação de cada elemento. No TypeScript, podemos definir o tipo de entrada e saída de maneira explícita, garantindo que o resultado esteja sempre no formato esperado.

Exemplo de Uso com Tipagem

const numeros: number[] = [1, 2, 3, 4, 5];
const dobrados: number[] = numeros.map((num: number): number => num * 2);

console.log(dobrados); // Saída: [2, 4, 6, 8, 10]

No exemplo acima, o array de números é mapeado para outro array onde cada número é multiplicado por dois. A tipagem number[] garante que tanto o array de entrada quanto o de saída consistam apenas de números.

Exemplo com Objetos

O map também pode ser usado em arrays de objetos. Veja como usar com tipagem de objetos:

interface Usuario {
    nome: string;
    idade: number;
}

const usuarios: Usuario[] = [
    { nome: 'Mauro', idade: 30 },
    { nome: 'João', idade: 25 }
];

const nomes: string[] = usuarios.map((usuario: Usuario): string => usuario.nome);

console.log(nomes); // Saída: ['Mauro', 'João']

Aqui, usamos map para extrair os nomes dos objetos Usuario, garantindo que o array de saída contenha apenas strings.

O Método filter

O método filter é usado para criar um novo array contendo apenas os elementos que atendem a uma determinada condição. No TypeScript, podemos usar filter para trabalhar com tipos de dados complexos e garantir que o resultado seja do tipo correto.

Exemplo de Uso com Tipagem

const idades: number[] = [15, 20, 35, 40];
const maioresDeIdade: number[] = idades.filter((idade: number): boolean => idade >= 18);

console.log(maioresDeIdade); // Saída: [20, 35, 40]

No exemplo acima, o filter retorna apenas os números maiores ou iguais a 18. A tipagem garante que o array de saída contenha apenas números.

Exemplo com Objetos

O filter também pode ser usado para filtrar arrays de objetos com base em condições específicas.

const usuariosAtivos: Usuario[] = usuarios.filter((usuario: Usuario): boolean => usuario.idade >= 30);

console.log(usuariosAtivos); // Saída: [{ nome: 'Mauro', idade: 30 }]

Neste caso, filtramos um array de objetos Usuario para retornar apenas aqueles com idade maior ou igual a 30.

O Método reduce

O método reduce é utilizado para reduzir um array a um único valor, seja somando, concatenando ou aplicando qualquer outra operação. Ele é uma das funções mais poderosas, mas também exige uma definição clara de tipos para garantir que o valor final seja do tipo esperado.

Exemplo de Uso com Tipagem

const valores: number[] = [10, 20, 30];
const somaTotal: number = valores.reduce((acumulador: number, valorAtual: number): number => acumulador + valorAtual, 0);

console.log(somaTotal); // Saída: 60

Neste exemplo, o reduce soma os valores do array valores, retornando a soma total. A tipagem garante que o acumulador e o valor atual sejam números.

Exemplo com Objetos

Também podemos usar reduce para acumular propriedades de objetos em um array. Por exemplo, somar a idade de todos os usuários:

const idadeTotal: number = usuarios.reduce((acumulador: number, usuario: Usuario): number => acumulador + usuario.idade, 0);

console.log(idadeTotal); // Saída: 55

Aqui, usamos reduce para somar as idades de todos os usuários, garantindo que o resultado seja do tipo number.

Boas Práticas no Uso de map, filter e reduce no TypeScript

  • Defina sempre os tipos de entrada e saída: Isso ajuda a prevenir erros e torna o código mais legível, especialmente em projetos grandes.
  • Use interfaces para objetos complexos: Quando trabalhar com arrays de objetos, sempre defina interfaces para garantir que as propriedades sejam manipuladas corretamente.
  • Evite usar reduce em excesso: O reduce é poderoso, mas pode tornar o código confuso se usado de forma excessiva. Considere alternativas como map e filter quando possível.
  • Combine map, filter e reduce: Essas funções podem ser combinadas para criar pipelines funcionais que processam arrays de maneira clara e eficiente.

Conclusão

O uso de funções de alta ordem como map, filter e reduce no TypeScript oferece uma maneira poderosa e eficiente de manipular arrays, garantindo ao mesmo tempo a segurança de tipos. Ao definir tipos explícitos para entrada e saída, você reduz a possibilidade de erros e melhora a legibilidade do código. Essas funções, quando bem utilizadas, podem tornar o seu código mais funcional, limpo e fácil de manter.