TypeScript में टाइपड एरे (TypedArray)

यह लेख TypeScript में TypedArray की व्याख्या करता है।

TypedArray को TypeScript में व्यावहारिक उदाहरणों सहित समझाया जाएगा।

YouTube Video

TypeScript में टाइपड एरे (TypedArray)

TypedArray एक ऐसा तंत्र है जो बाइनरी डेटा को कुशलतापूर्वक संभालने के लिए है। यह विशेष रूप से बड़े इमेज डेटा, नेटवर्क बाइट स्ट्रीम और WebGL के लिए न्यूमेरिक एरे जैसी निम्न-स्तरीय बाइनरी कार्यों में उपयोगी है।

एक ArrayBuffer कैसे बनाएं

ArrayBuffer बाइट्स के एक निश्चित-लंबाई के क्षेत्र का प्रतिनिधित्व करता है। पहले, एक बफ़र बनाएं और उसके आकार तथा बाइट लंबाई की जांच करें।

1// Create an ArrayBuffer of 16 bytes
2const buffer: ArrayBuffer = new ArrayBuffer(16);
3console.log("buffer.byteLength:", buffer.byteLength); // 16

• यह कोड 16 बाइट्स का एक खाली क्षेत्र बनाता है। ArrayBuffer में स्वयं पढ़ने/लिखने के फंक्शन नहीं होते, इसलिए इसे आप TypedArray या DataView के माध्यम से एक्सेस करते हैं।

TypedArray के प्रकार

कई प्रकार के TypedArray होते हैं, जैसे निम्नलिखित:। ये उनके डेटा प्रकार और हैंडल करने वाले आकार के अनुसार भिन्न होते हैं।

मूल TypedArray (Uint8Array, Int16Array, Float32Array आदि)

TypedArray, ArrayBuffer के ऊपर एक 'टाइपड व्यू' बनाता है। नीचे कुछ सामान्य TypedArray बनाने और उपयोग करने के उदाहरण दिए गए हैं।

 1// Create a buffer and different typed views over it
 2const buf = new ArrayBuffer(8); // 8 bytes
 3
 4// Create views
 5const u8 = new Uint8Array(buf);    // 8 x uint8
 6const i16 = new Int16Array(buf);   // 4 x int16 (since each int16 is 2 bytes)
 7const f32 = new Float32Array(buf); // 2 x float32 (4 bytes each)
 8
 9console.log("Uint8 length:", u8.length);
10console.log("Int16 length:", i16.length);
11console.log("Float32 length:", f32.length);

• एक ही ArrayBuffer पर कई व्यू बनाकर, आप उसी मेमोरी को विभिन्न प्रकारों या दानों में पढ़ और लिख सकते हैं। व्यू का length तत्वों की संख्या होती है, और byteLength बाइट्स की संख्या होती है।

लिखना और पढ़ना (बाइट-स्तरीय ऑपरेशन)

जब आप किसी TypedArray में मान लिखते हैं, तो मेमोरी में संबंधित बाइट्स अपडेट हो जाते हैं। जब आप उसी बफ़र को एक अलग व्यू से पढ़ते हैं, तो आप उसके परिवर्तन देख सकते हैं।

 1// Demonstrate writing via one view and reading via another
 2const buffer2 = new ArrayBuffer(4);
 3const u8view = new Uint8Array(buffer2);
 4const u32view = new Uint32Array(buffer2);
 5
 6u8view[0] = 0x78;
 7u8view[1] = 0x56;
 8u8view[2] = 0x34;
 9u8view[3] = 0x12;
10
11console.log("Uint8 bytes:", Array.from(u8view)); // [120, 86, 52, 18]
12console.log("Uint32 value (platform endianness):", u32view[0]); // value depends on endianness

• इस उदाहरण में, हम एक बाइट अनुक्रम लिखते हैं और फिर उसी क्षेत्र को 32-बिट पूर्णांक के रूप में पढ़ते हैं। ध्यान दें कि आउटपुट निष्पादन परिवेश की endian व्यवस्था पर निर्भर करता है।

एंडियननेस (बाइट क्रम) और DataView

यदि आप परिवेश-निर्भर एंडियननेस समस्याओं को नियंत्रित करना चाहते हैं, तो DataView उपयोगी है। DataView आपको पढ़ने और लिखने के समय एंडियननेस निर्दिष्ट करने देता है।

 1// Use DataView to read/write with explicit endianness control
 2const b = new ArrayBuffer(4);
 3const dv = new DataView(b);
 4
 5// write little-endian 32-bit integer
 6dv.setUint32(0, 0x12345678, true);
 7
 8// read as little-endian and big-endian
 9const little = dv.getUint32(0, true);
10const big = dv.getUint32(0, false);
11
12console.log("little-endian read:", little.toString(16)); // "12345678"
13console.log("big-endian read:", big.toString(16));       // different value

• DataView बाइट्स को विस्तार से पढ़ने और लिखने का एक सुविधाजनक तंत्र है। यह विभिन्न प्रकारों को समर्थन करता है, जैसे कि साइन इन्टिजर, अनसाइन इन्टिजर और फ्लोटिंग-पॉइंट नंबर, और आपको एंडियननेस (बाइट क्रम) स्पष्ट रूप से निर्दिष्ट करने की अनुमति देता है, जो बाइनरी प्रोटोकॉल लागू करते समय बहुत उपयोगी है।

subarray और slice के बीच अंतर

TypedArray का subarray मूल बफ़र साझा करने वाला व्यू लौटाता है, जबकि slice एक नई कॉपी लौटाता है। आप किसका उपयोग करते हैं, उसके आधार पर प्रदर्शन और पार्श्व प्रभाव अलग होंगे।

1const base = new Uint8Array([1, 2, 3, 4, 5]);
2
3const shared = base.subarray(1, 4); // shares underlying buffer
4const copied = base.slice(1, 4);    // copies data
5
6shared[0] = 99;
7console.log("base after shared modification:", base); // shows change
8console.log("copied remains:", copied);              // unaffected

• यदि आप साझा दृश्य को संशोधित करते हैं, तो मूल एरे भी बदल जाएगा, जिससे अनचाहे दुष्प्रभाव हो सकते हैं। यदि आप मूल एरे को सुरक्षित रूप से संरक्षित करना चाहते हैं, तो आप पहले से ही slice() का उपयोग करके उसकी एक कॉपी बना सकते हैं।

बफ़र की कॉपी और प्रकार रूपांतरण (TypedArrays के बीच रूपांतरण)

हम समझाएंगे कि TypedArrays के बीच डेटा कैसे कॉपी किया जाए और set मेथड का उपयोग करके हिस्से कैसे चिपकाए जाएं।

 1// Copy and convert between typed arrays
 2const src = new Float32Array([1.5, 2.5, 3.5]);
 3const dst = new Uint16Array(src.length);
 4
 5// Convert by mapping (explicit conversion)
 6for (let i = 0; i < src.length; i++) {
 7  dst[i] = Math.round(src[i]); // simple conversion rule
 8}
 9console.log("converted dst:", Array.from(dst)); // [2, 2, 4]
10
11// Using set to copy bytes (requires compatible underlying buffer or same element type)
12const src2 = new Uint8Array([10, 20, 30]);
13const dst2 = new Uint8Array(6);
14dst2.set(src2, 2); // copy src2 into dst2 starting at index 2
15console.log("dst2 after set:", Array.from(dst2)); // [0,0,10,20,30,0]

• अगर तत्वों के प्रकार अलग हों, तो केवल कॉपी करने के बजाय आपको मानों को रूपांतरित करना होगा, जैसे राउंडिंग या सीमा जांच। set एक ही तत्व प्रकार वाले TypedArrays के बीच तेज़ी से कॉपी करने की अनुमति देता है।

व्यावहारिक उदाहरण: एक बाइनरी प्रोटोकॉल पार्सर (सरल कार्यान्वयन)

यहाँ हम एक सरल पार्सर का उदाहरण प्रस्तुत करते हैं जो 1-बाइट प्रकार, 2-बाइट डेटा लंबाई और उसके बाद के पेलोड वाले एक निश्चित प्रारूप के बाइनरी डेटा को पढ़ता है।

 1// Simple binary message parser:
 2// format: [type: uint8][length: uint16 BE][payload: length bytes]
 3function parseMessages(buffer: ArrayBuffer) {
 4  const dv = new DataView(buffer);
 5  let offset = 0;
 6  const messages: { type: number; payload: Uint8Array }[] = [];
 7
 8  while (offset + 3 <= dv.byteLength) {
 9    const type = dv.getUint8(offset);
10    const length = dv.getUint16(offset + 1, false); // big-endian
11    offset += 3;
12    if (offset + length > dv.byteLength) break; // truncated
13    const payload = new Uint8Array(buffer, offset, length);
14    messages.push({ type, payload });
15    offset += length;
16  }
17
18  return messages;
19}
20
21// Example usage
22const buf = new ArrayBuffer(1 + 2 + 3 + 1 + 2 + 2); // two messages
23const dv = new DataView(buf);
24let off = 0;
25// first message: type=1, length=3, payload=[1,2,3]
26dv.setUint8(off, 1); dv.setUint16(off + 1, 3, false); off += 3;
27new Uint8Array(buf, off, 3).set([1, 2, 3]); off += 3;
28// second message: type=2, length=2, payload=[9,8]
29dv.setUint8(off, 2); dv.setUint16(off + 1, 2, false); off += 3;
30new Uint8Array(buf, off, 2).set([9, 8]);
31
32console.log(parseMessages(buf));

• इस उदाहरण में, हैडर को DataView का उपयोग करके पढ़ा जाता है और पे-लोड स्लाइस Uint8Array के साथ बनाया जाता है। एंडियननेस और बफ़र लंबाई की जांच महत्वपूर्ण है।

वेब API और TypedArray (उदाहरण: बाइनरी डेटा प्राप्त करना)

यह नेटवर्क अनुरोध से प्राप्त ArrayBuffer को TypedArray के माध्यम से संभालने का एक सामान्य उदाहरण है।

 1// Example of fetching binary and mapping to typed array
 2async function fetchBinary(url: string) {
 3  const res = await fetch(url);
 4  const ab = await res.arrayBuffer();
 5  const view = new Uint8Array(ab);
 6  // process view...
 7  console.log("received bytes:", view.length);
 8  return view;
 9}
10
11// Usage (call in async context)
12// fetchBinary("/path/to/file.bin");

• Response.arrayBuffer() से प्राप्त ArrayBuffer को सीधे किसी TypedArray को पास किया जा सकता है। इसका उपयोग चित्र, ऑडियो या कस्टम बाइनरी प्रोटोकॉल के लिए किया जाता है।

प्रदर्शन युक्तियाँ और सामान्य गलतियाँ

यहाँ 'प्रदर्शन युक्तियाँ' और 'सामान्य गलतियाँ' दी गई हैं, जो TypedArray का उपयोग करते समय जानना सहायक है:।

• अनावश्यक कॉपीिंग से बचें बड़े डेटा को कुशलतापूर्वक संसाधित करने के लिए आप subarray के साथ आंशिक व्यू बनाकर या एक ही ArrayBuffer को कई व्यूज में साझा करके अनावश्यक कॉपीिंग को कम कर सकते हैं।

• एंडियननेस के प्रति सावधान रहें नेटवर्क संचार या फ़ाइल स्वरूपों में डेटा का क्रम (बाइट क्रम) अक्सर निर्दिष्ट होता है। DataView का उपयोग आपको पढ़ने और लिखने के समय एंडियननेस स्पष्ट रूप से निर्दिष्ट करने की अनुमति देता है, जिससे गलत व्याख्या से बचाव होता है।

• प्रत्येक प्रकार के लिए मान सीमा से अवगत रहें उदाहरण के लिए, Uint8 केवल 0 से 255 तक के मान ही दिखा सकता है। यदि आप नकारात्मक मान दर्ज करते हैं, तो ट्रंकेशन या वैल्यू रोलओवर हो सकता है, इसलिए आपको आवश्यकता अनुसार रूपांतरण नियमों को परिभाषित करना चाहिए।

• गारबेज कलेक्शन पर दबाव का ध्यान रखें बड़े ArrayBuffers को बार-बार फिर से बनाना, मेमोरी प्रबंधन का बोझ बढ़ाता है। प्रदर्शन-संवेदनशील स्थितियों में, आप मौजूदा बफर्स का अधिकतम पुनः उपयोग करने के लिए कोड को डिज़ाइन करने पर विचार कर सकते हैं।

सारांश

TypedArray बाइनरी डेटा को तेज़ और कुशलतापूर्वक संभालने का एक तंत्र है। आप ArrayBuffer (जो एक निश्चित-लंबाई वाला बाइट क्षेत्र आरक्षित करता है) को TypedArray या DataView (जो विशिष्ट प्रकारों के साथ सामग्री को पढ़ते और लिखते हैं) के साथ मिलाकर लचीले बाइनरी ऑपरेशन कर सकते हैं। अपने उपयोग के अनुसार, आप subarray/slice या DataView का उपयोग करने के बीच चयन कर सकते हैं, और अपनी इम्प्लीमेंटेशन को एंडियननेस और कॉपीज़ पर ध्यान देते हुए डिज़ाइन कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video