العمل مع أرشيفات ZIP في TypeScript: دليل كامل

العمل مع أرشيفات ZIP في TypeScript

في تطوير الويب الحديث، غالبًا ما تنشأ الحاجة للعمل مع الأرشيفات: تحميل عدة ملفات كحزمة واحدة، فك ضغط الإعدادات، أو إنشاء نسخ احتياطية للبيانات. TypeScript، كإضافة كتابة ثابتة فوق JavaScript، يوفر أدوات ملائمة لهذه المهمة. في المقالة، سنستعرض مكتبتين شائعتين: JSZip و adm-zip، وسنتعلم كيفية إنشاء وقراءة وتعديل أرشيفات ZIP.

لماذا TypeScript؟

يضيف TypeScript كتابة صارمة، وهو مفيد بشكل خاص عند العمل مع البيانات الثنائية والهياكل المعقدة للأرشيفات. ستحصل على الإكمال التلقائي في بيئة التطوير المتكاملة (IDE)، واكتشاف الأخطاء المبكر، وكود مفهوم. للعمل مع ZIP، ستحتاج إلى تثبيت إحدى المكتبات عبر npm:

npm install jszipnpm install @types/jszip  // لدعم TypeScript

أو

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

مكتبة JSZip: إنشاء أرشيف

JSZip هي المكتبة الأكثر شيوعًا للعمل مع ZIP في المتصفح و Node.js. تعمل بشكل غير متزامن وتدعم إضافة الملفات والمجلدات وحتى إنشاء الأرشيف بتنسيق Blob.

إنشاء أرشيف بسيط

لننظر إلى مثال حيث نقوم بإنشاء أرشيف يحتوي على ملف نصي ومجلد به صورة:

import JSZip from 'jszip';

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

  // إضافة ملف نصي  zip.file('hello.txt', 'مرحبًا بالعالم!');

  // إنشاء مجلد وإضافة ملف  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // إنشاء الأرشيف كـ Blob  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

// الاستخدامcreateArchive().then(blob => {  // تنزيل الأرشيف  const link = document.createElement('a');  link.href = URL.createObjectURL(blob);  link.download = 'archive.zip';  link.click();});

في هذا المثال، أنشأنا أرشيفًا بملفين. لاحظ الخيار { base64: true } - فهو يسمح بإضافة بيانات ثنائية مشفرة بـ base64.

قراءة وفك ضغط أرشيف باستخدام JSZip

غالبًا ما يكون مطلوبًا قراءة ملف ZIP موجود، تم الحصول عليه من المستخدم أو من الخادم. يمكن لـ JSZip تحميل الأرشيف من Blob أو ArrayBuffer أو سلسلة base64.

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

    // الحصول على قائمة الملفات    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('الملفات في الأرشيف:', fileList);

    // استخراج محتوى ملف معين    const content = await zip.file('hello.txt')?.async('string');    console.log('محتوى hello.txt:', content);  } catch (error) {    console.error('خطأ في قراءة الأرشيف:', error);  }}

// مثال مع تحميل ملف عبر inputdocument.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

تقوم طريقة async('string') بإرجاع محتوى الملف كسلسلة نصية. للبيانات الثنائية، استخدم 'arraybuffer' أو 'uint8array'.

مكتبة adm-zip: العمل في Node.js

إذا كنت تطور تطبيقًا خادميًا على Node.js، فقد تكون adm-zip خيارًا أكثر ملاءمة. هذه المكتبة متزامنة (ولكن هناك أيضًا طرق غير متزامنة) وتدعم كتابة الأرشيف مباشرة إلى نظام الملفات.

إنشاء أرشيف باستخدام adm-zip

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

function createArchiveToDisk(): void {  const