Working with ZIP/archives in TypeScript: a complete guide

Working with ZIP/archives in TypeScript

In modern web development, there is often a need to work with archives: uploading multiple files in one package, unpacking configurations, or creating data backups. TypeScript, as a statically typed superset of JavaScript, provides convenient tools for this task. In this article, we will look at two popular libraries: JSZip and adm-zip, and learn how to create, read, and modify ZIP archives.

Why TypeScript?

TypeScript adds strict typing, which is especially useful when working with binary data and complex archive structures. You get autocompletion in the IDE, early error detection, and clear code. To work with ZIP, you will need to install one of the libraries via npm:

npm install jszipnpm install @types/jszip  // for TypeScript support

or

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

JSZip library: creating an archive

JSZip is the most popular library for working with ZIP in the browser and Node.js. It works asynchronously and supports adding files, folders, and even generating an archive in Blob format.

Creating a simple archive

Consider an example where we create an archive containing a text file and a folder with an image:

import JSZip from 'jszip';

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

  // Add a text file  zip.file('hello.txt', 'Hello, world!');

  // Create a folder and add a file  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // Generate the archive as a Blob  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

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

In this example, we created an archive with two files. Note the { base64: true } option — it allows you to add binary data encoded in base64.

Reading and extracting an archive using JSZip

It is often necessary to read an existing ZIP file received from a user or from a server. JSZip can load an archive from a Blob, ArrayBuffer, or base64 string.

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

    // Get the list of files    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('Files in archive:', fileList);

    // Extract the content of a specific file    const content = await zip.file('hello.txt')?.async('string');    console.log('Content of hello.txt:', content);  } catch (error) {    console.error('Error reading archive:', error);  }}

// Example with file upload via inputdocument.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

The async('string') method returns the file content as a string. For binary data, use 'arraybuffer' or 'uint8array'.

adm-zip library: working in Node.js

If you are developing a server-side application on Node.js, adm-zip might be a more convenient choice. This library is synchronous (but also has asynchronous methods) and supports writing an archive directly to the file system.

Creating an archive with adm-zip

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

function createArchiveToDisk(): void {  const