فایل tsconfig : گزینه های module و lib و AllowJs و CheckJs

فایل tsconfig: گزینه های module و lib و AllowJs و CheckJs

گزینه های module و lib

در قسمت قبل با target آشنا شدیم و به اهمیت آن پی بردیم اما باید به سراغ گزینه های دیگر نیز برویم. گزینه ی بعدی که داریم module است:

"target": "es6",
"module": "commonjs"

برای توضیح این گزینه باید با ماژول ها در تایپ اسکریپت آشنا بشویم اما هنوز به این قسمت نرسیده ایم بنابراین از آن می گذرم و به وقتش به آن برمی گردیم. گزینه ی بعدی lib است:

"target": "es6",
"module": "commonjs"
"lib": []

با استفاده از این گزینه می توانیم به تایپ اسکریپت بگوییم که چه ویژگی ها و اشیاء پیش فرضی را پشتیبانی کند. منظور من چیزهایی مثل کار کردن با DOM است. فرض کنید در فایل index.html یک دکمه ی ساده داشته باشیم:

<body>
  <button>Click me</button>
</body>

اگر بخواهیم با کلیک روی این دکمه یک پیام به کاربر نمایش داده شود چه کار باید کرد؟ درست است، معمولا با استفاده از event-listener ها چنین کاری را انجام میدهیم. مثلا من در فایل App.ts می گویم:

const button = document.querySelector('button');

حالا به این دکمه دسترسی داریم و هیچ خطایی از تایپ اسکریپت دریافت نمی کنیم. اگر در مرحله ی بعد event-listener خود را اضافه کنیم با خطا روبرو می شویم:

button.addEventListener();

تایپ اسکریپت سریعا زیر button خط قرمز می کشد چرا که نمی تواند تشخیص دهد آیا واقعا دستور querySelector ما دکمه ای پیدا می کند یا خیر. برای حل کردن این مشکل می توانیم از علامت تعجب جلوی querySelector استفاده کنیم:

const button = document.querySelector('button')!;

با این کار به تایپ اسکریپت می گوییم نگران نباش، ما می دانیم این دکمه وجود دارد و باعث خطا نخواهد شد (بعدا در رابطه با علامت ! بیشتر توضیح می دهم). حالا می توانیم بقیه ی کدها را تکمیل کنیم:

const button = document.querySelector('button')!;

button.addEventListener('click', () => {
    console.log('clicked!');
});

اگر کد بالا را با دستور tsc کامپایل کنیم، هیچ خطایی به ما داده نمی شود. آیا تایپ اسکریپت نباید از ما خطا بگیرد و بگوید منظور ما از document چیست؟ اگر روی موس خود را روی document ببرید متوجه می شوید که نوع آن را یک var از نوع Document مشخص کرده است. تایپ اسکریپت از کجا می داند که حتی اگر document وجود داشته باشد، حتما دارای متدی به نام querySelector خواهد بود؟

شاید جواب شما این باشد که در جاوا اسکریپت ساده این کد صحیح است بنابراین در تایپ اسکریپت نیز صحیح خواهد بود اما نکته ای وجود دارد؛ کدهای تایپ اسکریپت لزوما برای مرورگرها نوشته نمی شوند، بلکه ممکن است برنامه ی node.js خود را با تایپ اسکریپت بنویسید! آنجاست که چنین کدی کار نخواهد کرد چرا که برنامه ی node.js ما با HTML کاری ندارد. پاسخ همان گزینه ی lib است.

در حال حاضر lib در tsconfig.json کامنت و غیر فعال است و در این حالت تایپ اسکریپت پیش فرض هایی را در نظر می گیرد. اگر lib تعیین نشده باشد، گزینه ی target تعیین کننده است. مثلا در پروژه ی ما که es6 است، تمام قابلیت های es6 برای تایپ اسکریپت فعال خواهد بود. همچنین تمامی DOM در دسترس شما خواهد بود. اگر می خواهید جزئیات بیشتری را بدانید به وب سایت رسمی ماکروسافت به آدرس https://www.typescriptlang.org/docs/handbook/tsconfig-json.html سری بزنید.

اگر lib را از حالت کامنت خارج کنیم تا فعال شود و سپس دستور tsc را اجرا کنیم به خطا برمی خوریم. چرا؟ به دلیل اینکه هیچ چیزی را به این قسمت پاس نداده ایم، یعنی به تایپ اسکریپت گفته ایم تو هیچ چیزی نمی دانی! بنابراین به غیر از برخی ویژگی های پیش فرض، دیگر متوجه هیچ چیزی مثل document و غیره نمی شود. برای حل این مشکل باید مقادیری را برایش تعیین کنیم. به طور مثال:

    "lib": [
      "DOM",
      "ES6",
      "DOM.Iterable",
      "ScriptHost"
    ]

DOM به تایپ اسکریپت قابلیت کار با DOM را می دهد و گزینه هایی که بعد از آن اضافه کرده ام به ما اجازه می دهد که تمام قابلیت های اصلی جاوا اسکریپت را در تایپ اسکریپت فعال کنیم. کد بالا دقیقا حالت پیش فرضی است که اگر lib کامنت شده باشد اجرا خواهد شد، یعنی دقیقا برابر target: es6 است. اگر می خواهید گزینه های بیشتری را ببینید، می توانید Ctrl + Space را بزنید تا گزینه های ممکن برایتان نمایش داده شود. در لینکی که بالا گذاشتم هم لیست کاملی از این گزینه ها به همراه توضیحات موجود است.

هدف من از نوشتن دستی این کدها آموزش و تفهیم شما بود. سعی کنید در پروژه های واقعی اصلا چنین کاری نکنید مگر آنکه بخواهید قابلیت های خاصی را به تایپ اسکریپت اضافه کنید که نیاز به ویرایش دستی lib داشته باشد، مثل برخی از پروژه های node.js و غیره.

گزینه ی AllowJs و checkJs

گزینه ی AllowJs به شما اجازه می دهد که به فایل های جاوا اسکریپت نیز اجازه ی کامپایل شدن بدهید. یعنی اگر فایل های شما پسوند ts نداشته باشند و واقعا فایل جاوا اسکریپت باشند، با استفاده از این گزینه می توانید باز هم آن ها را کامپایل کنید. گزینه ی CheckJs نیز مسئول بررسی صحت فایل های جاوا اسکریپت است، یعنی آن ها را کامپایل نمی کند اما دستورات و syntax کلی موجود در فایل ها را چک می کند تا در جایی اشتباه نکرده باشیم و نهایتا خطا های احتمالی را گزارش می دهد.

این دو گزینه برای افرادی مناسب است که نمی خواهند از تایپ اسکریپت استفاده کنند و جاوا اسکریپت را ترجیح می دهند اما هنوز هم می خواهند برخی از قابلیت های تایپ اسکریپت را در جاوا اسکریپت داشته باشند. اگر این دو گزینه را فعال کنید تایپ اسکریپت در حد توان خود به شما کمک خواهد کرد اما در جاوا اسکریپت تنها تایپ عملی any است بنابراین این کمک به قدرت تایپ اسکریپت واقعی نیست اما از هیچی بهتر است!

گزینه ی بعدی JSX است که مربوط به کار با کتابخانه ی react است و به این دوره مربوط نمی شود. گزینه های declaration و declarationMap نیز به درد ما نمی خورند چرا که مسئول ساختن فایل های d.ts هستند. این فایل ها برای افرادی کاربرد دارند که می خواهند کدهایشان را به صورت یک کتابخانه ی جداگانه در اختیار بقیه قرار دهند و باید manifest و دستور العمل خاصی برای کدهایشان ارائه دهند. این مفهوم یکی از مفاهیم پیشرفته است که به ما و سطح کاری ما مربوط نمی شود.