‏tsbro: تایپ‌اسکریپت رو بدون بیلد تو مرورگر اجرا کن

تو صفحهٔ پروژهٔ tsbro اومده که TypeScript هنوز تو مرورگر شهروند درجه‌دو حساب می‌شه: پیشنهادی برای اضافه‌شدن سینتکس تایپ به خود جاوااسکریپت هست، ولی تا اون موقع برای هر تکه کد کوچیک هم باید باندلر و مرحلهٔ بیلد راه بندازی. نویسنده می‌گه همین مرحلهٔ بیلد وقتی فقط می‌خوای یه دموی کوتاه یا PoC بنویسی، بیشتر مانعه تا کمک.

راه‌حل tsbro اینه که کلاً سیستم ماژول خود مرورگر رو دور بزنه. کد TypeScript با XHR همگام (یعنی درخواستی که تا رسیدن جواب اجرای صفحه رو نگه می‌داره) گرفته می‌شه، با نسخهٔ WebAssembly کامپایلر swc به جاوااسکریپت ترنسپایل می‌شه، بعد یه مبدل ESM به CJS همهٔ importها رو به require همگام تبدیل می‌کنه و آخرش کد eval می‌شه.

استفاده‌ش هم یه importmap می‌خواد و یه تگ اسکریپت با نوع text/tsx. اول register رو از tsbro صدا می‌زنی و pragma مربوط به JSX رو مشخص می‌کنی:

import { register } from 'tsbro'

register({
  jsx: 'preact',
})

بعدش کد TypeScript رو مستقیم داخل صفحه می‌نویسی، یا با src به یه فایل tsx بیرونی وصلش می‌کنی. پکیج ریموتی مثل preact هم از esm.sh میاد.

نویسنده دو تا محدودیت رو هم صاف می‌گه. اول اینکه چون چیزی نصب نمی‌شه، TypeScript از پیدا نکردن تایپ ماژول‌ها شکایت می‌کنه و باید یه فایل env.d.ts با یه خط declare module بسازی. دوم اینکه استک‌تریس‌ها به‌هم می‌ریزن، چون کد ترنسپایل و eval می‌شه و اسم فایل و شمارهٔ خط از دست می‌ره؛ برای این یکی هنوز راه‌حلی نداره.

برای تایپ‌چک هم پیشنهاد داده تو tsconfig مقدار jsx رو روی preserve بذاری، noEmit رو true کنی و allowImportingTsExtensions رو فعال کنی. پروژه لایسنس MIT داره و نویسنده یه پروژهٔ خواهر به اسم tssw رو هم معرفی می‌کنه.

نکات کلیدی:

• زنجیرهٔ کار: گرفتن کد با XHR همگام، ترنسپایل با swc روی WebAssembly، تبدیل ESM به CJS و در آخر eval.
• با importmap می‌شه پکیج ریموتی مثل preact رو از esm.sh مستقیم استفاده کرد.
• برای رفع خطای تایپ ماژول‌ها باید یه فایل env.d.ts ساخته شه.
• استک‌تریس‌ها بعد از ترنسپایل و eval خوانا نیستن و فعلاً راه‌حلی براش نیست.
• لایسنس MIT، به‌علاوهٔ یه پروژهٔ خواهر به اسم tssw.