آموزش تایپ اسکریپت TypeScript رایگان

سلام! به اولین جلسه از دوره رایگان آموزش صفر تا صد تایپ اسکریپت خوش آمدید! در این دوره، سعی کرده‌ ایم در 78 درس (جلسه)، تمامی مباحث تایپ اسکریپت را به زبانی کاملا ساده و قابل درک از مقدماتی تا پیشرفته توضیح دهیم. سایر درس‌ های این سری آموزشی را می توانید در قسمت پائین همین مقاله مشاهده کنید.

اگر نمی دانید 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 می شود:

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

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

از قسمت پائینِ همین مقاله، می توانید به درس های بعدی آموزش تایپ اسکریپت دسترسی داشته باشید.

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

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

انسیه

09 آبان 1402

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

ناشناس

06 آذر 1401

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

samir ghorbani

02 تیر 1401

خیلی خیلی ممنون از مطاب عالیتون من تقریبا همه بحث های ts رو از اینجا خوندم و باید بگم که عالی بودن و خسته نباشید

روکسو

11 مرداد 1401

باعث افتخار ماست که از این مباحث استفاده بردید.

ادیسون

01 آبان 1400

سلام .وقتتون بخیر میشه ترکیب vue3 با تایواسکریپت رو هم آموزش بدید ممنون

16 بهمن 1400

سلام. بله حتما سعی می‌کنیم به این مبحث هم بپردازیم.

05 فروردین 1400

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

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

amin

24 بهمن 1399

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

25 بهمن 1399

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

سلام. ممنون. سعی کردیم همه مشکلات رو برطرف کنیم. مشکلی رو هم که شما گزارش دادید، برطرف شده.

12 بهمن 1399

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

سلام. سپاس از همراهی شما. سعی می‌کنیم مواردی که گفتید رو هم پوشش بدیم.

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

30 دی 1399

عالی

سپاس از همراهیتون

majid.mh

26 اردیبهشت 1399

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

این سری آموزشی شامل 78 درس هست که تمامی مباحث رو دربرداره. این دوره به پایان رسیده و شما می‌تونید به تمام درس‌ها دسترسی کامل و رایگان داشته باشید.

سجاد

06 اسفند 1398

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

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

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

محمد حسین

02 دی 1398

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

امیر زوارمی

06 دی 1398

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

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

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

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