فایل tsconfig: گزینه‌های باقی مانده

در جلسه قبل با دستور strict و noImplicitAny آشنا شدیم و در این قسمت باید دیگر گزینه های باقی مانده از قسمت strict را بررسی کنیم. گزینه بعدی strictNullChecks است که مربوط به دستور زیر است:

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

در جلسه قبل توضیح دادم که اگر کد بالا را بدون علامت تعجب بنویسیم، با خطا مواجه می شویم چرا که تایپ اسکریپت نمی تواند مطمئن باشد، عنصر button در صفحه ما وجود دارد یا خیر. با قرار دادن علامت تعجب در انتها به تایپ اسکریپت می گوییم که ما شخصا از وجود این عنصر مطمئن هستیم و نیازی به دریافت خطا نیست. راه دیگر از بین بردن این خطا غیرفعال کردن گزینه strictNullChecks است:

"strictNullChecks": false

بنابراین گزینه strictNullChecks در حالت true به تایپ اسکریپت می گوید که در هنگام کار با متغیر هایی که ممکن است null باشند، نهایت سختگیری را به خرج بده! به طور مثال عنصر button ما (کد بالا) ممکن است null باشد چرا که برای تایپ اسکرپیت اصلا معلوم نیست در فایل HTML ما چه کدی وجود دارد، به همین دلیل نسبت به آن سخت گیری می کند. همانطور که قبلا توضیح داده بودم، بهتر است تمامی گزینه های قسمت strict را فعال باقی بگذارید و به چیزی دست نزنید. هدف من از توضیح دادن این موارد، آموزش و آشنایی با این گزینه ها برای پروژه های خاص است.

در اکثر اوقات ما خودمان فایل HTML را می نویسیم اما برخی اوقات که به صورت گروهی و روی پروژه های بزرگتر کار می کنیم ممکن است به فایل HTML دسترسی نداشته و یا اینکه متوجه تغییرات درون آن نشویم. در این شرایط بهتر است از یک شرط if استفاده کنید تا اسکریپت شما از کار نیفتد:

// a comment
if (button) {
  button.addEventListener('click', () => {
    console.log('Clicked!');
  });
}

همانطور که می دانید در شروط جاوا اسکریپت مقدار null برابر false است به همین دلیل اگر button برابر null باشد شرط اجرا نخواهد شد. در چنین حالتی دیگر نیازی به علامت تعجب نداریم.

گزینه بعدی strictFunctionTypes است که مفهومی پیچیده تر و جزئی تر از دیگر گزینه ها است. strictFunctionTypes مربوط به تایپ توابع است و هنگامی اهمیت پیدا می کند که با کلاس ها و مبحث وراثت (inheritance) کار کنیم. از آنجایی که هنوز با این مباحث کار نکرده ایم فعلا از این گزینه رد می شویم.

گزینه بعد strictBindCallApply و مربوط به دستورات bind و call و apply می شود. فرض کنید کدی به شکل زیر داشته باشیم:

function clickHandler(message: string) {
  console.log('Clicked! ' + message);
}
// a comment
if (button) {
  button.addEventListener('click', clickHandler.bind(null));
}

ما تابعی به نام clickHandler تعریف کرده ایم که یک آرگومان دریافت کرده و آن را به همراه عبارت clicked چاپ می کند. سپس درون شرط این تابع را صدا زده ایم. اگر بخواهیم پارامترهای ورودی این تابع را قبل از اجرا شدن تنظیم کنیم می توانیم از دستور bind استفاده کنیم. اولین پارامتر bind مقدار مورد نظری است که باید روی کلیدواژه this تعیین شود و از آنجایی که ما اصلا از کلیدواژه this استفاده نکرده ایم من مقدار null را به آن پاس داده ام. تایپ اسکریپت برای کد بالا به ما خطا می دهد مگر اینکه گزینه strictBindCallApply را روی false قرار دهیم. گزینه strictBindCallApply بررسی می کند که bind را روی چه تابعی صدا زده اید و آیا اصلا چیزی که نوشته اید منطقی است یا خیر.

تایپ اسکریپت به این کد نگاه می کند و می بیند که تابع clickHandler نیاز به یک پارامتر به نام message دارد اما ما آن را پاس نداده ایم. در واقع اگر در تعریف تابع clickHandler پارامتر message را حذف کنید کد بالا مشکلی نخواهد داشت. راه حل ما این است که پارامتر دوم bind را تعریف کنیم که برابر با پارامتر اول clickHandler است:

function clickHandler(message: string) {
  console.log('Clicked! ' + message);
}
// a comment
if (button) {
  button.addEventListener('click', clickHandler.bind(null, "You're welcome!"));
}

حالا کد ما خطایی ایجاد نمی کند. بنابراین strictBindCallApply مطمئن می شود که از توابع bind یا call یا apply به صورتی استفاده نکنید که باعث ایجاد خطا شوید.

گزینه های بعدی strictPropertyInitialization و noImplicitThis می باشند که باز هم مربوط به کار با کلاس ها هستند و فعلا از آن ها عبور می کنیم. گزینه بعدی alwaysStrict است که وظیفه تعیین حالت strict mode را در فایل های جاوا اسکریپت کامپایل شده دارد. اگر این گزینه فعال باشد و فایل های تایپ اسکریپت خود را کامپایل کنید، در بالای هر فایل جاوا اسکریپت کامپایل شده رشته زیر را می بینید:

"use strict";

قبلا در مورد strict mode در جاوا اسکرپیت صحبت کرده ایم و انتظار دارم که بدانید Strict mode چیست. در صورتی که اطلاعی از آن ندارید به «strict mode در جاوا اسکریپت» مراجعه کنید.

گزینه های دیگر noUnusedLocals و noUnusedParameters و noImplicitReturns هستند که گزینه های کمکی و مربوط به کیفیت کدنویسی شما هستند. noUnusedLocals می گوید که نباید متغیرهای محلی تعریف کنیم که از آن ها استفاده نخواهیم کرد. مثلا:

function clickHandler(message: string) {
  let userName = 'Max';
  console.log('Clicked! ' + message);
}

در این تابع متغیری به نام username داریم که به صورت محلی درون تابع تعریف شده است و هیچ وقت هم از آن استفاده نکرده ایم. البته استفاده از متغیرهای سراسری (غیر محلی) بدون استفاده، مشکلی ندارد چرا که تایپ اسکریپت با خودش می گوید شاید شما به آن نیاز داشته باشید:

let appId = 'abc';
function clickHandler(message: string) {
  let userName = 'Max';
  console.log('Clicked! ' + message);
}

در کد بالا متغیر appId بدون مشکل خواهد بود اما زیر username خط زرد رنگ کشیده می شود (به عنوان هشدار).

گزینه بعدی noUnusedParameters است که می گوید پارامترهای تعریف شده و بدون استفاده مجاز نیستند. به طور مثال اگر بگوییم:

let appId = 'abc';
function clickHandler(message: string, age: number) {
  let userName = 'Max';
  console.log('Clicked! ' + message);
}
// a comment
if (button) {
  button.addEventListener('click', clickHandler.bind(null, "You're welcome!", 30));
}

در تعریف تابع clickHandler به خطا برمی خوریم چرا که هیچ استفاده ای از پارامتر age نداشته ایم. در نهایت گزینه noImplicitReturns را داریم که می گوید نباید توابعی داشته باشیم که برخی از اوقات چیزی را return کرده و برخی از مواقع دیگر چیزی return نکنند. به طور مثال:

function add(n1: number, n2: number) {
  if (n1 + n2 > 0) {
    return n1 + n2;
  }
}

در تابع بالا اگر مجموع n1 و n2 مثبت باشد (بزرگ تر از صفر) مقدار مجموع را Return می کنیم اما اگر اینطور نباشد هیچ چیزی return نمی شود. این کد باعث خطا می شود و اگر نمی خواهیم چیزی return شود باید «هیچ» را return کنیم:

function add(n1: number, n2: number) {
  if (n1 + n2 > 0) {
    return n1 + n2;
  }
  return;
}

بدین شکل به تایپ اسکریپت اعلام کرده ایم که نمی خواهیم چیزی از سمت این تابع برگردانده شود مگر آنکه منطبق با شرط ذکر شده باشد.

گزینه های بعدی که در قسمت Module Resolution می بینید پیشرفته هستند و به درد ما نمی خورند بنابراین از آن ها رد می شوم. در صورتی که تمایل به یادگیری آن ها داشتید می توانید به وب سایت رسمی تایپ اسکریپت مراجعه کنید. گزینه های بعدی در قسمت sourceMap نیز مربوط به تنظیمات sourceMap است که در جلسات قبل با آن آشنا شدیم. نهایتا گزینه های Experimental Options را داریم که در فصل های آینده آن ها را بررسی خواهیم کرد.

حالا که تمام گزینه های فایل Tsconfig را بررسی کردیم (به استثناء برخی از موارد) باید وارد مسائل پیشرفته تر مثل کلاس ها شویم.

فایل tsconfig: گزینه‌های باقی مانده

Other Options in tsconfig File