TypeScript में ZIP/आर्काइव के साथ काम करना: पूर्ण गाइड

TypeScript में ZIP/आर्काइव के साथ काम करना

आधुनिक वेब डेवलपमेंट में अक्सर आर्काइव के साथ काम करने की आवश्यकता होती है: एक पैकेज में कई फ़ाइलें अपलोड करना, कॉन्फ़िगरेशन अनज़िप करना या डेटा का बैकअप बनाना। 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 ब्राउज़र और Node.js में ZIP के साथ काम करने के लिए सबसे लोकप्रिय लाइब्रेरी है। यह एसिंक्रोनस रूप से काम करती है और फ़ाइलों, फ़ोल्डरों और यहां तक कि 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);  }}

// इनपुट के माध्यम से फ़ाइल अपलोड करने का उदाहरणdocument.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