Desafio TypeScript

Usando tipos de terceiros com @types

Enunciado

Instale a biblioteca lodash e seus tipos via @types/lodash. Crie um arquivo lodash-exemplo.ts que importe a função chunk do lodash e a use para dividir um array [1, 2, 3, 4, 5, 6] em chunks de tamanho 2. Imprima o resultado. Certifique-se de que os tipos estão corretos e que o código compila sem erros.

Requisitos

  • O projeto deve ter lodash e @types/lodash instalados (simule com npm install lodash @types/lodash).
  • O arquivo deve importar chunk de lodash e usá-la com um array de números.
  • O programa deve imprimir o array de chunks.

Código inicial

// lodash-exemplo.ts
// TODO: importe chunk de 'lodash' e use para dividir o array

// Execute: npm install lodash @types/lodash
// Depois: npx tsc lodash-exemplo.ts && node lodash-exemplo.js

Saída esperada

[[1, 2], [3, 4], [5, 6]]
Ver dica

A função chunk do lodash recebe um array e um tamanho. Os tipos estão em @types/lodash.

Mostrar solução 
// lodash-exemplo.ts
import { chunk } from 'lodash';

const numeros = [1, 2, 3, 4, 5, 6];
const chunks = chunk(numeros, 2);

console.log(chunks);

Passo a passo

  1. Instale as dependências: npm install lodash @types/lodash. O pacote @types/lodash fornece as declarações de tipo.
  2. No arquivo lodash-exemplo.ts, importe a função chunk do módulo lodash.
  3. Crie um array de números [1, 2, 3, 4, 5, 6].
  4. Chame chunk(numeros, 2) para dividir o array em subarrays de tamanho 2.
  5. Imprima o resultado, que é [[1, 2], [3, 4], [5, 6]].

Por que funciona

O TypeScript usa os arquivos .d.ts fornecidos por @types/lodash para entender a assinatura da função chunk. Assim, o compilador sabe que chunk recebe um array e um número, e retorna um array de arrays. Em tempo de execução, o JavaScript do lodash é usado.

Erros comuns

  • Não instalar @types/lodash: o TypeScript reclamará que não encontrou declarações para o módulo 'lodash'.
  • Importar incorretamente: import chunk from 'lodash' pode não funcionar dependendo da configuração, pois lodash exporta funções nomeadas. Use import { chunk } from 'lodash'.
  • Tipos incompatíveis: passar um array de strings para chunk quando a declaração espera números? Na verdade, chunk é genérico, mas se você não tipar corretamente, pode ter surpresas.

Outra forma de resolver

Você pode importar o lodash inteiro: import _ from 'lodash' e usar _.chunk(...). Isso é útil se precisar de várias funções. No entanto, importações nomeadas ajudam no tree-shaking.

Saída esperada

[[1, 2], [3, 4], [5, 6]]