به دوره‌ی آموزش typescript خوش آمدید!

به دوره ی آموزش typescript خوش آمدید!

به دوره ی آموزش تایپ اسکریپت خوش آمدید!

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

Typescript زبانی است که توسعه ی آن از اکتبر سال 2012 توسط ماکروسافت شروع شده است. این زبان حاصل تلاش توسعه دهنده ای بسیار بزرگ یعنی آقای Anders Hejlsberg (از معماران اصلی زبان #C) و همینطور سازنده ی Delphi و Turbo Pascal است بنابراین صد در صد اطمینان داریم که پروژه ی مهمی است.

زبان typescript زبانی است که روی جاوا اسکریپت سوار می شود و در نگاه اول 80 درصد شبیه جاوا اسکریپت است.

در واقع می توان گفت زبان typescript همان جاوا اسکریپت است که بیشتر توسعه داده شده و پیشرفته تر است بنابراین یک زبان جدید محسوب نمی شود.

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

حتما تعجب خواهید کرد اگر به شما بگویم Typescript نمی تواند در مروگر و سرور اجرا شود! این زبان یک compiler بسیار قوی دارد که کدهای typescript شما را به جاوا اسکریپت تبدیل می کند و سپس آن کدها را در مرورگر اجرا خواهد کرد بنابراین نهایتا کدهای جاوا اسکریپت خواهیم داشت.

از آنجایی که typescript بر پایه ی جاوا اسکریپت نوشته شده است، ساختار و نحو آن دقیقا مشابه جاوا اسکریپت است و فقط تعداد محدودی نحو اضافه دارد بنابراین برای شما که با جاوا اسکریپت آشنا هستید، یادگیری تایپ اسکریپت هیچ زمانی نخواهد برد!

یکی از پیش نیازهای این دوره ی آموزشی آشنایی متوسط با زبان جاوا اسکریپت است بنابراین اگر از زبان جاوا اسکریپت هیچ چیزی نمی دانید بهتر است ابتدا جاوا اسکریپت را یاد بگیرید، نه تایپ اسکریپت.

دوره ی آموزش مقدماتی جاوا اسکریپت
دوره ی آموزش پیشرفته جاوا اسکریپت

چرا تایپ اسکریپت؟

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

  • ارائه ی ویژگی های بیشتر نسبت به جاوا اسکریپت (مثل Type ها که نام زبان typescript از همین موضوع گرفته شده است). این type ها به شما اجازه می دهند که برای متغیرها انواع type را تعریف کنید و بدین صورت برنامه ای بسازید که احتمال باگ و خطای آن بسیار کمتر است.
  • ارائه ی قابلیت های meta-programming مثل decorator ها. در طول دوره در مورد آن ها صحبت خواهیم کرد.
  • قابلیت شخصی سازی و پیکربندی بسیار بالا.
  • ارائه ی ویژگی های جاوا اسکریپت ES6 و ES7 برای تمام مرورگرها! بله از آنجایی که تایپ اسکریپت در نهایت تبدیل به جاوا اسکریپت می شود (نسخه ی آن را خودمان تعیین می کنیم) می توانیم از ویژگی های ES6 در ES5 استفاده کنیم بنابراین بهترین ویژگی ها را در تمام مروگرها خواهیم داشت! دقیقا چیزی شبیه به Babel.
  • نوشتن کد با تایپ اسکریپت بسیار ساده تر از جاوا اسکریپت است و باگ های همیشگی جاوا اسکریپت را ندارد.
  • پشتیبانی کامل در visual studio code که باعث می شود IntelliSense بهتری داشته باشیم و کدهای خود را بسیار راحت تر و با خطای کمتری بنویسیم.
  • از آنجایی که تایپ اسکریپت به جاوا اسکریپت کامپایل می شود، خطاهایی که قرار بود هنگام اجرای برنامه داشته باشیم، در همان زمان کامپایل مشخص می شوند. به زبان ساده تر اگر در جاوا اسکریپت برنامه ی ما خطا یا باگی داشته باشد، این خطا زمانی مشخص می شود که خودمان یا کاربران ما در هنگام کار در مرورگر متوجه آن شویم (خطا هنگام run-time رخ میدهد) اما اگر کدها را با تایپ اسکریپت بنویسیم و خطایی در کار باشد قبل از اینکه کدهای تایپ اسکریپت به جاوا اسکریپت کامپایل شوند به ما هشدار داده خواهد شد (خطا هنگام compile-time رخ می دهد).
  • فریم ورک های محبوبی مثل Angular از تایپ اسکریپت استفاده می کنند و طبق اعلام Even you (توسعه دهنده ی اصلی فریم ورک Vue) در نسخه ی سوم فریم ورک js نیز از تایپ اسکریپت استفاده خواهد شد که در 4 ماهه اول سال 2020 شاهد انتشار آن خواهیم بود. همچنین می توانید از تایپ اسکریپت در react.js نیز استفاده کنید.

بگذارید یکی از مزیت های تایپ اسکریپت را در عمل به شما نشان بدهم. فرض کنید صفحه ی HTML زیر را داشته باشیم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Understanding TypeScript</title>
    <script src="using-ts.js" defer></script>
  </head>
  <body>
    <input type="number" id="num1" placeholder="Number 1" />
    <input type="number" id="num2" placeholder="Number 2" />
    <button>Add!</button>
  </body>
</html>

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

var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
    return num1 + num2;
}
button.addEventListener("click", function () {
    console.log(add(input1.value, input2.value));
});

اگر من در input اول عدد 10 و در input دوم عدد 5 را وارد کنم نتیجه چه می شود؟ احتمالا تصور کنید که نتیجه ی جمع 10 و 5 عدد 15 خواهد بود اما حدستان اشتباه است! نتیجه عدد 105 می شود:

دریافت عدد 105 به جای 15
دریافت عدد 105 به جای 15

یادتان است که گفتم در جاوا اسکریپت خطاها در زمان run-time مشخص می شوند؟ منظور من همین بود. در هنگام برنامه نویسی هیچ خطایی نداشتیم چرا که خطای بالا از نوع خطای منطقی است و توسط جاوا اسکریپت شناخته نمی شود. حالا چرا این اتفاق می افتد؟ دریافت مقدار value (مثل کد بالا که input1.value را داریم) در جاوا اسکریپت همیشه به صورت رشته خواهد بود حتی اگر در ظاهر عدد باشد. بنابراین زمانی که می گوییم 10 و 5 را جمع کن یعنی رشته ی 10 و رشته ی 5 را جمع کن. همانطور که می دانید جمع کردن رشته ها یعنی کنار هم قرار دادن آن ها و اگر 10 و 5 را کنار هم قرار دهیم 105 را دریافت می کنیم!

به نظر شما راه حل چیست؟

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

دیدگاه‌های شما (7 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ناشناس
05 فروردین 1400
با سلام خدمت شما خواستم یه تشکر کنم چون من با همین مقالات شما به تایپ اسکریپت مسلط شدم این در حالیه که در یکسری وبسایت دقققیقا با سر فصل های شما دوره تایپ اسکریپت رو برگزار کرده بودن با تفاوت اینکه دوره ویدیویی بود و با قیمت بالا

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

amin
24 بهمن 1399
سلام قالب جدید رو تبریک میگم ولی یکسری مشکلات داره الان مثلا ترتیب دروس این مقالات بهم ریخنه متاسافانه

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
25 بهمن 1399
با سلام این مورد در حال حاضر برطرف شده است.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

amin
12 بهمن 1399
سلام و وقت بخیر امیر خان خیلی خوب میشه که یه دوره کامل مقالات هم برای NextJs و GraphQL هم قرار بدی روی سایت و حتی Gatsby ! خیلی میتونه کمک کننده باشه ممنون از آموزش های خیلی خوبت

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

علیرضا کریمی مقدم
30 دی 1399
عالی

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

majid.mh
26 اردیبهشت 1399
بابت نوشتن این سلسله آموزش خیلی ممنونم می خواستم بدونم که این آموزش تا کجا ادامه داره،‌ مطالب جدیدتر چند روز به چند روز منتشر میشن و اینکه پیش بینی شما اینه که تا کی به اتمام می رسه؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سجاد
06 اسفند 1398
لطفا برای دسترسی بهتر لیست مطالب برای این دوره ایجاد کنید، تشکر

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

majid.mh
26 اردیبهشت 1399
با این نظر موافقم. اگه یه فهرست یک صفحه ای متشکل از اسم هر مطلب باشه خیلی خوب میشه

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد حسین
02 دی 1398
این دوره مخصوص زبان تایپ اسکریپته یا برای انگولار و اینا؟ در چه سطحیه؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
06 دی 1398
سلام دوست عزیز، این دوره 100 درصد کامل هست و از 0 تا 100 رو می ریم. دوره مخصوص کار با فریم ورک خاصی نیست بلکه تایپ اسکریپت خالص هست تا بعدش با هر فریم ورکی که خواستید کار کنید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مقالات مرتبط
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو