آموزش TypeScript جلسه 10 :Interface در TypeScript | تعریف Interface و مقایسه کامل با Type Alias

یکی از مهم‌ترین قابلیت‌های TypeScript برای ساخت کدهای تمیز، قابل نگهداری و مقیاس‌پذیر، استفاده از Interface است.

در پروژه‌های واقعی Angular، React و Node.js تقریباً همیشه با Interface سروکار خواهید داشت. Interface به ما کمک می‌کند ساختار داده‌ها، آبجکت‌ها و کلاس‌ها را به صورت استاندارد تعریف کنیم و از بروز خطاهای احتمالی جلوگیری کنیم.

در این جلسه یاد می‌گیریم:

• Interface چیست؟
• چرا باید از Interface استفاده کنیم؟
• تعریف Interface برای Object
• Interface در توابع
• Interface در کلاس‌ها
• Interface Extension
• تفاوت Interface و Type Alias
• بهترین روش استفاده در پروژه‌های واقعی

Interface چیست؟

Interface در TypeScript یک قرارداد (Contract) برای تعریف ساختار داده‌ها است.

به زبان ساده، Interface مشخص می‌کند یک Object باید چه ویژگی‌هایی داشته باشد.

مثال:

interface User {
  id: number;
  name: string;
}

اکنون هر شیء که از User استفاده کند باید این ساختار را رعایت کند.

const user: User = {
  id: 1,
  name: "Ali"
};

چرا از Interface استفاده کنیم؟

بدون Interface:

const user1: {
  id: number;
  name: string;
} = {
  id: 1,
  name: "Ali"
};

const user2: {
  id: number;
  name: string;
} = {
  id: 2,
  name: "Sara"
};

مشکل چیست؟

ساختار داده را بارها تکرار کرده‌ایم.

راه بهتر:

interface User {
  id: number;
  name: string;
}

استفاده:

const user1: User = {
  id: 1,
  name: "Ali"
};

const user2: User = {
  id: 2,
  name: "Sara"
};

کد خواناتر و نگهداری آن بسیار ساده‌تر می‌شود.

Property های اختیاری در Interface

گاهی برخی فیلدها الزامی نیستند.

interface User {
  id: number;
  name: string;
  email?: string;
}

اکنون email اختیاری است.

const user: User = {
  id: 1,
  name: "Ali"
};

Readonly Property

گاهی نمی‌خواهیم مقدار یک فیلد تغییر کند.

interface User {
  readonly id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: "Ali"
};

user.id = 5;

TypeScript خطا خواهد داد.

Interface برای Function

می‌توان ساختار توابع را نیز تعریف کرد.

interface SumFunction {
  (
    a: number,
    b: number
  ): number;
}

استفاده:

const sum: SumFunction = (
  a,
  b
) => a + b;

Interface برای Array

interface Product {
  id: number;
  title: string;
}

const products: Product[] = [
  {
    id: 1,
    title: "Laptop"
  },
  {
    id: 2,
    title: "Phone"
  }
];

Interface Extension

یکی از قابلیت‌های قدرتمند Interface امکان ارث‌بری است.

interface Person {
  name: string;
}

interface User extends Person {
  id: number;
}

استفاده:

const user: User = {
  id: 1,
  name: "Ali"
};

Interface در Class

در پروژه‌های بزرگ بسیار کاربرد دارد.

interface User {
  id: number;
  name: string;
}

class Customer
  implements User {

  constructor(
    public id: number,
    public name: string
  ) {}
}

TypeScript بررسی می‌کند که کلاس تمامی ویژگی‌های Interface را پیاده‌سازی کرده باشد.

Interface در Angular

در Angular معمولاً برای مدل API استفاده می‌شود.

export interface Hotel {
  id: number;
  name: string;
  city: string;
  price: number;
}

سرویس:

getHotels():
Observable<Hotel[]> {

  return this.http.get<
    Hotel[]
  >('/api/hotels');
}

مزیت:

• IntelliSense بهتر
• خطایابی سریع‌تر
• توسعه آسان‌تر

تفاوت Interface و Type Alias

جلسه قبل با Type Alias آشنا شدیم.

مثال Type Alias:

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

مثال Interface:

interface User {
  id: number;
  name: string;
}

در تعریف Object تقریباً مشابه هستند.

اما تفاوت‌هایی دارند.

Interface قابلیت Declaration Merging دارد

interface User {
  name: string;
}

interface User {
  age: number;
}

خروجی:

interface User {
  name: string;
  age: number;
}

اما در Type Alias این کار مجاز نیست.

Type Alias برای Union Type مناسب‌تر است

type Status =
  | "loading"
  | "success"
  | "error";

این ساختار را نمی‌توان با Interface تعریف کرد.

Type Alias برای Primitive Type

type UserId = number;

Interface چنین قابلیتی ندارد.

چه زمانی از Interface استفاده کنیم؟

برای:

• مدل داده‌ها
• API Response
• کلاس‌ها
• ساختار Object ها

Interface انتخاب مناسب‌تری است.

چه زمانی از Type Alias استفاده کنیم؟

برای:

• Union Types
• Primitive Types
• Tuple Types
• Function Types پیچیده

Type Alias گزینه بهتری است.

بهترین روش در پروژه‌های واقعی

در پروژه‌های Angular و React معمولاً این قانون استفاده می‌شود:

• برای Object ها از Interface
• برای Union Type ها از Type Alias

مثال:

interface User {
  id: number;
  name: string;
}

type UserStatus =
  | "active"
  | "inactive";

این روش خوانایی پروژه را افزایش می‌دهد.

جمع‌بندی

Interface یکی از مهم‌ترین ابزارهای TypeScript برای تعریف ساختار داده‌ها است.

مزایا:

• خوانایی بیشتر
• جلوگیری از خطا
• پشتیبانی از Extension
• پشتیبانی از Class ها
• مناسب برای مدل‌های داده

در پروژه‌های حرفه‌ای Angular تقریباً تمام Model ها و API Response ها با Interface تعریف می‌شوند.

در کنار Type Alias، Interface یکی از مهم‌ترین مفاهیمی است که هر توسعه‌دهنده TypeScript باید به آن مسلط باشد.

سوالات متداول (FAQ)

Interface در TypeScript چیست؟

ابزاری برای تعریف ساختار و قرارداد داده‌ها در TypeScript است.

تفاوت Interface و Type Alias چیست؟

Interface بیشتر برای Object ها و Class ها استفاده می‌شود اما Type Alias برای Union Type و Primitive Type مناسب‌تر است.

آیا Interface در JavaScript وجود دارد؟

خیر. Interface فقط در زمان توسعه توسط TypeScript استفاده می‌شود و در خروجی JavaScript حذف خواهد شد.

در Angular بهتر است از Interface استفاده کنیم یا Type Alias؟

برای مدل‌های داده و پاسخ API معمولاً Interface انتخاب بهتری است.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.