اینترفیس در TypeScript چیست و چه‌وقت به کار می‌آید؟
آموزش

اینترفیس در TypeScript چیست و چه‌وقت به کار می‌آید؟

اینترفیس قراردادِ شکلِ داده در TypeScript است؛ هر شیء‌ای که با آن جا می‌گیرد باید فیلدهای لازم را داشته باشد، وگرنه برنامه اصلاً کامپایل نمی‌شود

تحریریه‌ی دینا کد
نویسنده
۴ دقیقه مطالعه۲ بازدید
اشتراک گذاری۲
فهرست مطالب
  1. ۱اینترفیس دقیقاً چه چیزی را توصیف می‌کند؟
  2. ۲چه‌وقت کامپایلر از اینترفیس خطا می‌گیرد؟
  3. ۳کلاس‌ها چطور اینترفیس را پیاده می‌کنند؟
  4. ۴اینترفیس یا type؟ کدام را انتخاب کنم؟
  5. ۵از کجا تمرینش کنم؟

اینترفیس در TypeScript قراردادِ شکلِ داده است؛ اسمی است که به کامپایلر می‌گوید «هر شیء‌ای که با این اسم جا می‌گیرد، باید این فیلدها را با این نوع‌ها داشته باشد». از آن لحظه به بعد، اگر فیلدی جا بیفتد یا نوعش غلط باشد، اصلاً کامپایل نمی‌شود و خطا را همان‌جا می‌بینی؛ نه در مرورگرِ کاربر.

اینترفیس دقیقاً چه چیزی را توصیف می‌کند؟

فرض کن از API مقاله می‌گیری. تا وقتی شکلش را فقط در ذهنت نگه داری، هر جایی که آن شیء رد می‌شود باید حواست باشد فیلدهایش چه بودند. با اینترفیس همین حواس‌جمعی را به کامپایلر می‌سپاری:

tsinterface Article {
  title: string;
  slug: string;
  coverImage?: string;
}

علامت سؤال یعنی این فیلد اختیاری است؛ ممکن است سرور نفرستد و اشکالی ندارد. ولی title و slug اجباری‌اند و رد شدن بدون آن‌ها یعنی خطا.

اینترفیس را جایی به کار می‌بری که داده رد و بدل می‌شود: ورودی توابع، خروجی API، پراپ‌های یک کامپوننت. هر جای برنامه که لازم است بگویی «آرگومانی که می‌دهی باید این شکل را داشته باشد»، همان‌جا جای اینترفیس است.

tsfunction showSummary(article: Article) {
  console.log(article.title);
}

showSummary({ title: 'سلام' });
// error TS2345: Argument of type '{ title: string; }' is not assignable to parameter of type 'Article'.
//   Property 'slug' is missing in type '{ title: string; }' but required in type 'Article'.

چه‌وقت کامپایلر از اینترفیس خطا می‌گیرد؟

دو خطای رایج را با TypeScript 5.9 آزموده‌ام. اولی را بالا دیدی: فیلد اجباری جا افتاده است. دومی مال فیلد فقط‌خواندنی است:

tsinterface Point {
  readonly x: number;
  readonly y: number;
}

const p: Point = { x: 1, y: 2 };
p.x = 5;
// error TS2540: Cannot assign to 'x' because it is a read-only property.

readonly یعنی بعد از ساخته‌شدن، این مقدار دیگر عوض نمی‌شود. برای شناسه‌ها و مختصات‌هایی که نباید تغییر کنند دقیقاً همان چیزی است که می‌خواهی؛ کامپایلر هم اجازه‌ی اشتباه را از تو می‌گیرد، نه از کاربر.

کلاس‌ها چطور اینترفیس را پیاده می‌کنند؟

با کلیدواژه‌ی implements کلاس متعهد می‌شود که شکل اینترفیس را کامل اجرا کند:

tsinterface Shape {
  area(): number;
}

class Square implements Shape {
  constructor(private side: number) {}
  area() {
    return this.side ** 2;
  }
}

اگر Square متد area نداشت یا نوع بازگشتی‌اش را اشتباه می‌داد، خطا همان موقع می‌آمد، نه وسط یک محاسبه. implements برای وقتی است که چند کلاس قرار است یک رفتار مشترک داشته باشند؛ مثلاً همه‌ی اشکال هندسی area داشته باشند و هر کدام به روش خودشان حسابش کنند.

اینترفیس یا type؟ کدام را انتخاب کنم؟

برای شکل یک شیء، اینترفیس انتخاب پیش‌فرض من است؛ باز است و اگر لازم شد، بعداً قابل گسترش. هر جا به یونیون یا ترکیب چند نوع رسیدی، آن‌جا فقط type جواب می‌دهد. این مقایسه را با مثال‌های واقعی کامپایلر در تفاوت interface و type در TypeScript جدا کرده‌ایم؛ آن پست مکمل همین مطلب است و بعد از این‌جا خواندنش منطقی است.

از کجا تمرینش کنم؟

خواندن بدون نوشتن، این مفهوم را جا نمی‌اندازد. در دوره‌ی آموزش TypeScript از صفر، تمرین‌های اینترفیس را همان‌جا در مرورگر می‌نویسی و همان لحظه خطای کامپایلر را می‌بینی. چیزی نصب نمی‌کنی و محیطی نمی‌سازی؛ فقط کد می‌زنی.

برچسب‌ها:#TypeScript#تایپ
تحریریه‌ی دینا کد
نویسنده

نظرها

اولین نفری باشید که نظر می‌دهد
برای ثبت نظر وارد شوید

سؤالتان را بپرسید یا تجربه‌تان را بنویسید تا نویسنده‌ی مطلب پاسخ بدهد.

مطالب مرتبط

از همین دسته
diff در گیت چیست و چه‌وقت استفاده می‌شود؟
آموزش

diff در گیت چیست و چه‌وقت استفاده می‌شود؟

git diff دو نسخه از کدها را کنار هم می‌گذارد و خط‌به‌خط نشان می‌دهد چه چیزی عوض شده. یک نگاه به diff قبل از هر add و commit کافی است

تحریریه‌ی دینا کد۷ دقیقه
branch در گیت چیست و چه‌وقت بسازیمش؟
آموزش

branch در گیت چیست و چه‌وقت بسازیمش؟

branch یک اشاره‌گر متحرک به یکی از کامیت‌هاست، نه کپی پوشه‌ی پروژه. با git switch می‌سازی و جابه‌جا می‌شوی، با merge برمی‌گردانی و در پایان پاکش می‌کنی

تحریریه‌ی دینا کد۷ دقیقه
۲۰ تمرین پایتون با جواب، از آسان به سخت
آموزش

۲۰ تمرین پایتون با جواب، از آسان به سخت

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

تحریریه‌ی دینا کد۸ دقیقه