Trabajo con archivos ZIP en TypeScript: guía completa

Trabajo con archivos ZIP en TypeScript

En el desarrollo web moderno, a menudo surge la necesidad de trabajar con archivos: cargar varios archivos en un solo paquete, descomprimir configuraciones o crear copias de seguridad de datos. TypeScript, como superconjunto de JavaScript con tipado estático, proporciona herramientas convenientes para esta tarea. En este artículo, analizaremos dos bibliotecas populares: JSZip y adm-zip, y aprenderemos a crear, leer y modificar archivos ZIP.

¿Por qué TypeScript?

TypeScript agrega tipado estricto, lo que es especialmente útil al trabajar con datos binarios y estructuras de archivos complejas. Obtiene autocompletado en el IDE, detección temprana de errores y código claro. Para trabajar con ZIP, necesitará instalar una de las bibliotecas a través de npm:

npm install jszipnpm install @types/jszip  // para soporte de TypeScript

o

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

Biblioteca JSZip: creación de un archivo

JSZip es la biblioteca más popular para trabajar con ZIP en el navegador y Node.js. Funciona de forma asíncrona y admite la adición de archivos, carpetas e incluso la generación del archivo en formato Blob.

Creación de un archivo simple

Veamos un ejemplo donde creamos un archivo que contiene un archivo de texto y una carpeta con una imagen:

import JSZip from 'jszip';

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

  // Agregamos un archivo de texto  zip.file('hello.txt', '¡Hola, mundo!');

  // Creamos una carpeta y agregamos un archivo  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // Generamos el archivo como Blob  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

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

En este ejemplo, creamos un archivo con dos archivos. Observe la opción { base64: true } — permite agregar datos binarios codificados en base64.

Lectura y descompresión de un archivo con JSZip

A menudo es necesario leer un archivo ZIP existente, obtenido del usuario o del servidor. JSZip puede cargar un archivo desde Blob, ArrayBuffer o una cadena base64.

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

    // Obtenemos la lista de archivos    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('Archivos en el ZIP:', fileList);

    // Extraemos el contenido de un archivo específico    const content = await zip.file('hello.txt')?.async('string');    console.log('Contenido de hello.txt:', content);  } catch (error) {    console.error('Error al leer el archivo:', error);  }}

// Ejemplo con carga de archivo mediante inputdocument.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

El método async('string') devuelve el contenido del archivo como una cadena. Para datos binarios, use 'arraybuffer' o 'uint8array'.

Biblioteca adm-zip: trabajo en Node.js

Si está desarrollando una aplicación de servidor en Node.js, adm-zip puede ser una opción más conveniente. Esta biblioteca es síncrona (pero también tiene métodos asíncronos) y admite la escritura del archivo directamente en el sistema de archivos.

Creación de un archivo con adm-zip

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

function createArchiveToDisk(): void {  const