اینترفیس ها در زبان برنامه نویسی TypeScript – آموزش TypeScript

دوشنبه ۱۵ دی ۱۳۹۹
بازدید ۷۶۶ نفر
یعثوب سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر typescript-interfaces_7220 اینترفیس ها در زبان برنامه نویسی TypeScript - آموزش TypeScript

اینترفیس ها در زبان برنامه نویسی TypeScript

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

شیء زیر را در نظر بگیرید:

var person = { 
   FirstName:"Tom", 
   LastName:"Hanks", 
   sayHi: ()=>{ return "Hi"} 
};

var person = {

FirstName:"Tom",

LastName:"Hanks",

sayHi: ()=>{ return "Hi"}

};

امضای شیء فوق می تواند به این شکل باشد:

{ 
   FirstName:string, 
   LastName:string, 
   sayHi()=>string 
}

{

FirstName:string,

LastName:string,

sayHi()=>string

}

برای استفاده مجدد از این امضا برای شیء ها می توانیم آن را به صورت یک Interface تعریف کنیم.

اعلان اینترفیس

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

interface interface_name {
}

1 2	interface interface_name { }

مثال:

interface IPerson { 
   firstName:string, 
   lastName:string, 
   sayHi: ()=>string 
} 

var customer:IPerson = { 
   firstName:"Tom",
   lastName:"Hanks", 
   sayHi: ():string =>{return "Hi there"} 
} 

console.log("Customer Object ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  

var employee:IPerson = { 
   firstName:"Jim",
   lastName:"Blakes", 
   sayHi: ():string =>{return "Hello!!!"} 
} 
  
console.log("Employee  Object ") 
console.log(employee.firstName);
console.log(employee.lastName);

interface IPerson {

firstName:string,

lastName:string,

sayHi: ()=>string

}

var customer:IPerson = {

firstName:"Tom",

lastName:"Hanks",

sayHi: ():string =>{return "Hi there"}

}

console.log("Customer Object ")

console.log(customer.firstName)

console.log(customer.lastName)

console.log(customer.sayHi())

var employee:IPerson = {

firstName:"Jim",

lastName:"Blakes",

sayHi: ():string =>{return "Hello!!!"}

}

console.log("Employee Object ")

console.log(employee.firstName);

console.log(employee.lastName);

در مثال فوق ما یک رابط (Interface) به نام IPerson را اعلان کردیم و شیء های customer و employee این اینترفیس را پیاده‌سازی کرده اند.

زمانی کد فوق کامپایل شود، خروجی زیر را تولید خواهد کرد:

//Generated by typescript 1.8.10
var customer = { firstName: "Tom", lastName: "Hanks",
   sayHi: function () { return "Hi there"; }
};
console.log("Customer Object ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = { firstName: "Jim", lastName: "Blakes",
   sayHi: function () { return "Hello!!!"; } };

console.log("Employee  Object ");
console.log(employee.firstName);
console.log(employee.lastName);

//Generated by typescript 1.8.10

var customer = { firstName: "Tom", lastName: "Hanks",

sayHi: function () { return "Hi there"; }

};

console.log("Customer Object ");

console.log(customer.firstName);

console.log(customer.lastName);

console.log(customer.sayHi());

var employee = { firstName: "Jim", lastName: "Blakes",

sayHi: function () { return "Hello!!!"; } };

console.log("Employee Object ");

console.log(employee.firstName);

console.log(employee.lastName);

خروجی مثال:

Customer object 
Tom 
Hanks 
Hi there 
Employee  object 
Jim  
Blakes 
Hello!!!

Customer object

Tom

Hanks

Hi there

Employee object

Jim

Blakes

Hello!!!

از آنجا که interface در زبان برنامه جاوا اسکریپت وجود ندارد، در هنگام کامپایل نیز هیچ خروجی تولید نمی کند. تصویر زیر گویایی این موضوع است:

تصویر typescript-interfaces_7220_1 اینترفیس ها در زبان برنامه نویسی TypeScript - آموزش TypeScript

نوع Union و Interface

مثال زیر نحوه استفاده نوع Union و Interface را نشان می دهد:

interface RunOptions { 
   program:string; 
   commandline:string[]|string|(()=>string); 
} 

//commandline as string 
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  

//commandline as a string array 
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  

//commandline as a function expression 
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 

var fn:any = options.commandline; 
console.log(fn());

interface RunOptions {

program:string;

commandline:string[]|string|(()=>string);

}

//commandline as string

var options:RunOptions = {program:"test1",commandline:"Hello"};

console.log(options.commandline)

//commandline as a string array

options = {program:"test1",commandline:["Hello","World"]};

console.log(options.commandline[0]);

console.log(options.commandline[1]);

//commandline as a function expression

options = {program:"test1",commandline:()=>{return "**Hello World**";}};

var fn:any = options.commandline;

console.log(fn());

کد فوق بعد از کامپایل شدن:

//Generated by typescript 1.8.10
//commandline as string
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);

//commandline as a string array
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);

//commandline as a function expression
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

//Generated by typescript 1.8.10

//commandline as string

var options = { program: "test1", commandline: "Hello" };

console.log(options.commandline);

//commandline as a string array

options = { program: "test1", commandline: ["Hello", "World"] };

console.log(options.commandline[0]);

console.log(options.commandline[1]);

//commandline as a function expression

options = { program: "test1", commandline: function () { return "**Hello World**"; } };

var fn = options.commandline;

console.log(fn());

خروجی مثال:

Hello 
Hello 
World 
**Hello World**

Hello

World

**Hello World**

اینترفیس ها و آرایه ها

مثال زیر نحوه تعریف و استفاده از آرایه در اینترفیس را نشان می دهد. اندیس آرایه می تواند از نوع رشته یا عددی باشد.

interface namelist { 
   [index:number]:string 
} 

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string  
interface ages { 
   [index:string]:number 
} 

var agelist:ages; 
agelist["John"] = 15   // Ok 
agelist[2] = "nine"   // Error

interface namelist {

[index:number]:string

}

var list2:namelist = ["John",1,"Bran"] //Error. 1 is not type string

interface ages {

[index:string]:number

}

var agelist:ages;

agelist["John"] = 15 // Ok

agelist[2] = "nine" // Error

اینترفیس ها و ارث بری

در زبان برنامه نویسی TypeScript یک اینترفیس می تواند از یک یا چند اینترفیس دیگر ارث بری کند.

سینتکس ارث بری ساده:

Child_interface_name extends super_interface_name

1	Child_interface_name extends super_interface_name

سینتکس ارث بری چندگانه:

Child_interface_name extends super_interface1_name,
super_interface2_name,…,super_interfaceN_name

1 2	Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

مثال (ارث بری ساده):

interface Person { 
   age:number 
} 

interface Musician extends Person { 
   instrument:string 
} 

var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("Age:  "+drummer.age) console.log("Instrument:  "+drummer.instrument)

interface Person {

age:number

}

interface Musician extends Person {

instrument:string

}

var drummer = <Musician>{};

drummer.age = 27

drummer.instrument = "Drums"

console.log("Age: "+drummer.age) console.log("Instrument: "+drummer.instrument)

کد فوق بعد از کامپایل شدن:

//Generated by typescript 1.8.10
var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("Age:  " + drummer.age);
console.log("Instrument:  " + drummer.instrument);

//Generated by typescript 1.8.10

var drummer = {};

drummer.age = 27;

drummer.instrument = "Drums";

console.log("Age: " + drummer.age);

console.log("Instrument: " + drummer.instrument);

خروجی مثال:

Age: 27 
Instrument: Drums

1 2	Age: 27 Instrument: Drums

مثال (ارث بری چندگانه):

interface IParent1 { 
   v1:number 
} 

interface IParent2 { 
   v2:number 
} 

interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+this.v1+" value 2: "+this.v2)

interface IParent1 {

v1:number

}

interface IParent2 {

v2:number

}

interface Child extends IParent1, IParent2 { }

var Iobj:Child = { v1:12, v2:23}

console.log("value 1: "+this.v1+" value 2: "+this.v2)

کد فوق بعد از کامپایل شدن:

//Generated by typescript 1.8.10
var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + this.v1 + " value 2: " + this.v2);

//Generated by typescript 1.8.10

var Iobj = { v1: 12, v2: 23 };

console.log("value 1: " + this.v1 + " value 2: " + this.v2);

خروجی مثال:

value 1: 12   value 2: 23

1	value 1: 12 value 2: 23

TypeScript - کلاس ها TypeScript - نوع Union

دسته ها: آموزش ها - زبان برنامه نویسی TypeScript

آموزش برنامه نویسی PHP از مقدماتی تا پیشرفته (فیلم آموزشی)

آموزش پروژه محور سی شارپ (سیستم مدیریت پرسنل و پرداخت حقوق) تحت شبکه

فیلم آموزش WPF در سی شارپ به صورت پروژه محور | مدیریت بخشنامه تحت شبکه

آموزش زبان برنامه نویسی R به صورت فیلم | دوره مقدماتی

آموزش CSS به زبان ساده در قالب فیلم | دوره مقدماتی

آموزش سی شارپ به صورت پروژه محور (مدیریت فروشگاه)

آموزش برنامه سازی 2 سی شارپ هنرستان همراه با حل تمرینات به صورت فیلم

آموزش TypeScript

مباحث پایه TypeScript

اینترفیس ها در زبان برنامه نویسی TypeScript – آموزش TypeScript

اینترفیس ها در زبان برنامه نویسی TypeScript

اعلان اینترفیس

نوع Union و Interface

اینترفیس ها و آرایه ها

اینترفیس ها و ارث بری

سورس برنامه تست API به زبان Java

سورس تشخیص عدد اول به زبان اسمبلی

سورس ساعت دیجیتال به زبان اسمبلی

سورس برنامه ویرایشگر متن به زبان اسمبلی

سورس جدول ضرب به زبان اسمبلی

سورس برنامه انتخاب واحد دانشجو به زبان اسمبلی

سورس نرم افزار پیام رسان به زبان سی شارپ

سورس رسم کلمه با استفاده از حروف آن کلمه به زبان C++