تایپ اسکریپت (TypeScript) چیست و چرا باید آن را یاد بگیریم؟

دسته بندی: جاوا اسکریپت
زمان مطالعه: 9 دقیقه
۰۳ اردیبهشت ۱۳۹۹

تایپ اسکریپت (TypeScript):

تایپ اسکریپت (به انگلیسی: TypeScript) یک زبان برنامه‌نویسی چندسکویی، متن باز و کامپایلری است که توسط شرکت مایکروسافت توسعه داده شده و پشتیبانی می‌شود. تایپ اسکریپت یکی از زیر مجموعه‌های زبان جاوا اسکریپت است که به شما کمک می‌کند تا کدهای خود را به روش ساده‌تری نوشته و سپس با کامپایل‌ کردن آن‌ها خروجی استاندارد کد جاوا اسکریپت را به دست آورید. امکانات پیشرفته‌ای که مایکروسافت به تایپ اسکریپت افزوده است، آن را به زبان‌هایی مانند #C، جاوا و... نزدیک ساخته است. تایپ اسکریپت برای توسعه‌ی پروژه‌های بزرگ جاوا اسکریپت طراحی شده است و فرآیند توسعه را تا حد زیادی ساده می‌کند. امروزه تایپ اسکریپت به یکی از محبوب‌ترین زبان‌های دنیا تبدیل شده است و روز به روز افراد بیش‌تری را به خود جذب می‌کند. اما ممکن است این سوال برای شما نیز پیش آید که چرا باید تایپ اسکریپت را یاد بگیریم و استفاده و یادگیری آن چه مزایایی به همراه دارد؟ در ادامه‌ی این مقاله به این سوالات پاسخ خواهیم داد و زبان تایپ اسکریپت و مزایای آن را به شما معرفی خواهیم کرد، با ما همراه باشید.

فهرست محتوای این مقاله

چرا باید تایپ اسکریپت را یاد بگیریم؟

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

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

تایپ اسکریپت برای توسعه‌ی برنامه‌های AngularJS 2 توصیه شده است. بنابراین اگر علاقه‌مند به توسعه‌ی وب اپلیکیشن‌های خود با این فریم‌ورک هستید، می‌بایست ابتدا تایپ اسکریپت را فرا بگیرید زیرا برای نوشتن کدهای JavaScript درون انگولار از کدهای زبان TypeScript استفاده می‌شود.

اگر اکنون با جاوا اسکریپت آشنایی دارید، مهاجرت به TypeScript برای شما مشکل‌ساز نخواهد بود؛ زیرا سینتکس TypeScript شباهت زیادی با Javascript و EC6 دارد و تمامی کدهای جاوا اسکریپت موجود، در تایپ اسکریپت معتبر شناخته می‌شوند. حتی می‌توانید با تغییر پسوند فایل‌ها از js به ts، از آن‌ها به عنوان کدهای تایپ‌اسکرپیت استفاده کنید.

محبوبیت TypeScript

براساس بررسی Stack Overflow Developer در سال 2018، TypeScript به عنوان یک زبان برنامه نویسی، توانسته است محبوبیت بیشتری نسبت به JavaScript به دست آورد. محبوبیت TypeScript در بین توسعه دهندگان JavaScript به این دلیل است که این زبان به شما این امکان را می‌دهد تا خطاها را قبل از اجرای کد خود مشاهده کنید؛ این قابلیت موجب می‌شود تا فرآیند خطایابی و رفع آن در زمان کوتاهی انجام شده و تا حد زیادی ساده‌ و آسان‌تر شود. همچنین به برنامه‌نویسان این امکان را می‌دهد تا کدهایی تمیز بنویسند.

شروع کار با TypeScript

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

بیشتر بدانید: راهنمای مقدماتی و شروع سریع کار با TypeScript

نصب TypeScript

دو روش برای دستیابی به ابزارهای TypeScript وجود دارد که عبارتند از:

  • با استفاده از npm (js package manager)
  • با نصب پلاگین‌های تایپ اسکریپت ویژوال استودیو

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

دستور نصب تایپ‌اسکرپیت برای کاربران npm:

npm install -g typescript

ابتدا فایل TypeScript خود را با نام greeter.ts ایجاد کنید و قطعه کد زیر را در آن قرار دهید:

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user);

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

سپس، در خط فرمان خود کامپایلر تایپ‌اسکرپت را با دستور زیر اجرا کنید:

tsc greeter.ts

نتیجه یک فایل greeter.js خواهد بود که درون آن همان کدهای جاوا اسکریپتی که ابتدا در فایل .ts قرار دادیم، قرار دارند.

مشخص کردن نوع متغیرها در TypeScript

انواع اصلی در TypeScript عبارتند از: String, Number, Boolean, Null, Undefined, Symbol و Void. در این زبان تمامی اعداد (صحیح و اعشاری و...) از نوع number هستند. کلاس‌ها، آرایه‌ها، توابع و آبجکت‌ها نیز انواع فرعی در این زبان هستند.

در این زبان 2 روش با نام‌های Type Annotation و Type Inference برای تعیین نوع متغیرها وجود دارد که در ادامه به آن‌ها می‌پردازیم.

انواع مختلف موجود در TypeScript برای افراد مبتدی - شروع کار با TypeScript

Type Annotation

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

برای مثال:

//number
let money: number = 250;
//string
let name: string = "John Doe";
//boolean
let isValid: boolean = true;
//undefined
let nothing : undefined = undefined;
//null
let nothing : null = null;
//built in object
let data: Date =  new Date();
//Array
let listNumbers: number[] = [1,2,3];
let colors: string[] = [red, blue, green];
let isPower_ON: boolean[] = [true, false, true, true];
//classes
class Door{
          //some code here  
}
let door: Door = new Door();
//object literal
let point: {x:number, y:number} = {
          x: 10, //if you type string or other types you got error
          y: 15
};
//Function
const printIndex: (i: number) =˃ void = (i: number) =˃ {
          console.log(i);
};

Type Inference

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

برای نمونه در مثال زیر نوع داده‌ای که به متغیر color اختصاص داده می‌شود، از نوع string خواهد بود.

Let color = “blue”;

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

یکی از ویژگی‌های اپلیکیشن‌های بزرگ مقیاس، استفاده از ویژگی‌های برنامه‌نویسی شی‌گرا از جمله کلاس است. سایر ویژگی‌های برنامه‌نویسی شی‌گرا مانند ارث‌بری، setters، getters، interfaces، abstract و... نیز در تایپ اسکریپت قابل پیاده‌سازی هستند.

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

در این کد کلاسی با نام Greeter تعریف شده است که دارای سه عضو می‌باشد؛ یک property با نام greeting، یک سازنده و یک متد greet.

class Greeter {  
   greeting: string;   
  constructor(message: string) {    
     this.greeting = message;   
  }  
   greet() {     
    return "Hello, " + this.greeting;     
} }
 let greeter = new Greeter("world");

Interfaces ،Generics ,Inheritance و Method Access Modifiers در تایپ اسکریپت

زبان TypeScript از Interfaces ،Generics ,Inheritance و Method Access Modifiers پشتیبانی می‌کند.

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

برای روشن‌تر شدن این مطلب، به مثالی از اینترفیس‌ها در زبان تایپ اسکریپت می‌پردازیم:

interface ITax {
    taxpayerId: string;
    calculateTax(): number;
    }
class IncomeTax implements ITax {
    taxpayerId: string;
    calculateTax(): number {
    return 10000;
    }
}
class ServiceTax implements ITax {
    taxpayerId: string;
    calculateTax(): number {
    return 2000;
    }
}

Generic به شما این امکان را می‌دهد که متد یا کلاسی تعریف کنید که نوع نداشته باشد و نوع داده‌ی استفاده شده در متد یا کلاس را زمانی مشخص کنید که به داده‌ی موردنظر در زمان اجرای برنامه نیاز داشته باشید.

نحوه‌ی استفاده از جنریک در تایپ اسکریپت به صورت زیر است:

function identity<T> (arg: T): T {
    return arg; 
    }
    //example showing implementation of generics
    let output = identity <string>("myString");
    let outputl = identity <number> (23);

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

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

class Employee{
    Firstname:string;
    }
class Company extends Employee {
    Department:string;
    Role:string
    private AddEmployee(){
    this.Department="myDept";
    this.Role="Manager";
    this.FirstName="Test";
    // do the operation
    }
}

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

class Customers{
    public companyname:string;
    private country:string;
}

جمع‌بندی

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

تجربه‌ی شما از کدنویسی با تایپ اسکریپت چیست؟ آیا استفاده و یادگیری این زبان را ضروری و مفید می‌دانید؟ تجربیات خود را با ما به اشتراک بگذارید.

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

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

نظرات کاربران

محسن محمدی رهنما

سلام ممنون بابت مقاله عالی تون.

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