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

در پروژه‌های واقعی Angular، React و Node.js معمولاً Interfaceها فقط شامل چند Property ساده نیستند؛ بلکه از ویژگی‌هایی مانند readonly، optional properties، index signature و readonly array استفاده می‌کنند تا ساختار داده‌ها امن‌تر، خواناتر و قابل نگهداری‌تر شوند.

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

  • readonly چیست؟
  • Optional Property چیست؟
  • تفاوت readonly و const
  • Readonly Array
  • Index Signature
  • ترکیب قابلیت‌های مختلف Interface
  • بهترین روش استفاده در پروژه‌های واقعی

readonly چیست؟

گاهی می‌خواهیم بعد از ایجاد یک Object، مقدار بعضی از ویژگی‌ها دیگر قابل تغییر نباشد.

برای این کار از readonly استفاده می‌کنیم.

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

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

تغییر مقدار:

user.id = 5;

خروجی:

Cannot assign to 'id'
because it is a read-only property.

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

برای مقادیری که نباید در طول اجرای برنامه تغییر کنند.

مانند:

  • id
  • createdAt
  • orderNumber
  • invoiceNumber

مثال:

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

Optional Property چیست؟

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

علامت سؤال (?) این موضوع را مشخص می‌کند.

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

استفاده:

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

const user2: User = {
  id: 2,
  name: "Sara",
  email: "sara@test.com"
};

هر دو معتبر هستند.

مزایای Optional Property

فرض کنید فرم ثبت‌نام داریم.

interface RegisterUser {

  username: string;

  password: string;

  phone?: string;

  avatar?: string;

}

کاربر مجبور نیست تمام اطلاعات را وارد کند.

readonly با Optional

این دو قابلیت قابل ترکیب هستند.

interface User {

  readonly id: number;

  name: string;

  avatar?: string;

}

تفاوت readonly و const

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

const user = {
  id: 1
};

در این حالت:

user.id = 2;

کاملاً مجاز است.

اما:

interface User {
  readonly id: number;
}

اکنون:

user.id = 2;

خطا تولید می‌شود.

بنابراین:

  • const از تغییر Reference جلوگیری می‌کند.
  • readonly از تغییر Property جلوگیری می‌کند.

Readonly Array

گاهی می‌خواهیم عناصر آرایه نیز قابل تغییر نباشند.

interface User {

  readonly skills:
    readonly string[];

}

یا

const numbers:
ReadonlyArray<number> =
[1,2,3];

حال:

numbers.push(4);

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

Index Signature

اگر تعداد Propertyها مشخص نباشد از Index Signature استفاده می‌کنیم.

interface Errors {

  [key:string]:string;

}

استفاده:

const errors: Errors = {

  username:"Required",

  password:"Too Short"

};

این قابلیت در فرم‌های Angular بسیار کاربرد دارد.

Interface با Method

Interface فقط مخصوص Property نیست.

interface User {

  id:number;

  name:string;

  fullName():string;

}

استفاده:

const user: User = {

  id:1,

  name:"Ali",

  fullName(){

    return this.name;

  }

};

Interface در پروژه Angular

فرض کنید اطلاعات کاربر از API دریافت می‌شود.

export interface User {

  readonly id:number;

  firstName:string;

  lastName:string;

  avatar?:string;

}

در سرویس:

getUsers():

Observable<User[]>{

 return this.http.get<User[]>(
 "/api/users"
 );

}

این کار باعث می‌شود IntelliSense کامل و خطاهای کمتری داشته باشید.

اشتباهات رایج

استفاده بیش از حد از Optional

بد:

interface User{

 id?:number;

 name?:string;

 email?:string;

}

در این حالت تقریباً هیچ چیزی اجباری نیست.

readonly برای همه Propertyها

نیازی نیست همه ویژگی‌ها readonly باشند.

فقط مواردی که نباید تغییر کنند.

تعریف Interface بسیار بزرگ

به جای یک Interface با ۳۰ Property بهتر است Interfaceها را کوچک‌تر کنید.

بهترین روش استفاده

در پروژه‌های حرفه‌ای:

✔ id همیشه readonly باشد.

✔ اطلاعات اختیاری با ? تعریف شوند.

✔ برای فرم‌ها از Index Signature استفاده کنید.

✔ Interfaceها را کوچک و قابل استفاده مجدد طراحی کنید.

جمع‌بندی

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

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

  • readonly
  • Optional Property
  • Readonly Array
  • Index Signature
  • تفاوت readonly و const

این قابلیت‌ها تقریباً در تمام پروژه‌های بزرگ Angular و TypeScript استفاده می‌شوند و تسلط بر آن‌ها یکی از مهارت‌های ضروری هر توسعه‌دهنده Front-End است.

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

readonly در TypeScript چه کاربردی دارد؟

از تغییر مقدار یک Property بعد از ایجاد Object جلوگیری می‌کند.

Optional Property چیست؟

ویژگی‌ای است که وجود آن الزامی نیست و با علامت ? تعریف می‌شود.

تفاوت readonly و const چیست؟

const مانع تغییر Reference متغیر می‌شود، اما readonly از تغییر مقدار Property جلوگیری می‌کند.

آیا می‌توان readonly و Optional را با هم استفاده کرد؟

بله، هر دو قابلیت را می‌توان در یک Interface ترکیب کرد.