Trabalhando com arquivos ZIP em TypeScript: guia completo sobre JSZip e adm-zip

Trabalhando com arquivos ZIP em TypeScript: visão geral das bibliotecas e exemplos práticos

No desenvolvimento web moderno com TypeScript, frequentemente surge a necessidade de trabalhar com arquivos ZIP: compactar arquivos no cliente, extrair dados recebidos do servidor ou criar estruturas complexas de arquivos. Neste artigo, abordaremos as duas bibliotecas mais populares — JSZip e adm-zip, seus recursos, tipagem para TypeScript e forneceremos exemplos práticos de uso.

1. JSZip — biblioteca universal para navegador e Node.js

JSZip é uma biblioteca poderosa para criar, ler e editar arquivos ZIP, funcionando tanto no navegador quanto no ambiente Node.js. Ela possui suporte completo para TypeScript.

Instalação:

npm install jszipnpm install @types/jszip --save-dev

1.1 Criando um arquivo ZIP

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // Adiciona um arquivo de texto  zip.file('hello.txt', 'Hello World!');    // Adiciona uma pasta com arquivo  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // Gera o arquivo (Blob para navegador)  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 Lendo e extraindo um arquivo

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // Itera sobre todos os arquivos  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`Arquivo: ${relativePath}, conteúdo: ${data}`);    }  });}

1.3 Trabalhando com metadados

O JSZip permite gerenciar datas, comentários e permissões de acesso:

const zip = new JSZip();zip.file('document.txt', 'Text content', {  date: new Date('2024-01-01'),  comment: 'Documento importante',  unixPermissions: '644'});

2. adm-zip — alternativa leve para Node.js

adm-zip é uma biblioteca otimizada para o lado do servidor em Node.js. Ela é mais rápida com grandes volumes de dados e possui uma API conveniente.

Instalação:

npm install adm-zipnpm install @types/adm-zip --save-dev

2.1 Criando um arquivo

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // Adiciona arquivo a partir de buffer  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // Adiciona arquivo local  zip.addLocalFile('/path/to/file.txt');    // Adiciona pasta inteira  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // Escreve no disco  zip.writeZip('archive.zip');}

2.2 Extração e descompactação

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // Extrai todos os arquivos para uma pasta  zip.extractAllTo('./extracted', true);    // Obtém lista de entradas  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`Nome: ${entry.entryName}, Tamanho: ${entry.header.size}`);        // Obtém conteúdo    const content = entry.getData().toString('utf8');  });}

3. Comparação das bibliotecas

• JSZip — universal, funciona no navegador e Node.js, suporta geração em streaming, possui API rica para trabalhar com metadados.
• adm-zip — mais rápida em grandes volumes, API mais simples, mas funciona apenas em Node.js.
• Desempenho: adm-zip leva vantagem ao trabalhar com arquivos >100 MB.
• Tipagem: ambas possuem suporte completo para TypeScript.