Travailler avec les archives ZIP en TypeScript : guide complet sur JSZip et adm-zip

Travailler avec les archives ZIP en TypeScript : aperçu des bibliothèques et exemples pratiques

Dans le développement web moderne en TypeScript, il est souvent nécessaire de travailler avec des archives ZIP : compresser des fichiers côté client, décompresser des données reçues du serveur ou créer des structures d'archives complexes. Dans cet article, nous examinerons les deux bibliothèques les plus populaires — JSZip et adm-zip, leurs fonctionnalités, le typage pour TypeScript et fournirons des exemples pratiques d'utilisation.

1. JSZip — bibliothèque universelle pour le navigateur et Node.js

JSZip est une bibliothèque puissante pour créer, lire et modifier des archives ZIP, fonctionnant à la fois dans le navigateur et dans l'environnement Node.js. Elle prend entièrement en charge TypeScript.

Installation :

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

1.1 Création d'une archive ZIP

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // Ajout d'un fichier texte  zip.file('hello.txt', 'Hello World!');    // Ajout d'un dossier avec un fichier  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // Génération de l'archive (Blob pour le navigateur)  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 Lecture et décompression d'une archive

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // Parcours de tous les fichiers  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`Fichier : ${relativePath}, contenu : ${data}`);    }  });}

1.3 Travail avec les métadonnées

JSZip permet de gérer les dates, les commentaires et les droits d'accès :

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

2. adm-zip — alternative légère pour Node.js

adm-zip est une bibliothèque optimisée pour la partie serveur sous Node.js. Elle est plus rapide pour les grands volumes de données et dispose d'une API pratique.

Installation :

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

2.1 Création d'une archive

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // Ajout d'un fichier depuis un buffer  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // Ajout d'un fichier local  zip.addLocalFile('/path/to/file.txt');    // Ajout d'un dossier entier  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // Écriture sur le disque  zip.writeZip('archive.zip');}

2.2 Décompression et extraction

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // Extraction de tous les fichiers dans un dossier  zip.extractAllTo('./extracted', true);    // Obtention de la liste des entrées  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`Nom : ${entry.entryName}, Taille : ${entry.header.size}`);        // Obtention du contenu    const content = entry.getData().toString('utf8');  });}

3. Comparaison des bibliothèques

• JSZip — universelle, fonctionne dans le navigateur et Node.js, prend en charge la génération en flux, dispose d'une API riche pour travailler avec les métadonnées.
• adm-zip — plus rapide sur les grands volumes, API plus simple, mais fonctionne uniquement dans Node.js.
• Performances : adm-zip est avantageux pour travailler avec des archives >100 Mo.
• Typage : les deux disposent d'une prise en charge complète de TypeScript.