WebAssembly وTypeScript: دليل عملي لمطوري الويب

مقدمة: لماذا WebAssembly و TypeScript هما الثنائي المثالي

تتطلب تطوير الويب الحديث أداءً متزايدًا، خاصة في مجالات مثل معالجة الصور والرسومات ثلاثية الأبعاد والتشفير والألعاب. أصبح WebAssembly (Wasm) حلاً ثوريًا، حيث يسمح بتنفيذ الكود بسرعة قريبة من السرعة الأصلية. ومع ذلك، قد يكون العمل مع Wasm مباشرة على مستوى منخفض معقدًا. هنا يأتي دور TypeScript — وهي لغة مكتوبة بشدة (strictly typed) تتناسب بشكل ممتاز مع WebAssembly.

في هذه المقالة، سنشرح كيفية العمل بكفاءة مع WebAssembly في مشاريع TypeScript. ستتعرف على ترجمة C/C++ و Rust إلى Wasm، واستخدام AssemblyScript لكتابة وحدات Wasm بتركيب نحوي مشابه لـ TypeScript، بالإضافة إلى أفضل ممارسات التكامل.

أساسيات WebAssembly وتفاعله مع TypeScript

ما هو WebAssembly؟

WebAssembly هو تنسيق تعليمات ثنائي لآلة افتراضية مكدسية (stack-based virtual machine). تم إنشاؤه كهدف ترجمة محمول للغات عالية المستوى. يتم تنفيذ وحدات Wasm في المتصفح بسرعة قريبة من السرعة الأصلية، وتوفر عزلًا صارمًا للذاكرة.

سيناريوهات الاستخدام النموذجية لـ Wasm في TypeScript

• المهام المكثفة حسابيًا — معالجة الفيديو والصوت والصور
• العمليات التشفيرية — التجزئة (hashing)، التشفير (encryption)
• محركات الألعاب — الفيزياء، العرض (rendering)
• المترجمات والمحللات (Compilers and Parsers) — التحليل النحوي للملفات الكبيرة

هندسة التفاعل

يعمل كود TypeScript (المترجم إلى JavaScript) كـ "غراء" بين المتصفح ووحدة Wasm. يقوم كود JS بتحميل الوحدة، واستدعاء دوالها، ومعالجة النتائج. في المقابل، يمكن لوحدة Wasm استدعاء دوال JS من خلال الاستيرادات (imports).

طرق إنشاء وحدات WebAssembly لـ TypeScript

1. ترجمة C/C++ عبر Emscripten

Emscripten هو الأداة الأكثر نضجًا لترجمة C/C++ إلى Wasm. يقوم بإنشاء كل من الملف الثنائي نفسه (.wasm) وغلاف JS (wrapper) لاستدعاء سهل من TypeScript.

مثال لدالة C:

// math.c#include <emscripten.h>

EMSCRIPTEN_KEEPALIVEint add(int a, int b) {    return a + b;}

الترجمة:

emcc math.c -o math.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall"]'

الاستخدام في TypeScript:

// math.tsinterface EmscriptenModule {    ccall: (name: string, returnType: string, argTypes: string[], args: any[]) => any;}

const Module = await import('./math.js') as unknown as EmscriptenModule;const result = Module.ccall('add', 'number', ['number', 'number'], [5, 3]);console.log(result); // 8

2. استخدام Rust مع wasm-pack

Rust هي لغة برمجة نظام حديثة تترجم بشكل ممتاز إلى Wasm. أداة wasm-pack تعمل على أتمتة إنشاء حزم npm من كود Rust.

مثال لدالة Rust:

// lib.rsuse wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn fibonacci(n: u32) -> u32 {    match n {        0 => 0,        1 => 1,        _ => fibonacci(n - 1) + fibonacci(n - 2),    }}

التوصيل في TypeScript:

// app.tsimport init, { fibonacci } from 'my-wasm-package';

await init();console.log(fibonacci(10)); // 55

3. AssemblyScript — TypeScript من أجل WebAssembly

AssemblyScript هي مجموعة فرعية مكتوبة بشدة (strictly typed) من TypeScript، يتم ترجمتها مباشرة إلى WebAssembly. هذا هو الخيار المثالي للمطورين الذين يرغبون في كتابة كود Wasm بتركيب نحوي مألوف.

مثال لوحدة AssemblyScript:

// assembly/index.tsexport function factorial(n: i32): i32 {    if (n <= 1) return 1;    return n * factorial(n - 1);}

الترجمة: