آموزش TypeScript

مباحث پایه TypeScript

ماژول ها (Modules) در زبان برنامه نویسی TypeScript – آموزش TypeScript

  • دوشنبه ۲۹ دی ۱۳۹۹
  • بازدید ۲۲۶ نفر

typescript modules 7264 تصویر

ماژول ها (Modules) در زبان برنامه نویسی TypeScript

ماژول ها با هدف سازماندهی کدهای تایپ اسکریپت طراحی شده اند. به طور گسترده ماژول ها به دو دسته تقسیم می شوند:

  • ماژول های داخلی (Internal Modules)
  • ماژول های خارجی (External Modules)

ماژول های داخلی

ماژول های داخلی در نسخه های قدیمی تر زبان TypeScript معرفی شده اند. این ماژول ها برای گروه بندی منطقی کلاس ها، اینترفیس ها، توابع و غیره در داخل یک بسته واحد و استفاده از آن در سایر ماژول ها استفاده می شدند. در آخرین نسخه زبان تایپ اسکریپت، مفهوم گروه بندی منطقی با نام namespace معرفی شده است. بنابراین ماژول های داخلی منسوخ شدند و به جای آن ها می توانیم از namespace استفاده کنیم. ماژول های داخلی هنوز هم پشتیبانی می شوند، اما توصیه می شود از namespace استفاده شود.

سینتکس ماژول داخلی (گروه بندی قدیمی):

سینتکس فضای نام (گروه بندی جدید):

خروجی جاوا اسکریپت برای هر دو کد فوق مشابه است:

ماژول خارجی

ماژول های خارجی به منظور مشخص کردن و بارگذاری وابستگی بین چند فایل js بوجود آمده اند. اگر فقط یک فایل js وجود داشته باشد، استفاده از ماژول های خارجی مناسب نیست. قبلا مدیریت وابستگی بین فایل های js توسط تگ <script></script> مرورگر انجام می شد. مشکلی که این تگ ها دارند، این است که قابل گسترش نیستند. به معنا که این تگ ها فایل ها پشت سر هم بارگذاری می کنند و گزینه برای بارگذاری ناهمگام (asynchronous) ندارند. دو روش برای بارگذاری وابستگی ها از یک فایل js وجود دارد:

  • سمت کلاینت – RequireJs
  • سمت سرور – NodeJs

انتخاب یک Module Loader

برای بارگذاری فایل های js خارجی ما به یک Module Loader نیاز داریم. Module Loader یک کتابخانه js دیگری خواهد بود. برای مرورگر رایج ترین کتابخانه مورد استفاده RequieJS است که خاصیت های AMD یا همان Asynchronous Module Definition را پیاده سازی کرده است. در AMD فایل ها به جای این که پشت سر هم بارگذرای شوند، به صورت جداگانه بارگذاری می شوند، حتی اگر به یک دیگر وابستگی داشته باشند.

تعریف یک ماژول خارجی

زمانی که بخواهیم یک ماژول خارجی را با استفاده از CommonJS  یا AMD تعریف کنیم، هر فایل به عنوان یک ماژول در نظر گرفته می شود. بنابراین استفاده از ماژول داخلی با ماژول خارجی امری اختیاری خواهد بود. اگر قصد دارید تا سیستم ماژول بندی TypeScript را از AMD به CommonJS تغییر دهید، برخلاف زبان JavaScript فقط باید یک flag کامپایلر را عوض کنید. در ادامه می توانید سینتکس مربوط به تعریف یک ماژول خارجی با استفاده از کلمات کلیدی export و import را مشاهده کنید:

برای اعلان ماژول تعریف شده در یک فایل دیگر، از کلمه کلیدی import استفاده می کنیم. مانند نمونه زیر:

مثال:

برای درک بهتر به مثال زیر توجه کنید:

دستور مربوط به کامپایل کردن فایل TypeScript اصلی با سیستم AMD:

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

فایل IShape.js:

فایل Circle.js:

فایل Triangle.js:

فایل TestShape.js:

دستور مربوط به کامپایل کردن فایل TypeScript اصلی با سیستم CommonJS:

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

فایل Circle.js:

فایل Triangle.js:

فایل TestShape.js:

خروجی مثال:

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است