آموزش Interface در تایپ اسکریپت به زبان ساده

در این مقاله قصد داریم با یکی از ویژگی‌های کلیدی تایپ اسکریپت به نام رابط (Interface) آشنا شویم. رابط ابزاری قدرتمند برای تعریف ساختار داده‌هاست و به ما کمک می‌کند تا کدهای تمیزتر، قابل فهم‌تر و با خطای کمتری بنویسیم. ادامه این مطلب راهنمای جامعی برای آموزش Interface در تایپ اسکریپت است.

مقدمه‌ای بر رابط در تایپ اسکریپت

در دنیای برنامه‌نویسی، ساختار و نظم نقش کلیدی در خوانایی، کارآمدی و پایداری کد ایفا می‌کنند. تایپ اسکریپت، زبانی قدرتمند بر پایه‌ی JavaScript، با ارائه‌ی ابزارهای مختلفی به شما کمک می‌کند تا ساختار داده‌های خود را به طور دقیق و مشخص تعریف کنید. یکی از این ابزارها، رابط (Interface) نام دارد.

مرجع کامل و تخصصی آموزش جاوا اسکریپت + اعطای گواهینامه دوره

کلیک کنید

رابط، مانند یک قالب یا الگو عمل می‌کند و به شما این امکان را می‌دهد تا ساختار دقیق اشیاء (Object) خود را مشخص کنید. این کار باعث می‌شود تا نوع داده‌ی هر ویژگی (Property) در شیء به طور واضح مشخص شود و از بروز خطاهای احتمالی جلوگیری شود.

فرض کنید در حال ساخت یک برنامه‌ی مدیریت کتابخانه هستید. قطعا نیاز دارید تا اطلاعات مربوط به هر کتاب را ذخیره کنید. این اطلاعات شامل مواردی مثل عنوان کتاب، نویسنده، سال انتشار و … می‌شود. حالا تصور کنید که این اطلاعات را بدون هیچ ساختاری، به صورت دلخواه در متغیرهای مختلف ذخیره کنید. قطعا بعد از مدتی کار کردن با این کد، خواندن و مدیریت آن بسیار دشوار خواهد شد.

آموزش اینترفیس در تایپ اسکریپت: اهمیت تعریف ساختار

فرض کنید در حال ساخت یک برنامه‌ی مدیریت کتابخانه هستید. قطعا نیاز دارید تا اطلاعات مربوط به هر کتاب را ذخیره کنید. این اطلاعات شامل مواردی مثل عنوان کتاب، نویسنده، سال انتشار و … می‌شود. حالا تصور کنید که این اطلاعات را بدون هیچ ساختاری، به صورت دلخواه در متغیرهای مختلف ذخیره کنید. قطعا بعد از مدتی کار کردن با این کد، خواندن و مدیریت آن بسیار دشوار خواهد شد.

Interface در تایپ اسکریپت به ما این امکان را می‌دهد تا یک الگو یا قالب برای ساختار داده‌هایمان تعریف کنیم. این الگو مشخص می‌کند که هر شیء (Object) از این نوع، چه ویژگی‌ها (Property) و مقادیر (Value) قابل قبولی دارد.

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

Declare در تایپ اسکریپت: معرفی رابط

برای تعریف یک رابط در تایپ اسکریپت از کلیدواژه‌ی interface استفاده می‌کنیم. بعد از آن، یک نام برای رابط انتخاب کرده و سپس درون آکولاد (Curly Braces) مشخص می‌کنیم که این رابط شامل چه ویژگی‌هایی می‌شود.

برای تعریف هر ویژگی، ابتدا نام آن را می‌نویسیم، سپس یک کولون (Colon) قرار می‌دهیم و در نهایت نوع داده‌ی آن ویژگی را مشخص می‌کنیم.

مثال: تعریف رابط برای یک کتاب:

interface Book {
  title: string;
  author: string;
  yearPublished: number;
}

در این مثال، رابطی به نام Book تعریف کرده‌ایم که شامل سه ویژگی است:

• title: عنوان کتاب که باید از نوع رشته (String) باشد.
• author: نویسنده‌ی کتاب که باید از نوع رشته (String) باشد.
• yearPublished: سال انتشار کتاب که باید از نوع عدد (Number) باشد.

حالا هر شیئی که بخواهد از نوع Book باشد، باید این سه ویژگی را با همان انواع داده‌ی تعریف شده داشته باشد.

استفاده از Interface  در تایپ اسکریپت

وقتی رابطی را تعریف کردیم، می‌توانیم از آن برای ایجاد اشیاء (Object) جدید استفاده کنیم. برای این کار، بعد از نام متغیر، یک کولون قرار می‌دهیم و سپس نوع آن را به صورت interfaceName تعریف می‌کنیم.

مثال: ایجاد یک شیء از نوع Book:

let book1: Book = {
  title: "قلعه حیوانات",
  author: "جورج اورول",
  yearPublished: 1945,
};

در این کد، شیئی به نام book1 ایجاد کرده‌ایم که از نوع Book است. همانطور که می‌بینید، این شیء دارای سه ویژگی title, author و yearPublished است که دقیقا با آنچه در رابط Book تعریف کرده بودیم مطابقت دارد.

Namespace در تایپ اسکریپت: سازماندهی رابط‌ها

با افزایش تعداد رابط‌ها در پروژه، ممکن است با مشکل تداخل نام‌ها مواجه شویم. برای سازماندهی بهتر، می‌توانیم از Namespace در تایپ اسکریپت استفاده کنیم. Namespace به ما این امکان را می‌دهد تا رابط‌های مرتبط را در یک گروه دسته‌بندی کنیم.

دوره جامع آموزش Reactjs

کلیک کنید

مثال: استفاده از Namespace برای رابط Book:

namespace Library {
  interface Book {
    title: string;
    author: string;
    yearPublished: number;
  }
}

در این مثال، رابط Book را درون یک Namespace به نام Library قرار داده‌ایم. حالا برای استفاده از این رابط، باید از نام کامل آن یعنی Library.Book استفاده کنیم.

Abstract در تایپ اسکریپت: رابط‌های انتزاعی

در برخی موارد، ممکن است بخواهیم یک رابط کلی تعریف کنیم که جزئیات آن در رابط‌های دیگر مشخص شود. برای این کار از کلیدواژه‌ی abstract برای تعریف رابط در تایپ اسکریپت استفاده می‌کنیم.

مثال: رابط انتزاعی Publication:

abstract class Publication {
  abstract title: string;
  abstract yearPublished: number;
}

در مثال بالا، رابط Publication دو ویژگی انتزاعی به نام title و yearPublished دارد. این به این معنی است که هر شیئی که از این رابط مشتق شده باشد، باید این دو ویژگی را با مقادیر مشخص پیاده‌سازی کند.

پیشنهاد مطالعه: آشنایی با برنامه نویسی بک اند با جاوا اسکریپت + معرفی 5 فریم ورک

Generic در تایپ اسکریپت: رابط‌های عمومی

در تایپ اسکریپت می‌توانیم از رابط‌های Generic برای تعریف ساختار داده‌هایی استفاده کنیم که نوع داده‌ی ویژگی‌هایشان می‌تواند متغیر باشد. برای این کار از علامت سوال (?) به جای نوع داده‌ی خاص استفاده می‌کنیم.

مثالی برای ایجاد Interface در تایپ اسکریپت از نوع عمومی – رابط Generic Book:

interface Book {
  title: string;
  author: string;
  yearPublished: number;
  data?: T;
}

در این مثال، رابط Book را به صورت Generic تعریف کرده‌ایم. این رابط دارای چهار ویژگی است:

• title: عنوان کتاب که باید از نوع رشته (String) باشد.
• author: نویسنده‌ی کتاب که باید از نوع رشته (String) باشد.
• yearPublished: سال انتشار کتاب که باید از نوع عدد (Number) باشد.
• data: یک ویژگی اختیاری که می‌تواند هر نوع داده‌ای را ذخیره کند.

حالا می‌توانیم از این رابط برای ایجاد اشیاء با انواع داده‌ی مختلف برای data استفاده کنیم.

مثال: استفاده از Book Generic با انواع مختلف:

let book1: Book = {
  title: "قلعه حیوانات",
  author: "جورج اورول",
  yearPublished: 1945,
  data: "خلاصه داستان",
};

let book2: Book = {
  title: "هزار و یک شب",
  author: "مولانا",
  yearPublished: 1256,
  data: 1001,
};

در این کد، دو شیء از نوع Book با انواع مختلف برای data ایجاد کرده‌ایم. book1 دارای data از نوع رشته (String) و book2 دارای data از نوع عدد (Number) است.

Enum در تایپ اسکریپت: رابط‌های با مقادیر محدود

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

مثال ایجاد Interface در تایپ اسکریپت، رابط Enum BookCategory:

enum BookCategory {
  Fiction,
  NonFiction,
  Poetry,
}

interface Book {
  title: string;
  author: string;
  yearPublished: number;
  category: BookCategory;
}

در این مثال، Enum BookCategory را با سه مقدار Fiction, NonFiction و Poetry تعریف کرده‌ایم. سپس رابط Book را به گونه‌ای آپدیت کردیم که دارای یک ویژگی به نام category از نوع BookCategory باشد. حالا هر شیئی از نوع Book باید دارای دسته‌بندی (Category) مشخصی از بین مقادیر تعریف شده در Enum باشد.

پیشنهاد مطالعه: Queryselector در جاوا اسکریپت به زبان ساده

تفاوت type و interface در تایپ اسکریپت

در تایپ اسکریپت، هم از type و هم از interface برای تعریف ساختار داده‌ها استفاده می‌شود. اما تفاوت‌هایی بین این دو وجود دارد:

دوره جامع آموزش جاوا اسکریپت به صورت کاربردی

کلیک کنید

• interface فقط می‌تواند برای تعریف ساختار اشیاء (Object) استفاده شود، در حالی که type برای انواع داده‌های دیگر مثل رشته (String)، عدد (Number)، Boolean و … نیز قابل استفاده است.
• interface می‌تواند شامل روش‌ها (Methods) نیز باشد، در حالی که type فقط می‌تواند شامل ویژگی‌ها (Properties) باشد.
• interface می‌تواند به طور وراثتی (Inheritance) به رابط‌های دیگر متصل شود، در حالی که type نمی‌تواند.

نکات مهم:

• Interface در تایپ اسکریپت فقط می‌تواند برای تعریف ساختار اشیاء (Object) استفاده شود.
• رابط‌ها می‌توانند شامل روش‌ها (Methods) نیز باشند.
• رابط‌ها می‌توانند به طور وراثتی (Inheritance) به رابط‌های دیگر متصل شوند.
• از Generic type می‌توان برای تعریف رابط‌هایی استفاده کرد که نوع داده‌ی ویژگی‌هایشان می‌تواند متغیر باشد.

Generic type چیست؟

همانطور که قبلا گفتیم، Generic type در تایپ اسکریپت به ما این امکان را می‌دهد تا رابط‌هایی تعریف کنیم که نوع داده‌ی ویژگی‌هایشان می‌تواند متغیر باشد.

چه زمانی باید از رابط (Interface) استفاده کنیم؟

هر زمان که بخواهید ساختار اشیاء (Object) خود را به طور دقیق و مشخص تعریف کنید، باید از رابط استفاده کنید.

تفاوت بین رابط (Interface) و type چیست؟

رابط فقط می‌تواند برای تعریف ساختار اشیاء (Object) استفاده شود، در حالی که type برای انواع داده‌های دیگر مثل رشته (String)، عدد (Number)، Boolean و … نیز قابل استفاده است. رابط‌ها می‌توانند شامل روش‌ها (Methods) نیز باشند، در حالی که type فقط می‌تواند شامل ویژگی‌ها (Properties) باشد. رابط‌ها می‌توانند به طور وراثتی (Inheritance) به رابط‌های دیگر متصل شوند، در حالی که type نمی‌تواند.

پیشنهاد مطالعه: آموزش ساخت دکمه با جاوا اسکریپت + نمونه کد

چگونه از رابط‌ها به طور مجدد استفاده کنیم؟

می‌توانید رابط‌ها را در فایل‌های جداگانه تعریف کنید و سپس از آن‌ها در فایل‌های دیگر import کنید.

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

با استفاده از رابط‌ها، نوع داده‌ی هر متغیر به طور واضح مشخص می‌شود. این کار باعث می‌شود تا خواندن کد برای سایر برنامه‌نویسان آسان‌تر شود.

جمع بندی

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

مرجع کامل و تخصصی آموزش طراحی سایت + اعطای گواهینامه دوره

کلیک کنید

با استفاده از رابط‌ها می‌توانیم:

• ساختار داده‌هایمان را به طور دقیق و مشخص تعریف کنیم. رابط‌ها به ما این امکان را می‌دهند تا ساختار دقیق اشیاء (Object) خود را مشخص کنیم. این کار باعث می‌شود تا کدمان خواناتر و قابل فهم‌تر شود و همچنین از بروز خطاهای احتمالی جلوگیری می‌کند.
• از تداخل نام‌ها جلوگیری کنیم. با استفاده از Namespace می‌توانیم رابط‌های مرتبط را در یک گروه دسته‌بندی کنیم. این کار باعث می‌شود تا از تداخل نام‌ها بین رابط‌ها جلوگیری شود و کدمان سازمان‌یافته‌تر شود.
• از کدهایمان به طور مجدد استفاده کنیم. رابط‌ها به ما این امکان را می‌دهند تا از کدهایمان به طور مجدد در قسمت‌های مختلف برنامه استفاده کنیم. این کار باعث می‌شود تا کدمان کارآمدتر و پویاتر شود.
• قابلیت خواندن کد را افزایش دهیم. با استفاده از رابط‌ها، نوع داده‌ی هر متغیر به طور واضح مشخص می‌شود. این کار باعث می‌شود تا خواندن کد برای سایر برنامه‌نویسان آسان‌تر شود.

اگر به فکر یادگیری جاوا اسکریپت و تایپ اسکریپت به صورت حرفه‌ای هستید می‌توانید از دوره‌های آموزش جاوا اسکریپت و آموزش برنامه نویسی مکتب خونه استفاده کنید.