آموزش فارسی کلاس ها در TypeScript (تایپ اسکریپت) + متدها، ویژگی‌ها و سازنده‌ها

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

کلاس‌ ها در TypeScript

در جاوا اسکریپت ES5 برنامه‌نویسی شیءگرایی با استفاده از اشیاء مبتنی بر نمونه اولیه (prototype-base) اجرا می‌شد. این مدل به‌جای استفاده از کلاس‌ها از نمونه‌های اولیه استفاده می‌کرد. روش‌های بسیار مطلوبی توسط انجمن جاوا اسکریپت برای جبران کمبود کلاس‌ها اجرا شده است. بسیار از این نمونه‌های موفق را می‌توانید در آدرس Mozilla Developer Network's JavaScript Guide دریافت کنید. با این حال ES6 بر مبنای کلاس‌ها ایجاد شد.

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

class Vehicle{
}

کلاس‌ ها در TypeScript ممکن است ویژگی‌ها (properties)، متدها (methods) و سازنده‌ها (constructors) داشته باشند.

ویژگی‌ها (properties)

ویژگی‌ها داده‌های متصل به یک نمونه از کلاس را تعریف می‌کنند. برای مثال، یک کلاس با نام Person را درنظر بگیرید که ویژگی‌هایی مانند first_name و last_name و همچنین age‌ داشته باشد. هر یک از این ویژگی‌ها می‌توانند به صورت دلخواه نوع مشخصی داشته باشند. مثلا می‌توان اطلاع داد که ویژگی‌های last_name و first_name از نوع string هستند و ویژگی age از نوع number.

برای تعریف کلاس Person‌ از کلاس زیر استفاده می‌کنیم:

class Person{
	first_name: string;
	last_name: string;
	age: number;
}

متدها (Methods)

متدها همان توابع هستند که داخل یک شیء اجرا می‌شوند. برای فراخوانی یک متد روی یک شیء باید ابتدا یک نمونه از آن شیء در اختیار داشته باشید. برای ایجاد یک نمونه از یک کلاس از کلمه‌ی کلیدی new و ترکیب آن با نام کلاس به همراه پرانتز به صورت new Person()‌ استفاده می‌شود.

مثلا اگر ما بخواهیم یک متد به کلاس Person در مثال قبل با عنوان greet (خوش‌آمد گویی) اضافه کنیم به صورت زیر عمل خواهیم کرد:

class Person{
	first_name: string;
	last_name: string;
	age: number;
	
	greet(){
		console.log("Hello", this.first_name);
	}
}

توجه دارید که برای دستیابی به ویژگی first_name در کلاس جاری Person باید از کلمه‌ی کلیدی this استفاده کرد.

توجه: هنگامیکه برای یک متد، نوع بازگشتی و مقدار بازگشتی تعریف نشود، هر چیزی را می‌تواند بازگرداند یا به عبارتی دیگر (نوع any) محسوب می‌شود.

برای اینکه بتوانید از متد greet استفاده کنید باید ابتدا یک نمونه از کلاس Person‌ ایجاد نمایید. به مثال زیر توجه کنید:

// تعریف یک متغییر از نوع کلاس Person
var p: Person;

// تعریف یک شیء جدید از کلاس Person
p = new Person()

// انتساب مقدار ویژگی first_name
p.first_name= 'Roxo.ir';

// فراخوانی متد greet
p.greet();

توجه داشته باشید که برای سهولت کار می‌توان تعریف متغییر و ایجاد یک شیء جدید از کلاس Person را در یک خط انجام داد:

var p: Person = new Person();

سازنده‌ها (Constructurs)

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

اگر برای کلاس خود سازنده‌ای ایجاد نکنیم، به هنگام ساخت یک شیء جدید از آن کلاس، سازنده به صورت خودکار ساخته می‌شود:

class Vehicle{

}

var v = new Vehicle();

دقیقا معادل زیر است:

class Vehicle{
    constructor(){

    }
}

var v = new Vehicle();

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

سازنده‌ها می‌توانند پارامترهایی را به عنوان ورودی دریافت کنند و هنگام ساخت شیء از روی کلاس باید پارامترهای ورودی به شیء ساخته شده متصل شوند. به عنوان مثال در کلاس Person سازنده ما دارای سه ورودی first_name و last_name و age است:

class Person{
	first_name: string;
	last_name: string;
	age: number;
	
	constructor(first_name: string, last_name: string, age: number){
		this.first_name = first_name;
		this.last_name = last_name;
		this.age = age;
	}
	
	greet(){
		console.log("Hello", this.first_name);
	}
}

برای استفاده از این کلاس به صورت زیر عمل می‌کنیم:

var p: Person = new Person('Masoud', 'Salehi', 30);
p.greet();

ارث‌بری

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

زبان تایپ اسکریپت به صورت کامل مفاهیم ارث‌بری را پشتیبانی می‌کند. چون هسته‌ی تایپ اسکریپت نیز از ارث‌بری استفاده کرده است. برای به ارث‌بردن خصوصیات یک کلاس از کلاس دیگر از کلیدواژه‌ی extends استفاده می‌شود.

به عنوان مثال یک کلاس Report ایجاد می‌کنیم:

class Report{
	data: string[];
	
	constructor(data: string[]){
		this.data = data;
	}
	
	run(){
		this.data.forEach(function(line) {console.log(line);});
	}
}

در کلاس Report یک ویژگی به نام data از نوع آرایه رشته‌ای داریم. هنگامیکه متد run فراخوانی می‌شود برای تک تک المان‌های data مقدار در خروجی console نمایش داده می‌شود.

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

var r: Report = new Report(['Roxo.ir', 'ask.Roxo.ir']);
r.run();

خروجی کنسول شما دو مقدار Roxo.ir و ask.Roxo.ir را به شما نمایش می‌دهد.

حال ما یک کلاس با نام TabbedReport ایجاد می‌کنیم که خصوصیات و رفتار موجود در کلاس Report را به ارث ببرد، بنابراین داریم:

class TabbedReport extends Report{
	headers: string[];
	
	constructor(headers: string[], values: string[]){
		this.headers = headers;
		super(values);
	}
	
	run(){
		console.log(headers);
		super.run;
	}
}

بنابراین برای استفاده از کلاس نیز داریم:

var headers: string[] = ['Name'];
var data: string[] = ['Roxo.ir', 'ask.Roxo.ir', 'Masoud'];
var r: TabbedReport = new TabbedReport(headers, data);
r.run();

کاربردپذیر بودن

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

سینتکس <= برای توابع
قالب رشته‌ها یا template string

سینتکس <= برای توابع

علامت <= به عنوان یک اختصار برای نوشتن توابع مورد استفاده قرار می‌گیرد. در ES5، برای استفاده از یک تابع باید کلمه‌ی function به همراه { } استفاده کرد. به عنوان مثال:

var data = ['Roxo.ir', 'ask.Roxo.ir', 'Masoud'];
data.forEach(function(line) {console.log(line);});

حال در ES6 و TypeScript می‌توان از سینتکس <= استفاده نمود و تابع بالا را به صورت زیر خلاصه کرد:

var data:‌ stringp[] = ['Roxo.ir', 'ask.Roxo.ir', 'Masoud'];
data.forEach((line) => {console.log(line);});

همچنین از سینتکس <= می‌توان برای یک عبارت (expression) نیز استفاده کرد:

var evens = [2, 4, 6, 8]
var odds = evens.map(v => v + 1);

یا به عنوان یک جمله مانند:

data.forEach( line => {
    console.log(line.toUpperCase()
});

از ویژگی‌های بارز و مهم سینتکس <= به اشتراک‌گذاری عبارت this در تمام کد است. هنگامیکه یک تابع را در جاوا اسکریپت ایجاد کنید این ویژگی مهم و متفاوت رخ خواهد داد. یعنی هنگامیکه معمولا شما یک تابع در جاوا اسکریپت ایجاد می‌کنید آن تابع درون خودش نیز با this قابل دسترس خواهد بود. در جاوا اسکریپت گاهی اوقات به کدهایی مشابه کد زیر برخورد کرده‌اید:

var nate = {
	name: "Nate",
	guitars: ["Gibson", "Martin", "Taylor"],
	printGuitars: function(){
		var self = this;
		this.guitars.forEach(function(g){
			console.log(self.name + "plays a " + g);
		});
	}
};

با استفاده از سینتکس <= می‌توان عبارت this را در سرتاسر کد مورد استفاده قرار داد:

var nate = {
	name: "Nate",
	guitars: ["Gibson", "Martin", "Taylor"],
	printGuitars: function(){
		this.guitars.forEach( (g) => {
			console.log(this.name + "plays a " + g);
		});
	}
};

استفاده از رشته‌ها در قالب‌ها

در ES6 و تایپ اسکریپت رشته‌ها را می‌توان داخل قالب‌ها و تگ‌های html تعریف کرد. دو ویژگی مهم رشته‌ها در قالب‌ها به شرح زیر است:

متغییرها درون عبارت‌های رشته‌ای
رشته‌های چندخطی

متغییرها درون عبارت‌های رشته‌ای

این ویژگی با عنوان «درج یا الحاق رشته‌» یا به اصطلاح string interpolation معرفی می‌شود. بدین معنی‌ست که شما می‌توانید متغییرها را درون عبارت‌های رشته‌ای مورد استفاده قرار دهید. در اینجا چند نمونه آورده شده است:

var firstName = "Masoud";
var lastName = "Salehi";

// درج درون یک رشته
var greeting = `Hello ${firstName} ${lastName} `;

console.log(greeting);

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

رشته‌های چندخطی

ویژگی بسیار جالب و مهم استفاده از علامت بک تیک یا backtick استفاده از هر رشته درون یک خط مجزا به همراه استفاده از تگ‌های html است:

var template = `
<div>
	<h1>Hello</h1>
	<p>Roxo.ir is a great programming website</p>
</div>

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

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

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)