کار با Alias ها و return type ها

27 اسفند 1398
کار با Alias ها و return type ها

کار با Alias ها

زمانی که با union type ها کار می کنید ممکن است تایپ کردن آن ها خسته کننده باشد. به طور مثال هر بار نوشتن string | number و... کد را شلوغ می کند. برای حل این مشکل می توانید تایپی را بنویسید که union type شما را در خود نگه دارد (چیزی شبیه یک متغیر برای تایپ ها). به این نگهدارنده alias (به معنی «نام مستعار») می گویند. برای انجام این کار باید از کلیدواژه ی type استفاده کنید و سپس نام انتخابی خود را بنویسید. مثال:

type Combinable = number;

نام combinable بر اساس سلیقه ی شخصی من است و شما می توانید هر نام دیگری را برایش انتخاب کنید. اگر دقت کنید انجام چنین کاری (کد بالا) خیلی عاقلانه نیست چرا که به جای نوشتن number حالا یک alias تعریف کرده ایم و کد ها بیهوده شلوغ شده است. به همین دلیل است که معمولا برای ذخیره ی یک تایپ از آن ها استفاده نشده و در مواقعی که نیاز به union type ها داشته باشیم از آن ها استفاده می کنیم. مثلا:

type Combinable = number | string;

اگر یادتان باشد در جلسه ی قبل چنین تابعی را تعریف کرده بودیم:

function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: 'as-number' | 'as-text'
) {
  let result;
  if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

حالا می توانیم کد این تابع را ساده تر کنیم و به جای number | string فقط مقدار combinable را ذکر کنیم:

function combine(
  input1: Combinable,
  input2: Combinable,

همچنین می توانیم برای literal type ای که در همین تابع تعریف کرده بودیم (as-number و as-text) یک alias جدید تعریف کنیم:

type ConversionDescriptor = 'as-number' | 'as-text';

حالا این alias را هم در تابع جایگذاری می کنیم:

type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';

function combine(
  input1: Combinable,
  input2: Combinable,
  resultConversion: ConversionDescriptor
) {
  let result;
// بقیه ی کد ها //

شاید قدرت آن ها در یک تابع ساده آنچنان دیده نشود اما اگر در یک برنامه ی واقعی کار کنید، متوجه می شوید که تعداد تایپ های union بسیار زیاد می شود و قابلیت استفاده از آن ها به شکل alias کد ها را بسیار ساده تر می کند.

همچنین باید بدانید که در استفاده از آن ها به union type ها و literal type ها محدود نیستید. به طور مثال زمانی که می خواهیم تایپ بعضی از اشیاء را به صورت دستی تعریف کنیم می توانیم به شکل زیر عمل کنیم:

type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 };

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

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}

function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}

ما می توانیم با کمک alias ها به راحتی این توابع را ساده تر کنیم:

type User = { name: string; age: number };

function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}

function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

return type ها در توابع (تایپ Void و undefined)

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

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

این تابع علاوه بر تایپ های پارامترهای ورودی می تواند تایپ دیگری به نام return type بگیرد. اگر موس خود را روی add ببرید، این تایپ را می بینید که توسط تایپ اسکریپت حدس زده شده است:

نوع مقدار برگردانده شده توسط تابع، پس از علامت دو نقطه
نوع مقدار برگردانده شده توسط تابع، پس از علامت دو نقطه

تایپی که بعد از علامت دو نقطه نوشته شده است همان return type یا تایپ مقدار خروجی از تابع است. به همین ترتیب ما هم می توانیم این تایپ را تعیین کنیم:

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

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

البته تایپ جدیدی برای کار با return type ها وجود دارد که قبلا بحث آن را نکرده ایم. نام این تایپ void (به معنی «خلاء») است. به طور مثال به این تابع جدید توجه کنید:

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

function printResult(num: number): void {
  console.log('Result: ' + num);
}

این تابع یک عدد را دریافت کرده و این عدد را به همراه یک رشته برمی گرداند. حالا اگر آن را به شکل زیر صدا بزنیم:

printResult(add(5, 12));

یعنی تابع add را به عنوان پارامتر به تابع printResult داده ام. اگر این کد را اجرا کنیم، خروجی زیر را در کنسول مرورگر می بینیم که صحیح نیز می باشد:

Result: 17

حالا به نظر شما در چنین کدی، تایپ printResult چیست؟ شاید بگویید string چرا که درون این تابع یک رشته را ایجاد می کنیم اما این جواب غلط است. توجه داشته باشید که ما رشته ایجاد می کنیم اما هیچ چیزی را return نمی کنیم، بلکه مقدار نهایی را مستقیما console.log کرده ایم. بنابراین اصلا return type ای وجود ندارد! به همین دلیل return type این تابع void یا «خلاء» می باشد.

به زبان ساده تر void یعنی این تابع هیچ چیزی را return نکرده و دستور return را ندارد. تایپ دیگری نیز در تایپ اسکریپت وجود دارد که شباهت زیادی به void دارد و به آن undefined (به معنی «تعریف نشده») می گوییم. در حقیقت تفاوت بین این دو بسیار ناچیز است. زمانی که تابعی دستور return نداشته باشد، تایپ آن از نوع void است اما اگر تایپ تابعی را undefined بگذاریم یعنی دستور return را دارد اما چیزی را برنمی گرداند، مثل این تابع:

function printResult(num: number): undefined {
  console.log('Result: ' + num);
  return;
}

البته در عمل تابع بالا با تابع زیر هیچ تفاوتی ندارد:

function printResult(num: number): void {
  console.log('Result: ' + num);
}

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

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

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

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