اینترفیس در TypeScript چیست؟ راهنمای ساده با مثال

اینترفیس در 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 چیست؟

قرارداد شکل داده است: فیلدها و نوع‌ها را تعریف می‌کند و کامپایلر قبل از اجرا اجبارشان می‌کند.

چه فرقی با type دارد؟

برای شکل شیء معمولاً interface؛ برای یونیون و تایپ‌های محاسبه‌شده type. جزئیات در تفاوت interface و type.

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

در دوره TypeScript از صفر تمرین‌ها را در مرورگر می‌نویسی و خطای کامپایلر را همان لحظه می‌بینی.

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

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