تایپ اسکریپت از صفر تا نیم

مقدمه و اشنایی کوتاهی با تایپ اسکریپت

تایپ اسکریپت یه زبان اُپن‌سورس که مایکروسافت سال ۲۰۱۲ معرفیش کرد. تایپ اسکریپت موفقیت اولیشو بخاطر زبان انگولار۲ بودن به‌ دست آورد؛ اما بین دولوپر های Vue و ری‌اکت هم محبوبیت پیدا کرد. هدف اصلی تایپ اسکریپت این بود که با اضافه کردن حساسیت نوع و تایپ داده جاوااسکریپت رو مقیاس پذیرتر و قابل اعتماد تر بکنه. این یعنی میتونیم هنگام تعریف کردن متغیر، نوع متغیر رو هم مشخص کنیم. این کار باعث میشه به باگ کمتری بر بخوریم، راحت تر از درست کار کردن کدمون مطمئن بشیم و راحت تر کدمونو مستند سازی کنیم.انواع داده‌ای که تو تایپ اسکریپت استفاده میکنیم، همونایین که تو جاوااسکریپت استفاده میکنیم. یعنی یا از انواع built-in استفاده میکنیم (مثل string، boolean، void، null، undefined) یا از انواعی که خودمون میسازیم یا همون user-defined ها (مثل enum، class، interface، tuple) یا از any. استفاده از any مثل اینه که حساسیت تایپ متغیر رو نادیده بگیریم.تایپ اسکریپت کد های جاوااسکریپت رو ساپورت میکنه و سینتکس مشابه‌ای هم دارن، پس کد زدن با تایپ اسکریپت برای دولوپر های جاوااسکریپت سخت نیست.حالا بیاین یکم امتحانش کنیم.برای شروع کد زدن با تایپ اسکریپت باید نصبش کنیم، که این کارو با npm میکنیم. یعنی توی ترمینال میزنیم

npm install -g typescript 

فایل های تایپ اسکریپت فرمت ts. دارن و مرورگر های ما نمیشناسنش. پس باید فایل های ts. رو کامپایل کنیم. با دستور tsc فایل تایپ اسکریپت رو به js. تبدیل میکنیم، فرمتی که برای مرورگر ها قابل اجراست.پس با اجرای

tsc myCode.ts

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

class Food {
name: String;
calories : Number;
isVegan: Boolean;

constructor(name: String, calories: Number, isVegan: Boolean){
    this.name = name;
    this.calories = calories;
    this.isVegan = isVegan;
    }

displayFood(): void {
    console.log(`${this.name} contains ${this.calories} Calories.`)
    }
    }

مثال ساده بالا کلاس Food رو نشون میده.اینترفیس ها از مفاهیم کارامد و مهم تایپ اسکریپت هستن که به ما اجازه میدن ساختار کلی متغیر ها رو مشخص کنیم. اینترفیس مثل قرارداد نوشته شده ای هستن که object باید مطابق اون عمل کنه. برای مثال:

const Food = {
name: 'Burger ',
calories: 450,
isVegan: false,
display() => { console.log('Burger's awesome!') }
}

با توجه به Food میتونیم ساختارشو بصورت:

{
name: String,
calories: Number,
isVegan: Boolean,
display(): void
}

بنویسیم. حالا اکه بخوایم این ساختار قابلیت استفاده مجدد داشته باشه از interface استفاده میکنیم. یعنی:

interface FoodInterface {
name: String,
calories: Number,
isVegan: Boolean,
display(): void
}

const Food: FoodInterface = {
name: 'Burger ',
calories: 450, 
isVegan: false, 
display() => { console.log('Burger's awesome!') }
}

امیدوارم این پست براتون جالب بوده باشه. ممنون که تا اخرش خوندین.