العمل مع WebAssembly وTypeScript: من الألف إلى الياء — دليل شامل

مقدمة في WebAssembly وTypeScript

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

يتيح WebAssembly تشغيل الكود المكتوب بلغات C وC++ وRust وغيرها في المتصفح. بينما يضيف TypeScript كتابة صارمة ويحسن قابلية قراءة الكود. معًا، يفتحان إمكانيات جديدة لمعالجة الفيديو والرسومات ثلاثية الأبعاد والتشفير والمهام الأخرى كثيفة الاستخدام للموارد.

المفاهيم الأساسية لـ WebAssembly

ما هو WebAssembly؟

WebAssembly هو آلة افتراضية بتنسيق تعليمات ثنائي. يتم تجميع الكود إلى ملفات .wasm، والتي يتم تحميلها وتنفيذها في المتصفح. المزايا الرئيسية:

\n
• الأداء: تنفيذ قريب من السرعة الأصلية
\n
• الأمان: تنفيذ معزول في بيئة رملية
\n
• قابلية النقل: يعمل في جميع المتصفحات الحديثة
\n
• التكامل: يمكن استدعاؤه بسهولة من JavaScript/TypeScript
\n

تنسيقات WebAssembly

يوجد تنسيقان رئيسيان:

\n
• الثنائي (.wasm): تنسيق ثنائي مضغوط للتنفيذ
\n
• النصي (.wat): تمثيل Wasm قابل للقراءة البشرية
\n

عادةً ما يعمل المطورون مع ملفات .wasm، بينما يُستخدم التنسيق النصي لتصحيح الأخطاء.

إعداد البيئة للعمل مع WebAssembly وTypeScript

الأدوات اللازمة

للبدء، ستحتاج إلى:

\n
• Node.js (الإصدار 16+)
\n
• مترجم TypeScript
\n
• AssemblyScript (إذا كنت تكتب بصيغة تشبه TypeScript)
\n
• متصفح يدعم WebAssembly
\n

تثبيت AssemblyScript

AssemblyScript هي لغة تقوم بتجميع كود يشبه TypeScript إلى WebAssembly. التثبيت:

npm init -y\nnpm install --save-dev assemblyscript\nnpx asinit .

بعد ذلك، يتم إنشاء هيكل المشروع مع ملفات assembly/index.ts والإعدادات.

كتابة أول وحدة في AssemblyScript

لننشئ دالة جمع بسيطة في ملف assembly/index.ts:

export function add(a: i32, b: i32): i32 {\n  return a + b;\n}

لاحظ النوع i32 — وهو عدد صحيح 32 بت، خاص بـ AssemblyScript.

التجميع إلى WebAssembly

نفذ الأمر التالي للتجميع:

npx asc assembly/index.ts -o build/optimized.wasm --optimize

العلامة --optimize تقوم بتحسين الحجم والأداء. الناتج هو ملف build/optimized.wasm.

تكامل WebAssembly مع TypeScript

تحميل وحدة Wasm

لننشئ ملف TypeScript لتحميل واستدعاء دوال Wasm:

// wasm-loader.ts\nexport async function loadWasmModule(): Promise<WebAssembly.Module> {\n  const response = await fetch('build/optimized.wasm');\n  const bytes = await response.arrayBuffer();\n  return WebAssembly.compile(bytes);\n}\n\nexport async function instantiateModule(): Promise<WebAssembly.Instance> {\n  const module = await loadWasmModule();\n  const instance = await WebAssembly.instantiate(module);\n  return instance;\n}

استدعاء دوال Wasm من TypeScript

الآن لننشئ ملف التطبيق الرئيسي:

// main.ts\nimport { instantiateModule } from './wasm-loader';\n\nasync function main() {\n  try {\n    const instance = await instantiateModule();\n    const { add } = instanc