علی موسویان
علی موسویان
خواندن ۴ دقیقه·۱۰ ماه پیش

تفاوت type و interface در typescript، از کدوم استفاده کنم؟



وقتی من شروع کردم به یادگیری typescript یه سوالی خیلی سریع ذهنم رو مشغول کرد، که آقا فرق type و interface چی هست اصلا؟ جفتشون مگه باعث تعریف تایپ و ایجاد یه نوع type safety نمیشن؟
پس چرا دو نوع سینتکس متفاوتن؟ تو چه موقعیتی باید از کدوم استفاده کرد؟ اگه جفتشون یکار رو انجام میدن، پس بهتر نیست ببینم کدومش flexible تره و بچسبم به همون؟ اینجوری سردرد یادگیری یه سینتکس دیگه هم ندارم خب پس شروع کردم ببینم این دو تا چه تفاوتایی دارن باهم که باعث شده دو تا سینتکس واسه انجام یه کار ایجاد بشه؟ البته اینکه برنامه نویس جماعت درگیر غول آخر مصاحبه ـست و ماشالا مصاحبه کننده‌هام قربونشون برم از شیر مرغ تا جون آدمیزاد رو تو مصاحبه ها ازت میکشن بیرون تو تصمیمم بی‌تاثیر نبود.
بیاید اول با این شروع کنیم که چرا اصلا این سوال پیش میاد که تفاوت این دو تا با هم چی هست؟ مگه جفتشون چقدر میتونن کارای همدیگه رو انجام بدن؟ برای جواب دادن به این سوال اول باید یکم با جفتشون آشنا بشیم.


خب بیاید با type شروع کنیم، کلمه type تو typescript یه keyword ـه و تایپ هایی که ما میسازیم، type alias هستن، اینی که گفتم اصلا یعنی چی؟
ببینید type ها تو typescript شامل اینا میشن:

  • String
  • Number
  • Boolean
  • Array
  • Tuple
  • Enum
  • Advanced types

باقی چیزهایی که ما میسازیم type alias هستن که یعنی این امکان رو میدن که ما اسمی رو که میخوایم به یه تایپ خاص یا مجموعه‌ای از تایپ ها بدیم و باعث افزایش code readability بشیم.
ما میتونیم از type ها برای function & objects & variables ـهامون استفاده کنیم. ما میتونیم با استفاده کردن از تایپ ها (string یا boolean یا number یا ...) یا ساختن تایپ اختصاصی ـمون نشون بدیم که data ما قراره چه شکلی بشه. بیاید یه چندتا مثال برای type ببینیم:

در طرف مقابل ما interface هارو داریم که یه سینتکس ـه که از طریقش فقط نشون بدیم که data ـمون تو یه object قراره چجوری باشه، دقت کنید، فقط تو object ها.

خب تا اینجای داستان ممکنه با خودتون بگید که خب چه کاریه، اینجوری که بنظر میاد type نسبت به interface از flexibility بیشتری برخورداره درحالی که interface فقط object رو ساپورت میکنه پس بینگو، همینو انتخاب کنیم و بریم جلو، ولی خب قبلش بیاید شباهتای جفتشون رو باهم بررسی کنیم.

- Type safety:

خب بیاید بگیم که ما فعلا فقط میخوایم نمایش بدیم data ـمون قراره چه شکلی باشه، جفتشون میتونن اینو هندل کنن و سینتکس ـشون هم تقریبا یکیه.

- Type combination:

اگه بخوایم چندتا پراپرتی چندتا type یا interface رو باهم ترکیب کنیم چی؟ خب، جفتشون میتونن اینم انجام بدن.

با استفاده از type ها میتونیم اینجوری انجامش بدیم:

و تو interface هم به این شکل انجام میشه:

بیاید حالا برای فانکشن ـا همینو بررسی کنیم، جفتشون میتونن به این شکل فانکشن ـاروهم ساپورت کنن:

ولی خب مگه ما یکم بالاتر نگفتیم که interface فقط مختص object ـاست، این که فانکشنه، دلیل اینکه میتونیم از interface برای فانکشن ها استفاده کنیم اینه که یه فانکشن در حقیقت یه object ـه تو javascript.

و در نهایت اگه بخوایم تو class ها بررسیشون کنیم نتیجه میشه این:

خب به حد کافی راجب شباهتاشون حرف زدیم، حالا بیاید ببینیم چه تفاوت هایی باهم دارن:

بزارید با type شروع کنیم، یکارایی هست که امکان انجامش با interface وجود نداره، به عنوان مثال اگه شما بخواین یه type alias بسازید و فقط یکی از core type هارو بهش بدید، اینکار با interface امکان پذیر نیست ولی با type شدنیه.

حالا اگه بخوایم همینو تو interface دربیاریم سینتکسش میشه یچیزی تو مایه های زیر:

که در نظر داشته باشید این کار نمیکنه و کامپایلر براتون اررور میده، فقط خواستم محض اینکه سوال شده باشه آیا به این شکل ممکنه یا نه بهتون نمایشش بدم.

مورد دیگه‌ای که تو type ها وجود داره و تو interface نه بحث union ـه، که با استفاده ازش میشه تایپ های شخصی سازی شده‌تری بسازی.

مورد دیگه‌ای که وجود داره این ـه که تو typescript یه سری ویژگی های متنوع و پیچیده برای type ها در نظر گرفته شده که خب تو interface وجود نداره که شامل ویژگی هایی زیر میشه:

  • type inference
  • conditional types
  • type guards
  • mapped types
  • Utilities types

یه ویژگی که تو interface هست و تو type ها نه، بحثیه به اسم declaration merging که درواقع یعنی اگه شما چند interface هم‌ نام داشته باشید، کامپایلر تمامیش رو میگیره و در نهایت همه ـشون رو باهم merge میکنه.

در نهایت اگه بخوایم یه نتیجه گیری داشته باشیم این ـه که جفتشون type safety خوبی برای ما فراهم میکنن،
تو بیشتر موارد میتونیم از این دوتا به جای همدیگه استفاده کنیم ولی برای استفاده از بعضی ویژگی ها مثل union یا declaration merging یا تفاوت هایی که بالا ذکر شده نیاز به استفاده از شیوه مشخصشه، در نهایت این use case و code base شماست که انتخابتون رو مشخص میکنه.


typescripttypeinterfacefrontendtype interface
Front-End Developer - JavaScript, React, Vue
شاید از این پست‌ها خوشتان بیاید