টাইপস্ক্রিপ্টে টাইপডএরে

এই প্রবন্ধটি টাইপস্ক্রিপ্টে TypedArray ব্যাখ্যা করে।

আমরা TypeScript এ TypedArray ব্যাখ্যা করব, কার্যকর উদাহরণসহ।

YouTube Video

টাইপস্ক্রিপ্টে টাইপডএরে

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

• এই উদাহরণে, আমরা একটি বাইট সিকোয়েন্স লিখে একই অঞ্চলটি ৩২-বিট ইন্টিজাররূপে পড়ব। খেয়াল রাখুন আউটপুট নির্ভর করে পরিবেশের এন্ডিয়ান-নেসের উপর।

এন্ডিয়ান-নেস (বাইট অর্ডার) এবং 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() ব্যবহার করে একটি অনুলিপি তৈরি করতে পারেন।

বাফার কপি এবং টাইপ রূপান্তর (TypedArray-এর মধ্যে রূপান্তর)

আমরা ব্যাখ্যা করব কিভাবে এক TypedArray থেকে অন্যটিতে ডেটা কপি করবেন এবং 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 একই ধরনের উপাদানের মধ্যে দ্রুত TypedArray কপি করতে দেয়।

ব্যবহারিক উদাহরণ: একটি বাইনারি প্রোটোকল পার্সার (সরল ইমপ্লিমেন্টেশন)

এখানে আমরা একটি সহজ পার্সার দেখাচ্ছি, যা ১ বাইট টাইপ, ২ বাইট ডেটা দৈর্ঘ্য, এবং পরবর্তি পে-লোড দেওয়া ফিক্সড-ফরম্যাট বাইনারি ডেটা পড়ে।

 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 দ্বারা তৈরি করা হয়েছে। এন্ডিয়ান-নেস ও বাফার দৈর্ঘ্য যাচাই গুরুত্বপূর্ণ।

Web 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 কেবল ০ থেকে ২৫৫ পর্যন্ত মান নিতে পারে। আপনি যদি একটি নেগেটিভ মান ইনপুট করেন, তাহলে ট্রাঙ্কেশন বা মান রোলওভার ঘটতে পারে, তাই আপনার প্রয়োজনে রূপান্তর নিয়ম নির্ধারণ করা উচিত।

• গারবেজ কালেকশন চাপের কথা ভাবুন বড় ArrayBuffer বারবার তৈরি করা মেমরি ব্যবস্থাপনার চাপ বাড়িয়ে দেয়। পারফরম্যান্স-সংশ্লিষ্ট পরিস্থিতিতে, আপনি বিদ্যমান বাফারগুলি যতটা সম্ভব পুনঃব্যবহার করার জন্য কোড ডিজাইন করার কথা বিবেচনা করতে পারেন।

সারসংক্ষেপ

TypedArray হলো দ্রুত এবং দক্ষভাবে বাইনারি ডেটা পরিচালনার একটি পদ্ধতি। ArrayBuffer (যা নির্দিষ্ট দৈর্ঘ্যের বাইট এলাকা সংরক্ষণ করে) এবং TypedArray/DataView (যা নির্দিষ্ট টাইপ দিয়ে পড়ে-লেখা করে) একত্র করে আপনি নমনীয়ভাবে বাইনারি ডেটা পরিচালনা করতে পারেন। আপনার ব্যবহারের ক্ষেত্রের উপর নির্ভর করে, আপনি subarray/slice অথবা DataView ব্যবহারের মধ্যে বেছে নিতে পারেন, এবং এন্ডিয়াননেস ও অনুলিপি সম্পর্কে মনোযোগ দিয়ে আপনার ইমপ্লিমেন্টেশন ডিজাইন করতে পারেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video