TypedArray dalam TypeScript

Artikel ini menjelaskan tentang TypedArray dalam TypeScript.

Kami akan menjelaskan TypedArray di TypeScript, termasuk contoh praktisnya.

YouTube Video

TypedArray dalam TypeScript

TypedArray adalah mekanisme untuk menangani data biner secara efisien. Ini sangat berguna untuk operasi biner tingkat rendah seperti data gambar berukuran besar, aliran byte jaringan, dan array numerik untuk WebGL.

Cara membuat ArrayBuffer

ArrayBuffer mewakili area byte dengan panjang tetap. Pertama, buat buffer dan periksa ukurannya serta panjang bytenya.

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

• Kode ini membuat area kosong sebesar 16 byte. ArrayBuffer sendiri tidak memiliki fungsi baca/tulis, jadi Anda mengaksesnya melalui TypedArray atau DataView.

Jenis-jenis TypedArray

Ada banyak jenis TypedArray, seperti berikut ini. Jenis-jenis ini berbeda tergantung pada tipe data dan ukuran yang mereka tangani.

TypedArray dasar (Uint8Array, Int16Array, Float32Array, dll.)

TypedArray membuat 'tampilan bertipe' di atas sebuah ArrayBuffer. Di bawah ini adalah contoh membuat dan menggunakan beberapa TypedArray yang umum.

 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);

• Dengan membuat beberapa tampilan pada ArrayBuffer yang sama, Anda dapat membaca dan menulis memori yang sama dengan tipe atau tingkat ketelitian yang berbeda. length pada tampilan adalah jumlah elemen, sedangkan byteLength adalah jumlah bytenya.

Menulis dan membaca (operasi tingkat byte)

Ketika Anda menulis nilai ke TypedArray, byte yang sesuai di memori akan diperbarui. Anda dapat melihat perubahan tersebut ketika membaca buffer yang sama dengan tampilan berbeda.

 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

• Pada contoh ini, kami menulis urutan byte lalu membaca area yang sama sebagai integer 32-bit. Perhatikan bahwa keluaran tergantung pada endianness dari lingkungan eksekusi.

Endianness (urutan byte) dan DataView

DataView berguna jika Anda ingin mengontrol masalah endianness yang bergantung pada lingkungan. DataView memungkinkan Anda menentukan endianness saat membaca dan menulis.

 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 adalah mekanisme yang nyaman untuk membaca dan menulis byte secara detail. Ini mendukung berbagai tipe, seperti integer bertanda atau tak bertanda dan angka floating-point, serta memungkinkan Anda menentukan endianness (urutan byte) secara eksplisit, yang sangat berguna saat mengimplementasikan protokol biner.

Perbedaan antara subarray dan slice

subarray dari TypedArray menghasilkan tampilan yang berbagi buffer asli, sedangkan slice mengembalikan salinan baru. Performa dan efek samping akan berbeda tergantung mana yang Anda gunakan.

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

• Jika Anda memodifikasi tampilan bersama, array asli juga akan berubah, yang mungkin menyebabkan efek samping yang tidak diinginkan. Jika Anda ingin menjaga array asli dengan aman, Anda dapat membuat salinannya terlebih dahulu menggunakan slice().

Menyalin buffer dan konversi tipe (konversi antar TypedArray)

Kami akan menjelaskan cara menyalin data antar TypedArray dan cara menempelkan bagian menggunakan metode 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]

• Jika tipe elemen berbeda, Anda perlu mengonversi nilai, seperti pembulatan atau pemeriksaan rentang, bukan sekadar menyalin saja. set memungkinkan penyalinan cepat antara TypedArray dengan tipe elemen yang sama.

Contoh praktis: parser protokol biner (implementasi sederhana)

Di sini, kami memperkenalkan contoh parser sederhana yang membaca data biner dengan format tetap yang terdiri dari 1-byte tipe, 2-byte panjang data, dan payload berikutnya.

 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));

• Dalam contoh ini, header dibaca menggunakan DataView, dan potongan payload dibuat dengan Uint8Array. Endianness dan pemeriksaan panjang buffer sangatlah penting.

Web API dan TypedArray (Contoh: mengambil data biner)

Ini adalah contoh umum menangani ArrayBuffer yang diperoleh dari permintaan jaringan menggunakan 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");

• Anda dapat langsung meneruskan ArrayBuffer yang didapatkan dengan Response.arrayBuffer() ke TypedArray. Ini digunakan untuk gambar, audio, atau protokol biner khusus.

Tips performa dan jebakan umum

Berikut beberapa 'tips performa' dan 'jebakan umum' yang berguna diketahui saat menggunakan TypedArray:.

• Hindari penyalinan yang tidak perlu Untuk memproses data besar secara efisien, Anda dapat mengurangi penyalinan yang tidak diperlukan dengan membuat tampilan parsial menggunakan subarray atau membagikan ArrayBuffer yang sama di banyak tampilan.

• Berhati-hatilah dengan endianness Untuk komunikasi jaringan atau format file, urutan data (urutan byte) sering kali sudah ditentukan. Dengan menggunakan DataView, Anda dapat menentukan endianness secara eksplisit saat membaca dan menulis, sehingga mencegah kesalahan interpretasi yang tidak diinginkan.

• Perhatikan rentang nilai untuk setiap tipe Misalnya, Uint8 hanya dapat mewakili nilai dari 0 hingga 255. Jika Anda memasukkan nilai negatif, pemotongan atau perputaran nilai dapat terjadi, jadi Anda harus menentukan aturan konversi sesuai kebutuhan.

• Pertimbangkan beban terhadap garbage collection Sering membuat ulang ArrayBuffer yang besar akan meningkatkan beban manajemen memori. Dalam situasi yang memerlukan kinerja tinggi, Anda dapat mempertimbangkan untuk merancang kode guna menggunakan kembali buffer yang sudah ada sebanyak mungkin.

Ringkasan

TypedArray adalah mekanisme untuk menangani data biner dengan cepat dan efisien. Dengan menggabungkan ArrayBuffer, yang mencadangkan area byte dengan panjang tetap, dengan TypedArray atau DataView, yang membaca dan menulis isi dengan tipe tertentu, Anda dapat melakukan operasi biner yang fleksibel. Tergantung pada kasus penggunaan Anda, Anda dapat memilih antara menggunakan subarray/slice atau DataView, serta merancang implementasi Anda dengan memperhatikan endianness dan salinan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video