Travailler avec les archives ZIP en TypeScript : guide complet

Travailler avec les archives ZIP en TypeScript

Dans le développement web moderne, il est souvent nécessaire de travailler avec des archives : télécharger plusieurs fichiers en un seul paquet, décompresser des configurations ou créer des sauvegardes de données. TypeScript, en tant que surcouche statiquement typée de JavaScript, offre des outils pratiques pour cette tâche. Dans cet article, nous examinerons deux bibliothèques populaires : JSZip et adm-zip, et nous apprendrons à créer, lire et modifier des archives ZIP.

Pourquoi TypeScript ?

TypeScript ajoute un typage strict, ce qui est particulièrement utile pour travailler avec des données binaires et des structures d'archives complexes. Vous bénéficiez de l'autocomplétion dans l'IDE, de la détection précoce des erreurs et d'un code clair. Pour travailler avec ZIP, vous devrez installer l'une des bibliothèques via npm :

npm install jszipnpm install @types/jszip  // pour le support TypeScript

ou

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

Bibliothèque JSZip : création d'une archive

JSZip est la bibliothèque la plus populaire pour travailler avec ZIP dans le navigateur et Node.js. Elle fonctionne de manière asynchrone et prend en charge l'ajout de fichiers, de dossiers et même la génération d'archives au format Blob.

Création d'une archive simple

Regardons un exemple où nous créons une archive contenant un fichier texte et un dossier avec une image :

import JSZip from 'jszip';

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

  // Ajout d'un fichier texte  zip.file('hello.txt', 'Bonjour le monde !');

  // Création d'un dossier et ajout d'un fichier  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // Génération de l'archive en tant que Blob  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

// UtilisationcreateArchive().then(blob => {  // Téléchargement de l'archive  const link = document.createElement('a');  link.href = URL.createObjectURL(blob);  link.download = 'archive.zip';  link.click();});

Dans cet exemple, nous avons créé une archive avec deux fichiers. Notez l'option { base64: true } — elle permet d'ajouter des données binaires encodées en base64.

Lecture et décompression d'une archive avec JSZip

Il est souvent nécessaire de lire un fichier ZIP existant, reçu d'un utilisateur ou d'un serveur. JSZip peut charger une archive à partir d'un Blob, d'un ArrayBuffer ou d'une chaîne base64.

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

    // Obtention de la liste des fichiers    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('Fichiers dans l\'archive :', fileList);

    // Extraction du contenu d'un fichier spécifique    const content = await zip.file('hello.txt')?.async('string');    console.log('Contenu de hello.txt :', content);  } catch (error) {    console.error('Erreur lors de la lecture de l\'archive :', error);  }}

// Exemple avec téléchargement de fichier via inputdocument.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

La méthode async('string') retourne le contenu du fichier sous forme de chaîne. Pour les données binaires, utilisez 'arraybuffer' ou 'uint8array'.

Bibliothèque adm-zip : travail dans Node.js

Si vous développez une application serveur avec Node.js, adm-zip peut être un choix plus pratique. Cette bibliothèque est synchrone (mais propose aussi des méthodes asynchrones) et prend en charge l'écriture directe de l'archive dans le système de fichiers.

Création d'une archive avec adm-zip

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

function createArchiveToDisk(): void {  const