مقدمه و معرفی اولیه زبان تایپ اسکریپت (TypeScript) به همراه انواع داده

با فصل دوم از سری دوره‌های آموزشی فارسی و رایگان انگولار ۲ در خدمت شما هستیم. در این فصل قصد داریم شما را با زبان قدرتمند و بسیار کاربردی TypeScript (با تلفظ تایپ اسکریپت) آشنا کنیم. همچنین مفاهیم و مقدمات این زبان به همراه دستورهای ضروری آن را به تفصیل شرح خواهیم داد.

زبان TypeScript سازنده‌ی Angular 2

انگولار ۲ با زبانی شبیه به زبان جاوا اسکریپت تولید شده است که زبان تایپ اسکریپت نامیده می‌شود. شاید در ابتدای کار برای شما سخت باشد که یک زبان جدید را صرفا برای فریم‌ورک انگولار ۲ یاد بگیرید. درحالیکه ممکن است به زبان جاوا اسکریپت تسلط داشته باشید. باید در نظر داشته باشید که تایپ اسکریپت یک زبان جدید نیست، بلکه مجموعه‌ای قدرتمند از ES6 می‌باشد. در واقع اگر ما کدهایی به زبان ES6 یا همان اکما اسکریپت بنویسیم، برای زبان TypeScript کاملا پذیرفته و به اصلاح valid‌ می‌باشد. در دیاگرام زیر یک نمای کلی از زبان تایپ اسکریپت و رابطه‌ی آن با ES6 و ES5 نمایش داده شده است:

دیاگرام زبان قدرتمند TypeScript

یک سوال: ES5 چیست؟ ES6 چیست؟
پاسخ: ES5 مخفف عبارت ECMAScript 5 می‌باشد. از طرف دیگر به این زبان «جاوا اسکریپت نرمال» نیز گفته می‌شود که اکثر شماها با آن آشنایی دارید و از این زبان در پروژه‌های خود بهره می‌برید. ES6 به عنوان ورژن جدیدی از ES5 مطرح شده است که در ادامه به توضیح آن می‌پردازیم.

هم اکنون در تاریخ ۱۳ آذر ماه ۱۳۹۵، مرورگرهایی که ES6 را پشتیبانی کنند به تعداد انگشتان دست هستند و از طرفی مرورگرهایی که TypeScript را مورد حمایت خود قرار دهند شاید از تعداد انگشتان یک دست هم کمتر باشند! برای حل این مشکل چیزی به نام ترنسپایلر (transpiler) یا نام دیگر آن ترنسکامپایلر (transcompiler) نیاز است. در واقع یک ترنسپایلر تایپ اسکریپت، کد تایپ اسکریپت را به عنوان ورودی دریافت کرده و در نهایت کد ES5 را مختص مرورگرها ارائه می‌دهد.

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

با تایپ اسکریپت چه چیزهایی را دریافت می‌کنیم؟

۵ ویژگی برتر که تایپ اسکریپت را برتر از ES5 قرار می‌دهد شامل:

نوع‌ها (types)
کلاس‌ها (classes)
مفسرها (annotations)
وارد کردن (imports)
زبانی کاربردپذیر (به عنوان مثال Destructuring)

حال به بررسی تک تک این ویژگی‌ها می‌پردازیم.

نوع‌ها (types)

قدرت و برتری تایپ اسکریپت نسبت به ES6، سیستم تقسیم‌بندی نوع‌ها است. برای برخی از برنامه‌نویسان عدم بررسی نوع‌ها در زبان برنامه‌نویسی مانند جاوا اسکریپت بسیار مفید محسوب می‌شود. در نتیجه این موضوع در زبان تایپ اسکریپت ممکن است برای آنها یک پوئن منفی به حساب بیایید. اما عجله نکنید! ما شما را تشویق می‌کنیم تا شانس خود را امتحان کنید. یکی از مزایای بزرگ استفاده از چک کردن نوع‌ها این است که:

هنگام نوشتن کدها به شما کمک می‌کند زیرا این تقسیم‌بندی نوع می‌تواند برنامه‌ی شمارا کمتر در معرض باگ قرار دهد.
هنگام مطالعه کدها به شما می‌کند تا دقیق‌تر و تمیزتر انواع داده را تشخیص دهید.

همچنین شایان ذکر است که استفاده از نام انواع داده در تایپ اسکریپت یک امر اختیاری است. اگر شما می‌خواهید کدهای سریع بنویسید، می‌توانید نام انواع را حذف کنید.

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

در ES5 متغیرها با کلمه‌ی کلیدی var تعریف می‌شدند. مانند var name;. در سینتکس جدید زبان تایپ اسکریپت متغییرها مانند جاوا اسکریپت تعریف می‌شوند اما با این تفاوت که نوع آنها نیز بعد از :‌ در کنار آنها درج می‌شود مانند دستور زیر:

var name: string;

همچنین هنگام تعریف یک تابع، می‌توان نوع ارگومان و نوع مقدار بازگشتی تا تعیین کرد. به عنوان مثال:

function greetText(name: string): string{
	return "Hello" + name;
}

همانگونه که مشاهده می‌کنید در دستور بالا آرگومان تابع از نوع رشته (string) می‌باشد و به صورت name: string تعریف شده است. یعنی اگر تابع، ورودی‌ای بغیر از حالت رشته‌ای دریافت کند، اخطار می‌دهد. از طرفی پس از آرگومان تابع، یک سینتکس جدید با دو نقطه : مشاهده می‌شود که پس از آن عبارت string درج شده است. این نوع به ما اطلاع می‌دهد که خروجی تابع و مقدار بازگشتی تابع یک رشته است. این موضوع دو مزیت اصلی دارد: ۱) هر آنچه که این تابع بازگشت می‌دهد از نوع رشته‌ای (string) است. ۲) به برنامه‌نویسان و توسعه‌دهندگان کمک می‌کند تا از ساختار این تابع و نوع مقداری که بازگشت می‌دهد آگاه باشند.

به عنوان مثال اگر شما مقدار ۱۲ را برای تابع زیر بازگشت دهید با خطا مواجه خواهید شد:

function greetText(name: string): string{
	return 12;
}

سپس خطایی که دریافت می‌کنید:

$ tsc compile-error.ts
compile-error.ts(2,12): error TS2322: Type 'number' is not assignable to type 'string'.

چه اتفاقی افتاده است؟ تابع بالا تلاش به بازگردادن مقدار عددی ۱۲ می‌کند درحالیکه مقدار بازگشتی تابع رشته است. برای تصحیح تابع بالا می‌توان به صورت زیر عمل کرد:

function greetText(name: string): number{
	return 12;
}

انواع داده

رشته‌ای (string)

برای نگه‌داری یک رشته متنی بکار برده می‌شود و دستور آن به صورت زیر است:

var name: string = 'Roxo.ir';

عددی (number)

این نوع برای تمام داده‌های عددی به‌کار گرفته می‌شود. تمام داده‌ها به عنوان داده‌ی اعشاری (float) شناخته می‌شوند. دستور این نوع داده به صورت زیر می‌باشد:

var age: number = 36;

بولین (صحیح غلط)

مقادیر true (صحیح) و false (غلط) را در خود ذخیره می‌کند:

var married: boolean: true;

آرایه

آرایه‌ها با استفاده از نوع Array تعریف می‌شوند. با توجه به اینکه آرایه‌ها به عنوان یک مجموعه هستند، همواره باید نوع اشیاء (object) درون آرایه‌ها مشخص شود. برای مشخص کردن نوع مجموعه‌ای از المان‌ها درون آرایه می‌توان از دستورهای زیر بهره برد:

Array<type>

یا 

type[]

به عنوان مثال داریم:

var jobs: Array<string> = ['IBM','Microsoft','Google'];
var jobs: string[] = ['IBM','Microsoft','Google'];

یا مثلا برای یک آرایه‌ی عددی داریم:

var jobs: Array<number> = [1, 2, 3];
var jobs: number[] = [1, 2, 3];

نوع داده‌ی Enum

Enum به عنوان یک روش برای نام‌گذاری مقادیر عددی مورد استفاده قرار می‌گیرند. برای مثال اگر ما بخواهیم یک لیست ثابت از نقش‌های یک شخص را تعریف کنیم می‌توانیم از کد زیر بهره‌مند شویم:

enum Role {Employee, Manager, Admin};
var role: Role = Role.Employee;

مقدار اولیه و پیش‌فرض enum برابر ۰ است. همچنین می‌توان یک مقدار عددی را به یک المان enum نسبت داد:

enum Role {Employee = 3 , Manager, Admin};
var role: Role = Role.Employee;

در کد بالا به جای اینکه مقدار Employee از ۰ شروع شود، از ۳ شروع شده است. مقادیر یک متغییر enum، از آخرین مقدار شروع به افزایش می‌کند. در مثال بالا مقادیر Manager برابر ۴ و Admin برابر ۵ خواهد بود. همچنین می‌توان مقادیر دلخواه را به آنها نسبت داد:

enum Role {Employee = 3 , Manager = 5, Admin = 7};
var role: Role = Role.Employee;

همچنین می‌توان مقادیر انتساب داده شده توسط enum را برای یک متغییر به نمایش گذاشت:

enum Role {Employee = 3 , Manager, Admin};
console.log('Roles: ', Role[0], ',', Role[1], 'and', Role[2]);

نوع any

اگر برای یک متغییر نوعی را تعریف نکنیم و یا نوع تعریف شده را حذف کنیم، نوع پیش‌فرض آن any‌ خواهد بود. متغییری که از نوع any تعریف شود، هرگونه داده‌ای را می‌پذیرد:

var something: any = 'as string';
something = 1;
something = [1, 2, 3];

Void

کلمه‌ی void که معمولا در توابع مورد استفاده قرار می‌گیرد به این معنی‌ست که این تابع دارای هیچ نوعی نیست و چیزی را بر نمی‌گرداند یا به اصطلاح return نمی‌کند:

function setName(name: string): void{
	this.name = name;
}

در این بخش به دقت به بررسی اصل و بنیه زبان قدرتمند TypeScript پرداختیم. در بخش ۲-۲ به عنوان آخرین بخش، زبان تایپ اسکریپت را با دقت بیشتری ارزیابی کرده و با مفاهیم کلاس‌ها، متدها، ویژگی‌ها، سازنده‌ها، ارث‌بری، سینتکس <= و درج متغییرها در قالب‌های مختلف آشنا خواهید شد.

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

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