Arbeiten mit ZIP/Archiven in TypeScript: vollständige Anleitung

Arbeiten mit ZIP/Archiven in TypeScript

In der modernen Webentwicklung entsteht oft die Notwendigkeit, mit Archiven zu arbeiten: mehrere Dateien als ein Paket hochladen, Konfigurationen entpacken oder Daten-Backups erstellen. TypeScript, als statisch typisierte Erweiterung von JavaScript, bietet praktische Werkzeuge für diese Aufgabe. In diesem Artikel betrachten wir zwei beliebte Bibliotheken: JSZip und adm-zip, und lernen, ZIP-Archive zu erstellen, zu lesen und zu modifizieren.

Warum TypeScript?

TypeScript fügt strenge Typisierung hinzu, was besonders bei der Arbeit mit Binärdaten und komplexen Archivstrukturen nützlich ist. Sie erhalten Autovervollständigung in der IDE, frühzeitige Fehlererkennung und verständlichen Code. Für die Arbeit mit ZIP müssen Sie eine der Bibliotheken über npm installieren:

npm install jszipnpm install @types/jszip  // für TypeScript-Unterstützung

oder

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

Bibliothek JSZip: Erstellen eines Archivs

JSZip ist die beliebteste Bibliothek für die Arbeit mit ZIP im Browser und Node.js. Sie arbeitet asynchron und unterstützt das Hinzufügen von Dateien, Ordnern und sogar die Generierung von Archiven im Blob-Format.

Erstellen eines einfachen Archivs

Betrachten wir ein Beispiel, in dem wir ein Archiv erstellen, das eine Textdatei und einen Ordner mit einem Bild enthält:

import JSZip from 'jszip';

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

  // Textdatei hinzufügen  zip.file('hello.txt', 'Hallo, Welt!');

  // Ordner erstellen und Datei hinzufügen  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // Archiv als Blob generieren  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

// VerwendungcreateArchive().then(blob => {  // Archiv herunterladen  const link = document.createElement('a');  link.href = URL.createObjectURL(blob);  link.download = 'archive.zip';  link.click();});

In diesem Beispiel haben wir ein Archiv mit zwei Dateien erstellt. Beachten Sie die Option { base64: true } – sie ermöglicht das Hinzufügen von Binärdaten, die in base64 kodiert sind.

Lesen und Entpacken eines Archivs mit JSZip

Häufig ist es erforderlich, eine vorhandene ZIP-Datei zu lesen, die vom Benutzer oder vom Server erhalten wurde. JSZip kann ein Archiv aus Blob, ArrayBuffer oder base64-String laden.

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

    // Liste der Dateien abrufen    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('Dateien im Archiv:', fileList);

    // Inhalt einer bestimmten Datei extrahieren    const content = await zip.file('hello.txt')?.async('string');    console.log('Inhalt von hello.txt:', content);  } catch (error) {    console.error('Fehler beim Lesen des Archivs:', error);  }}

// Beispiel mit Datei-Upload über inputdocument.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

Die Methode async('string') gibt den Inhalt der Datei als String zurück. Für Binärdaten verwenden Sie 'arraybuffer' oder 'uint8array'.

Bibliothek adm-zip: Arbeit in Node.js

Wenn Sie eine Serveranwendung mit Node.js entwickeln, kann adm-zip die bequemere Wahl sein. Diese Bibliothek ist synchron (es gibt aber auch asynchrone Methoden) und unterstützt das direkte Schreiben des Archivs in das Dateisystem.

Erstellen eines Archivs mit adm-zip

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

function createArchiveToDisk(): void {  const