تفاوت typescript و typescript + SWC

قبل از اینکه با typescript و تفاوت اون با typescript + SWC برسیم باید با ابزار vite آشنا باشیم

vite یه ابزار سبکه که بهتون اجازه میده وب اپلیکیشن های فرانت اند رو بسازین

اما وقتی با vite شروع به ساخت پروژه React می‌کنین می‌تونین انتخاب کنین که پروژه شما از Typescript استفاده کنه یا Typescript + SWC

خب عموما ما همیشه گزینه اول یا همون Typescript رو انتخاب کردیم

اما بهش فکر کردیم که SWC چی می‌تونه باشه؟

اگر ازش استفاده کنیم چه مزیتی ممکنه بهمون بده؟

اصلا استفاده ازش درست هست یا نه و یا ممکنه برای پروژه ما مناسب باشه؟

مقدمه

اول بیایم تعریف کنیم که Typescript و SWC در اصل چی هستن و با کلمه هایی مثل ترانسپایل و کامپایل اشنا شیم

بررسی Typescript

میشه خیلی ساده گفت که تایپ اسکریپت، جاوااسکریپتی هست که نحوه سینتکس دهی با تایپ بهش اضافه شده (تیتر اول و بزرگی که توی سایت خودش هست)

تایپ اسکریپت یک زبان کاملا جدا و مستقل نیست، روی همون جاوا اسکریپت ساخته شده، یعنی شما می‌تونین فایل های با پسوند ts داشته باشین و توش کاملا جاوا اسکریپت بنویسین و مطمئن باشین که بدون مشکل اجرا میشه اما تفاوت اصلی توی تایپ دهی هستش و خب این تایپ باعث میشه کد مطمئن تر، ساختارمند تر و کم خطاتری بنویسیم.

حالا تایپ اسکریپت چطور عمل می‌کنه؟ با استفاده از تایپ هایی که برای متغیر ها و توابع و … تعیین می‌کنین، تایپ اسکریپت یک کامپایلر داره که قبل از اجرای کد، اونو بررسی می‌کنه اگر داده ای رو اشتباه وارد کرده باشین مثلا برای متغیر name تایپ string انتخاب کردین اما شما number وارد کرده باشین بهتون خطا می‌ده که به نوعی این عمل Static Type Checking گفته میشه.

چیز دیگه‌ای هم که لازمه بدونیم اینه که مرورگرها مستقیما نمی‌تونن کدهای Typescript رو اجرا کنن، پس یه کامپایلری باید باشه که این کدهای Typescript رو برامون تبدیل به Javascript بکنه، فرایندی که این تبدیل رو انجام میده Transpilation گفته میشه و ابزاری هم که این کار رو انجام میده ترانسپایلر یا کامپایلر گفته میشه.

کوتاه از TSC (Typescript Compiler)

این کامپایلر توسط مایکروسافت توسعه داده شد و وظیفه اصلی اون بررسی تایپ ها (type checking) و بعد ترنسپایل کردن فایل های .ts و .tsx به .js هست

بخاطر همین توی پروژه هایی که با vite توسعه داده می‌شه ممکنه برای type checking ازش استفاده بشه اما توی ترنسپایل کردن چون سرعت کمی داره و ابزارهای بهتری هم وجود داره ازش استفاده نمیشه و به جای اون از ابزارهای جایگزین مثل esbuild یا SWC استفاده می‌شه.

esbuild با زبان GO توسعه داده شده و SWC با زبان Rust

و با بررسی سرعت و عملکردی که داشتیم میشه متوجه شد که در پروژه های vite عموما types checking به TSC سپرده می‌شه و ترنسپایل کردن به esbuild یا SWC

بررسی SWC

SWC مخفف Speedy Web Compiler هست. معنای جذابی ازش در نمیاد اما میشه به فارسی گفت “کامپایلر سریع وب” و یک ابزار خیلی خوبه که بتونه برامون عملیات هایی مثل ترانسپایل (Transpilation)، باندل کردن یا باندلینگ (Bundling) و همینطور جمع و جور کردن کدها که ما عموما بهش میگیم مینیفای کردن (Minification) رو انجام میده چه کد Javascript باشه و چه Typescript توی هر دو مورد کاربرد داره.

عمیق تر از SWC

SWC با زبان Rust نوشته شده و به دلیل ماهیت کامپایلری بودنش، Rust خیلی سریعتر از ابزارهای قدیمی تری که مبتنی بر Javascript هستن، هست مثل Babel که بر پایه جاوااسکریپت هستش مقایسه فنی تر

نقش SWC به عنوان یک ترنسپایلر اینه که کدهایی که به صورت JSX و Typescript و … نوشته میشه رو به نسخه Javascript تبدیل کنه که برای مرورگر قابل خوندن باشه

ترکیب Typescript با SWC

حالا که متوجه شدیم Typescript و SWC چی هستن، وقتی ما از vite برای راه اندازی پروژه استفاده میکنیم

• در حالتی که ما از Typescript استفاده می‌کنیم Vite به صورت پیش فرض از esbuild برای ترنسپایل کردن استفاده می‌کنه
• در حالتی که از Typescript + SWC استفاده می‌کنیم می‌تونیم برای ترانسپایل کردن SWC رو جایگزین esbuild می‌کنیم و خب سرعت اون هم بالاتره!

ممکنه توی خوندن راجع به کامپایلر و ترنسپایلر و … به کلمه babel برسین و با مفاهیم دیگه قاطی کنیم، باید بگم babel وظیفه اش بیشتر تبدیل کدهای مدرن +ES6 به جاوااسکریپت قدیمی‌تر که با مرورگر شما سازگار باشه. اما خب توی پروژه های React که JSX می‌نویسین React از Babel استفاده میکنه اما همچنان ترنسپایل کردن با استفاده از esbuild انجام می‌شه و babel دیگه توی اکوسیستم vite محدودتر شده

تفاوت ماهیت esbuild و SWC

هر دو ترنسپایلر هستن که کدهای Typscript یا JSX یا TSX رو به Javascript تبدیل می‌کنن که برای مرورگر قابل خوندن و فهمیدن باشه و بتونه اجراش کنه

اما تفاوتی که دارن:

• esbuild به زبان GO و SWC به زبان Rust نوشته شده
• SWC از esbuild سرعت بهتری داره
• SWC اکوسیستم جدیدتری هست و به طبع به اندازه esbuild پشتیبانی کمتری ازش می‌بینین
• هر دو type checking ندارن و این کار وظیفه tsc هست
• esbuild ترنسپایلر پیش فرض vite هست

انتخاب برای پروژه

مثل هر ابزار دیگه ای، استفاده از Typescript و یا استفاده از Typescript + SWC کاملا به تصمیم شما و مدل توسعه شما و مقیاس و پیچیدگی پروژه‌تون داره، اما در حالت کلی میشه گفت که:

استفاده از Typescript (vite + esbuild)

• پروژه های کوچک و متوسط و حتی راه اندازی پروژه های شخصی و برنامه های سازمانی و پروژه هایی که نیاز به سرعت خیلی بالایی ندارن کاملا مناسب و سازگار هست.
• وقتی میخواین پروژه رو با وابستگی خیلی کم جلو ببرین و سادگی شروع براتون الویت باشه
• تیم توسعه کوچیکه و نمیخواین وقتتون رو صرف نصب کردن ابزارهای مختلف و اضافی کنید و پروژه جمع و جوره

استفاده از Typescript + SWC (vite + SWC)

• پروژه های بزرگتر و مقیاس پذیر، چون پروژه به حدی سنگینه که ممکنه تفاوت چند صدم ثانیه ای توی ترنسپایل کمک کننده باشه و HMR بهتر عمل کنه
• جاهایی که زمان الویت باشه
• جاهای خاصی که خودتون فکر می‌کنین الان فقط SWC لازمه

در نهایت بازم اینا قوانین ثابت نیست و توی هر پروژه ای می‌تونین از هر کدوم نیاز دونستین استفاده کنین