اینترفیس (Interface) در تایپ اسکریپت

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

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

اینترفیس در تایپ اسکریپت چیست؟

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

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

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

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

بیشتر بخوانید: TypeScript؛ یک زبان برنامه‌نویسی با کارایی بالا

تعریف اینترفیس در تایپ اسکریپت

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

interface interface_name {  
          // variables' declaration  
          // methods' declaration  
} 

• Interface یک کلمه کلیدی است که برای تعریف یک اینترفیس در تایپ اسکریپت استفاده می‌شود.
•  Interface_name نام اینترفیس است.
• بدنه اینترفیس شامل متغیرها و تعریف متدها می‌شود.

مثال:

interface OS {  
    name: String;  
    language: String;  
}  
let OperatingSystem = (type: OS): void => {  
  console.log('Android ' + type.name + ' has ' + type.language + ' language.');  
};  
let Oreo = {name: 'O', language: 'Java'}  
OperatingSystem(Oreo); 

در مثال بالا، ما یک اینترفیس با نام OS به‌همراه دو ویژگی name و language از نوع رشته ایجاد کردیم. در مرحله بعد، تابعی را با یک آرگومان تعریف کرده‌ایم که نوع آن همان اینترفیس OS است. حال فایل تایپ اسکریپت را در جاوا اسکریپت کامپایل می‌کنیم و خروجی زیر به‌دست می‌دهد.

let OperatingSystem = (type) => {  
    console.log('Android ' + type.name + ' has ' + type.language + ' language.');  
};  
let Oreo = { name: 'O', language: 'Java' };  
OperatingSystem(Oreo); 

خروجی تکه کد به‌شکل زیر خواهد بود.

کاربرد اینترفیس در تایپ اسکریپت

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

تعریف شکل اشیا

از اینترفیس‌ می‌توان برای تعریف شکل اشیا استفاده کرد؛ بدین‌معناکه همه اشیا از یک نوع خاص دارای Properties و Methods یکسان هستند. این ویژگی می‌تواند سازگاری و خوانایی کدهای برنامه را بهبود بخشد. تکه کد زیر نمونه‌ای از تعریف شکل اشیا است.

interface IUser {
  id: number;
  name: string;
  email: string;
}

این اینترفیس شکل یک شی کاربر را مشخص می‌کند. هر شی‌ای که اینترفیس IUser را پیاده‌سازی می‌کند باید دارای id، name و email باشد.

مستندسازی کد

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

function createUser(user: IUser): void {
  // ایجاد کاربر (user) در دیتابیس
}

این تابع یک شی IUser را به‌عنوان پارامتر می‌گیرد. اینترفیس در اینجا برای دیگر توسعه‌دهندگان روشن می‌کند که چه نوع شی همراه با چه ویژگی‌هایی مورد انتظار است.

تشخیص زودهنگام خطاها

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

const user: IUser = {
  name: "John Doe",
  email: "john.doe@example.com",
};
createUser(user);

این فراخوانی (;createUser(user)) منجر به دریافت پیغام خطا می‌شود؛ زیرا شی user فاقد ویژگی id است.

استفاده مجدد از کد

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

interface IStorable {
  save(): void;
  load(): void;
}

class User implements IStorable {
  // ...

  save() {
    // ذخیره کاربر (user) در دیتابیس
  }

  load() {
    // بارگیری (load) کاربر از دیتابیس
  }
}

class Product implements IStorable {
  // ...

  save() {
    // ذخیره محصول (product) در دیتابیس
  }

  load() {
    // بارگیری (load) محصول از دیتابیس
  }
}

function saveStorable(storable: IStorable): void {
  storable.save();
}
// از این تابع می‌توان برای ذخیره هر شی‌ای که اینترفیس «IStorable» را پیاده‌سازی می‌کند، استفاده کرد.
saveStorable(user);
saveStorable(product);

وراثت در اینترفیس

ما می‌توانیم اینترفیس در تایپ اسکریپت را از اینترفیس‌های دیگر به ارث ببریم. به‌عبارت‌دیگر، تایپ اسکریپت اجازه می‌دهد تا یک اینترفیس از یک یا چند نوع Base به ارث برده شود.

نوع Base می‌تواند یک کلاس یا اینترفیس باشد. استفاده از کلمه کلیدی “extends” برای پیاده‌سازی وراثت در بین اینترفیس‌ها کاربرد دارد. مثال زیر به ما کمک می‌کند تا ارث‌بری اینترفیس را واضح‌تر درک کنیم.

child_interface extends parent interface{  
} 

مثال:

interface Person {   
   name:string  
   age:number  
}  
interface Employee extends Person {   
   gender:string  
   empCode:number  
}  
let empObject = <Employee>{};   
empObject.name = "Abhishek"  
empObject.age = 25   
empObject.gender = "Male"  
empObject.empCode = 43  
console.log("Name: "+empObject.name);  
console.log("Employee Code: "+empObject.empCode); 

خروجی کدهای بالا به شکل زیر خواهد بود:

توصیف نوع آرایه توسط اینترفیس

کاربرد دیگر اینترفیس‌ها، مشخص کردن نوع آرایه است. مثال زیر به ما کمک می‌کند تا اینترفیس از نوع آرایه را درک کنیم.

// آرایه‌ای که خروجی آن string است. 
interface nameArray {  
    [index:number]:string  
}  
// استفاده از اینترفیس  
let myNames: nameArray;  
myNames = ['Virat', 'Rohit', 'Sachin'];  
  // آرایه‌ای که عدد برمی‌گرداند.
interface ageArray {  
    [index:number]:number  
}  
var myAges: ageArray;  
myAges =[10, 18, 25];  
console.log("My age is: " +myAges[1]); 

در مثال بالا، nameArray رشته و ageArray عدد برمی‌گرداند. نوع شاخص در آرایه همیشه عددی است تا بتوانیم عناصر آرایه را با استفاده از موقعیت شاخص آن در آرایه بازیابی کنیم. در نهایت خروجی زیر به‌دست می‌آید.

اینترفیس در کلاس

تایپ اسکریپت به ما اجازه می‌دهد تا از اینترفیس در یک کلاس استفاده کنیم. کلاس با استفاده از کلمه کلیدی Implements اینترفیس را پیاده‌سازی می‌کند. با مثال زیر می‌توانیم این مفهوم را درک کنیم.

// تعریف اینترفیس برای کلاس  
interface Person {  
    firstName: string;  
    lastName: string;  
    age: number;  
    FullName();  
    GetAge();  
}  
// پیاده‌سازی اینترفیس  
class Employee implements Person {  
    firstName: string;  
    lastName: string;  
    age:number;  
    FullName() {  
        return this.firstName + ' ' + this.lastName;  
    }  
    GetAge() {  
        return this.age;  
    }  
    constructor(firstN: string, lastN: string, getAge: number) {  
        this.firstName = firstN;  
        this.lastName = lastN;  
        this.age = getAge;  
    }  
}  
// استفاده از کلاس به‎‌منظور پیاده‌سازی اینترفیس  
let myEmployee = new Employee('Abhishek', 'Mishra', 25);  
let fullName = myEmployee.FullName();  
let Age = myEmployee.GetAge();  
console.log("Name of Person: " +fullName + '\nAge: ' + Age); 

در مثال بالا، ما اینترفیس Person را با firstName، lastName به‌عنوان ویژگی و FullName و GetAge به‌عنوان تابع تعریف کردیم. کلاس Employee این اینترفیس را با استفاده از کلمه کلیدی implements پیاده‌سازی می‌کند. پس از پیاده‌سازی یک Interface، باید ویژگی‌ها و توابع کلاس را تعریف کنیم. اگر این ویژگی‌ها و توابع را پیاده‌سازی نکنیم، خطای زمان کامپایل ایجاد می‌شود. در این کد ما یک سازنده در کلاس نیز تعریف کردیم. بنابراین وقتی کلاس را نمونه‌سازی می‌کنیم، باید پارامترهای لازم را ارائه دهیم؛ در غیر این صورت در زمان کامپایل خطا دریافت خواهیم کرد.

گسترش اینترفیس توسط اینترفیس دیگر

اینترفیس‌ها می‌توانند اینترفیس‌های دیگر را گسترش دهند. این امکان به شما کمک می‌کند تا از موجودیت دیگر اینترفیس‌ها استفاده مجدد کنید و ویژگی‌ها و روش‌های خود را به آن‌ها بیفزایید. برای مثال، کد زیر اینترفیس Person را برای تعریف اینترفیس Customer گسترش می‌دهد:

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

interface Customer extends Person {
  customerId: number;
  email: string;
}

این اینترفیس یک شی Customer را تعریف می‌کند که دارای تمام ویژگی‌های شی Person، به‌علاوه دو ویژگی دیگر CustomerId و Email است.

تعیین نوع پارامترهای تابع و برگرداندن مقادیر 

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

function getCustomerName(customer: Customer): string {
  return customer.name;
}

تایپ اسکریپت این کد را بررسی می‌کند تا مطمئن شود که تابع getCustomerName فقط با یک شی Customer به‌عنوان پارامتر فراخوانی می‌شود. اگر اینطور نباشد برنامه با خطا مواجه خواهد شد.

تعریف ویژگی‌های Read Only

امکان علامت‌گذاری ویژگی‌ها با برچسب فقط خواندنی (Read Only) در تایپ اسکریپت فراهم است. با علامت‌گذاری به این شیوه، هیچ رفتاری در زمان اجرا تغییر نمی‌کند. این نکته را به‌خاطر داشته باشید که ویژگی که به‌عنوان فقط خواندنی علامت‌گذاری شده است را نمی‌توان در حین بررسی نوع نوشت. تکه کد زیر نمونه‌ای از علامت‌گذاری ویژگی به‌عنوان Read Only است.

interface SomeType {
 readonly prop: string;
}
 
function doSomething(obj: SomeType) {
 // می‌توانیم از 'obj.prop' مقادیر را بخوانیم.
 console.log(`prop has the value '${obj.prop}'.`);
 
 // اما نمی‌توانیم آن را مجدد assign کنیم.
 obj.prop = "hello";
// امکان assign به «prop» وجود ندارد؛ زیرا این مقدار دارای ویژگی read-only است.
}

استفاده از برچسب فقط خواندنی لزوما به این معنی نیست که یک مقدار کاملا تغییرناپذیر است؛  به‌عبارت دیگر، محتوای داخلی آن قابل تغییر نیست. این برچسب به این معنی است که خود ویژگی را نمی‌توان دوباره نوشت.

آرایه از نوع Read Only

ReadonlyArray نوع خاصی است که برای تعریف آرایه‌هایی استفاده می‌شود که نباید تغییر کنند. تکه کد زیر این کار را برای ما انجام می‌دهد.

function doStuff(values: ReadonlyArray<string>) {
 // می‌توانیم از 'values' بخوانیم.
 const copy = values.slice();
 console.log(`The first value is ${values[0]}`);
 
 // اما نمی‌توانیم 'values' را تغییر دهیم.
 values.push("hello!");
Property 'push' does not exist on type 'readonly string[]'.
}

ReadonlyArray بسیار شبیه به Readonly برای ویژگی‌ها است که می‌توانیم برای Intent از آن استفاده کنیم. وقتی تابعی را می‌بینیم که ReadonlyArrays را برمی‌گرداند، به ما می‌گوید که اصلا قرار نیست محتویات آرایه را تغییر دهیم. همچنین این مقدار به ما می‌گوید که می‌توانیم هر آرایه‌ای را بدون نگرانی به آن تابع منتقل کنیم؛ بدون نگرانی راجع‌به تغییر محتویات آن.

تفاوت اینترفیس و وراثت در تایپ اسکریپت

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

	اینترفیس	وراثت
1	اینترفیس ساختاری است که به‌عنوان یک قرارداد در برنامه ما عمل می‌کند. توسط اینترفیس در تایپ اسکریپت، توابع مورد نیاز را تعریف و از کلاس‌ها برای اجرای اینترفیس استفاده می‌کنیم.	وراثت یک برنامه‌نویسی شی‌گرا است که به اشیا مشابه اجازه می‌دهد تا عملکرد و داده‌ها را از یکدیگر به ارث ببرند.
2	در یک اینترفیس، ما فقط می‌توانیم ویژگی‌ها و توابع را تعریف کنیم.	در وراثت می‌توانیم از یک سوپرکلاس برای تعریف متغیرها و توابع استفاده کنیم. سوپرکلاس در تایپ اسکریپت کلاسی است که توسط کلاس دیگری به ارث می‌رسد.
3	اشیا از نوع اینترفیس نمی‌توانند هیچ تابع یا متغیر جدیدی را تعریف کنند.	در وراثت، می‌توانیم متغیرها و توابع خود را از یک زیرکلاس که یک سوپرکلاس را به ارث می‌برد، تعریف کنیم.
4	اینترفیس متغیرها و توابعی که باید در یک شی وجود داشته باشند را اعمال می‌کند.	یک زیرکلاس قابلیت سوپرکلاس را برای مطابقت با نیازهای سفارشی‌شده گسترش می‌دهد.
5	اینترفیس کلاس‌هایی است که شامل ساختار بدون بدنه (عملکردهای انتزاعی یا مجازی) هستند. بنابراین، ما باید اینترفیس را استخراج و سپس همه توابع را در زیرکلاس پیاده‌سازی کنیم.	وراثت فرآیندی است که در آن یک زیرکلاس ویژگی‌های کلاس خود را به ارث می‌برد.

بیشتر بخوانید: مزایا و معایب TypeScript چیست؟

آنچه در مفهوم اینترفیس در تایپ اسکریپت آموختیم

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