جمعه , دی ۲۸ ۱۳۹۷
خانه / مقالات / برنامه نویسی / web developer / Front End / آموزش TypeScript(اینترفیس) – قسمت سوم
TypeScript چیست؟ - آموزش TypeScript-اینترفیس - آموزش TypeScript(کلاس ها)

آموزش TypeScript(اینترفیس) – قسمت سوم

مفهوم اینترفیس ها(Interfaces) در تایپ اسکریپت

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

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

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

تعریف اینترفیس در TypeScript

یک اینترفیس با کلمه کلیدی interface شروع شده و سپس خواص و متدهای مدنظر این قرارداد، به همراه نوع آن‌ها تعریف خواهند شد.

interface Book {
    id: number;
    title: string;
    author: string;
    pages?: number;
    markDamaged: (reason: string) => void;
}

تعریف اینترفیس با صفحات اختیاری(Optional Properties)

اینترفیس های با صفات اختیاری (optional properties) همانند دیگر ویژگی ها نوشته می شود.در هنگام تعریف در انتهای نام صفت انتخابی علامت ؟ گذاشته می شود.

interface myColor {
    color?: string;
    width?: number;
}

تعریف اینترفیس با صفات فقط خواندنی (Readonly properties)

این صفات  فقط موقعی که یک شی ایجاد می شود ،می توانند قابل تغییر باشند . شما می توانید این ویژگی را می توان با قرار دادن  readonly قبل از نام  شی  مشخص کنید.

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

تعریف انواع Function Types در اینترفیس

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

interface SearchFunc {
    (source: string, subString: string): boolean;
}

تعریف Indexable Types در اینترفیس

مشابه به نحوه استفاده از اینترفیس برای توصیف تابع، می توانیم انواع فهرست راهنما (index into) استفاده کنیم. در مثال زیر ، ما یک اینترفیس با نام  StringArray داریم که یک فهرست راهنما (index signature) دارد. این فهرست راهنما بیان می کند که زمانی که StringArray با عدد نشان داده می شود، مقداری از نوع string برمی گرداند.

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

Duck typing چیست؟

duck typing به این معنا است که اگر پرنده‌ای بتواند مانند یک اردک راه برود، شنا کند و صدا در بیاورد، یک اردک نامیده می‌شود. بنابراین همینقدر که یک شیء بتواند قراردادی را پیاده سازی کند، نوع آن با نوع اینترفیس یکی درنظر گرفته می‌شود. برای نمونه به مثال ذیل دقت کنید:

interface Duck {
    walk: () => void;
    swim: () => void;
    quack: () => void;
}

let probablyADuck = {
    walk: () => console.log('walking like a duck'),
    swim: () => console.log('swimming like a duck'),
    quack: () => console.log('quacking like a duck')
}

function FlyOverWater(bird: Duck) { }

FlyOverWater(probablyADuck); // works!

در این مثال اینترفیس Duck، متدهایی را تعریف کرده‌است که یک Duck می‌تواند انجام دهد.
در ادامه متغیر و شیءایی بدون تعریف نوع آن ایجاد شده‌است که همان متدهای اینترفیس Duck را پیاده سازی می‌کند و امضای آن‌ها با امضای متدهای اینترفیس Duck یکی هستند.
سپس متد FlyOverWater تعریف شده که در آن، نوع پارامتر ورودی آن به صورت صریحی به نوع اینترفیس Duck مقید شده‌است.
در سطر بعدی، این متد با دریافت شیء probablyADuck فراخوانی شده‌است و چون این شیء تمام اجزای قرارداد Duck را پیاده سازی کرده‌است، مشکلی در اجرای آن نخواهد بود. به این حالت duck typing می‌گویند.

استفاده از اینترفیس‌ها

استفاده از اینترفیس در تعریف اینترفیس دیگر

در مثال زیر اینترفیس Itest1 تمامی ویژگی های Itest2 و Itest3 را به ارث میبرد.

interface Itest1 extends Itest2, Itest3 {
   volume: number;
}
استفاده از اینترفیس در تعریف کلاس

برای استفاده از اینترفیس در تعریف کلاس از کلمه کلیدی implements استفاده می شود.

class book implements Lib {
  
}
استفاده از اینترفیس در تعریف function

برای استفاده از اینترفیس در تعریف function فقط کافیست نوع خروجی را نام اینترفیس قرار دهید.

function book(): Lib {
...
}

 


  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

۲ کامنت ها

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.