Working with ZIP/archives in TypeScript: a complete guide to JSZip and adm-zip

Working with ZIP/archives in TypeScript: library overview and practical examples

In modern web development with TypeScript, there is often a need to work with ZIP archives: packaging files on the client, extracting data received from the server, or creating complex archive structures. In this article, we will look at the two most popular libraries — JSZip and adm-zip, their capabilities, TypeScript typing, and provide practical usage examples.

1. JSZip — a universal library for browser and Node.js

JSZip is a powerful library for creating, reading, and editing ZIP archives, working both in the browser and in the Node.js environment. It has full TypeScript support.

Installation:

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

1.1 Creating a ZIP archive

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // Add a text file  zip.file('hello.txt', 'Hello World!');    // Add a folder with a file  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // Generate the archive (Blob for browser)  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 Reading and extracting an archive

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // Iterate over all files  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`File: ${relativePath}, content: ${data}`);    }  });}

1.3 Working with metadata

JSZip allows you to manage dates, comments, and access permissions:

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

2. adm-zip — a lightweight alternative for Node.js

adm-zip is a library optimized for server-side Node.js. It works faster with large amounts of data and has a convenient API.

Installation:

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

2.1 Creating an archive

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // Add file from buffer  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // Add local file  zip.addLocalFile('/path/to/file.txt');    // Add an entire folder  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // Write to disk  zip.writeZip('archive.zip');}

2.2 Extraction and decompression

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // Extract all files to a folder  zip.extractAllTo('./extracted', true);    // Get list of entries  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`Name: ${entry.entryName}, Size: ${entry.header.size}`);        // Get content    const content = entry.getData().toString('utf8');  });}

3. Library comparison

• JSZip — universal, works in browser and Node.js, supports streaming generation, has a rich API for working with metadata.
• adm-zip — faster on large volumes, simpler API, but works only in Node.js.
• Performance: adm-zip wins when working with archives >100 MB.
• Typing: both have full