استفاده از type ها در تایپ اسکریپت

27 اسفند 1398
استفاده از type ها در تایپ اسکریپت

استفاده از type ها در تایپ اسکریپت

حالا که با مفاهیم static type و dynamic type آشنا شدید وقت بررسی بیشتر رسیده است. در جلسه ی قبل روی کد ساده ی زیر کار کردیم:

function add(n1: number, n2: number) {
  // if (typeof n1 !== 'number' || typeof n2 !== 'number') {
  //   throw new Error('Incorrect input!');
  // }
  return n1 + n2;
}

const number1 = 5;
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

حالا فرض کنید یک ثابت دیگر به این کد اضافه کنیم:

const number1 = 5; // 5.0
const number2 = 2.8;
const printResult = true;

مقدار printResult که برابر true است. من می خواهم این مقدار Boolean را نیز درون تابع خودم چاپ کنم بنابراین تابع را به شکل زیر تغییر می دهم:

function add(n1: number, n2: number, showResult: boolean) {
  if (showResult) {
    console.log(n1 + n2);
  } else {
    return n1 + n2;
  }
}

در این کد ابتدا پارامتر سومی به نام showResult معرفی کرده ایم و سپس بر اساس یک شرط if گفته ایم اگر showResult برابر true بود مقدار n1 + n2 را log و در غیر این صورت این مقدار را return کن. حالا دیگر نیازی به ثابت result و console.log جداگانه نداریم چرا که خود تابع add این کار را انجام می دهد بنابراین قسمت انتهایی کد را نیز به شکل زیر تغییر می دهیم:

add(number1, number2, printResult);

یعنی فقط تابع را صدا می زنیم. دوباره tsc app.ts را اجرا کنید تا فایل جاوا اسکریپت به روز شود. حالا اگر به مرورگر بروید مقدار 7.8 را در مرورگر خواهید دید. حالا بیایید کمی این کد را پیچیده تر کنیم. من یک ثابت دیگر نیز به ثابت هایمان اضافه می کنم:

const number1 = 5; // 5.0
const number2 = 2.8;
const printResult = true;
const resultPhrase = 'Result is: ';

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

function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  if (showResult) {
    console.log(phrase + n1 + n2);
  } else {
    return n1 + n2;
  }
}

به نظر شما خروجی این تابع چه چیزی خواهد بود؟ بگذارید تابع را صدا بزنیم تا نتیجه را ببینیم:

add(number1, number2, printResult, resultPhrase);

حالا اگر به مرورگر بروید نتیجه را به شکل زیر مشاهده می کنید:

نتیجه عملیات جمع در کنسول مرورگر
نتیجه عملیات جمع در کنسول مرورگر

همانطور که می بینید ثابت ما با موفقیت اضافه شده است اما باز به همان مشکل جلسه ی قبل برخورد کرده ایم و اعداد ما به صورت رشته با هم جمع زده شده و نتیجه ی 52.8 را نشان می دهند. چرا؟ به دلیل اینکه یک رشته را با اعداد مختلف جمع زده ام:

    console.log(phrase + n1 + n2);

برای حل این مشکل باید اعداد خود را به صورت جداگانه جمع بزنیم. به طور مثال:

function add(n1: number, n2: number, showResult: boolean, phrase: string) {
  const result = n1 + n2;
  if (showResult) {
    console.log(phrase + result);
  } else {
    return result;
  }
}

با جمع زدن جداگانه ی اعداد از تبدیل شدن آن ها به رشته جلوگیری می کنیم. با اجرای دوباره ی دستور tsc app.ts نتیجه ی صحیح زیر را در مرورگر مشاهده می کنیم:

نتیجه صحیح عملیات جمع در کنسول مرورگر
نتیجه صحیح عملیات جمع در کنسول مرورگر

حالا از شما سوالی دارم. چرا type ها را در هنگام تعریف ثابت ها مشخص نکردیم؟ آیا نباید نوع متغیرها نیز مانند پارامترها تعیین شود؟ ما در تایپ اسکریپت می توانیم type ها را در هنگام تعریف متغیرها نیز مشخص کنیم نه فقط پارامترها اما در این زبان چیزی به نام type inference وجود دارد. Type inference یعنی تایپ اسکریپت خودش حدس می زند که type متغیر شما از چه نوعی است و آن را به متغیر اختصاص می دهد. به طور مثال اگر موس خود را روی نام یکی از ثابت های ما ببرید، type آن برایتان نمایش داده می شود:

نمایش type یک ثابت یا const در جاوا اسکریپت
نمایش type یک ثابت یا const در جاوا اسکریپت

از آنجایی که از const استفاده کردیم، Type ما فقط number نیست بلکه دقیقا عدد 5 است! چرا که در const ها در جاوا اسکریپت اجازه ی تغییر مقدار را نداریم. اگر به جای const از let استفاده کنیم و سپس موس را روی آن ببریم نوع number را برایمان نمایش می دهد:

نمایش type یک متغیر در جاوا اسکریپت
نمایش type یک متغیر در جاوا اسکریپت

البته توجه داشته باشید که ما می توانیم type ها را به صورت دستی برای متغیرها نیز تعریف کنیم:

let number1: number = 5;

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

let number1: number;

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

let number1: number;
number1 = 5;

اما یک رشته به آن بدهیم به خطا برمی خوریم:

let number1: number;
number1 = '5';

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

همچنین اگر بخواهیم بعدا از type متغیر را تغییر بدهیم به ما اخطار می دهد. به طور مثال اگر ثابت resultPhrase را به شکل زیر تغییر بدهیم:

let resultPhrase = 'Result is: ';
resultPhrase = 0;

با خطا روبرو می شویم چرا که هنگام تعریف resultPhrase قابلیت type inference در زبان تایپ اسکریپت، type متغیر را «رشته» تعیین کرده است اما در خط بعد این type را به «عدد» تغییر داده ایم. از آنجایی که تایپ اسکریپت static type است اجازه ی تغییر type ها را نداشته و با خطا روبرو می شویم (در زیر resultPhrase خط قرمز کشیده می شود). وظیفه ی تایپ اسکریپت همین است!

در قسمت بعد type های بیشتری را بررسی خواهیم کرد.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جامع تایپ اسکریپت توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر
12 دی 1401
این قضیه که وقتی متغیر مقدار اولیه داره عملا به صورت خودکار نوعشم تعریف میشه نکته جالبی بود. مرسی

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

پوریا امامی
24 اردیبهشت 1399
بنظرم بهتر در کمتر مواقعه ای از نوع داده ای any(بدون نوع داده ای) استفاده کنیم چون مهم ترین کار تایپ اسکریپت اینه که میشه نوع متغیر ها رو تعریف کرد و اینجوری باز هم کدمون تمیز تر و دقیق تر میشه

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مقالات مرتبط
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو