Trabalhando com arquivos ZIP em TypeScript: guia completo

Trabalhando com arquivos ZIP em TypeScript

No desenvolvimento web moderno, frequentemente surge a necessidade de trabalhar com arquivos: baixar vários arquivos em um único pacote, extrair configurações ou criar backups de dados. TypeScript, como uma extensão estaticamente tipada sobre JavaScript, fornece ferramentas convenientes para essa tarefa. Neste artigo, veremos duas bibliotecas populares: JSZip e adm-zip, e aprenderemos a criar, ler e modificar arquivos ZIP.

Por que TypeScript?

TypeScript adiciona tipagem estrita, o que é especialmente útil ao trabalhar com dados binários e estruturas complexas de arquivos. Você obtém autocompletar na IDE, detecção precoce de erros e código claro. Para trabalhar com ZIP, você precisará instalar uma das bibliotecas via npm:

npm install jszipnpm install @types/jszip  // para suporte a TypeScript

ou

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

Biblioteca JSZip: criando um arquivo

JSZip é a biblioteca mais popular para trabalhar com ZIP no navegador e Node.js. Ela funciona de forma assíncrona e suporta adicionar arquivos, pastas e até gerar o arquivo no formato Blob.

Criando um arquivo simples

Vejamos um exemplo onde criamos um arquivo contendo um arquivo de texto e uma pasta com uma imagem:

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();

  // Adiciona um arquivo de texto  zip.file('hello.txt', 'Olá, mundo!');

  // Cria uma pasta e adiciona um arquivo  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // Gera o arquivo como Blob  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

// UsocreateArchive().then(blob => {  // Baixa o arquivo  const link = document.createElement('a');  link.href = URL.createObjectURL(blob);  link.download = 'archive.zip';  link.click();});

Neste exemplo, criamos um arquivo com dois arquivos. Observe a opção { base64: true } — ela permite adicionar dados binários codificados em base64.

Lendo e extraindo um arquivo com JSZip

Frequentemente é necessário ler um arquivo ZIP existente, recebido do usuário ou do servidor. JSZip pode carregar um arquivo a partir de Blob, ArrayBuffer ou string base64.

async function readArchive(file: Blob): Promise<void> {  try {    const zip = await JSZip.loadAsync(file);

    // Obtém a lista de arquivos    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('Arquivos no ZIP:', fileList);

    // Extrai o conteúdo de um arquivo específico    const content = await zip.file('hello.txt')?.async('string');    console.log('Conteúdo de hello.txt:', content);  } catch (error) {    console.error('Erro ao ler o arquivo:', error);  }}

// Exemplo com upload de arquivo via inputdocument.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

O método async('string') retorna o conteúdo do arquivo como string. Para dados binários, use 'arraybuffer' ou 'uint8array'.

Biblioteca adm-zip: trabalhando em Node.js

Se você está desenvolvendo uma aplicação servidor em Node.js, adm-zip pode ser uma escolha mais conveniente. Esta biblioteca é síncrona (mas também possui métodos assíncronos) e suporta escrever o arquivo diretamente no sistema de arquivos.

Criando um arquivo com adm-zip

import AdmZip from 'adm-zip';import * as path from 'path';

function createArchiveToDisk(): void {  const