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

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

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

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

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

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

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

قبل از شروع میتونید از دوره آموزش هوش مصنوعی ماهم دیدن کنید.

تایپ اسکریپت توسط کی ساخته شد و چرا

تایپ اسکریپت در اکتبر سال 2012 توسط مایکروسافت معرفی شد. اندرس هیلزبرگ (Anders Hejlsberg)، سازنده زبان C# و طراح اصلی Delphi، رهبری تیم توسعه  را بر عهده داشت. (باید قبول کنیم این تیم اشتباه نمیکنه(: )
خوب حالا بیایم به دلایل ساخت تایپ اسکریپت به پردازیم  یکی از مثال هایی که  خیلی خوب میتونیم این تفاوت هارو به رخ بکشیم این مثال زیر هست

و نکته مهم دیگه که هست ما در آموزش رایگان تایپ اسکریپت مقدماتی تا پیشرفته تمام سعی رو میکنم تا آماده ورود بشید
// در جاوا اسکریپت - مشکلات احتمالی
function processUser(user) {
return user.name.toUpperCase(); // ممکن است user یا name تعریف نشده باشند
}


// در تایپ‌ اسکریپت - امن و قابل اعتماد
interface User {
name: string;
email: string;
}


function processUser(user: User): string {
return user.name.toUpperCase(); // خطاها در زمان کامپایل مشخص می‌شوند
}

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

  • نمی‌دانیم user چه ساختاری دارد
  • نمی‌دانیم name حتماً وجود دارد یا نه
  • نمی‌دانیم خروجی تابع چه نوعی است

و در نهایت در زمان اجرا user is undefined از جمله ارور هایی که ممکنه برای ما برگرده حالا همین در تایپ اسکریپت میبینیم

name: string
email: string

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

شاید مقاله

استفاده از تایپ اسکریپت توسط شرکت های بزرگ

خوبب بجز اینکه خود ماکروسافت این تکنولوژی رو به وجود اورد شرکت های زیادی هم از این تکنلوژی استفاده میکنن مثله:

  • Google (Angular)
  • Microsoft (VS Code)
  • Airbnb
  • Slack

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

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

جامعه برنامه نویسی قدرت مند

یکی دیگه از این دلایل مهم جامعه به شدت قدرت مند برنامه نویسان تایپ اسکریپت هست که یک مثال کوچیک ازش میشه به 25,000 کتاب خونه در تایپ اسکریپت اشاره کرد و در قبل تر هم تعداد برنامه نویسان جاوا اسکریپتی که از تایپ اسکریپت استفاده میکنن دائم درحال رشد هست اینهم یکی از مهم ترین دلایل ممکنه هستش تا بتونیم متوجه قدرت تایپ اسکریپت بشم خوب حالا که دیگه جواب چرا رو گرفتیم وقتشه بریم و آموزش اولیه تایپ اسکریپت و تفاوت هاش با جی اس رو به صورت عملی امتحان کنیم

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

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

خوب اول میریم تا به صورت تئوری چندین مقایسه انجام بدیم بین تایپ اسکریپت و جاوا اسکریپت یکی از مهم ترین فرق هارو که بالا بهش اشاره کردیم حالا سعی میکنیم تمامی تقاوت های عمده رو بگیم یکی از اولین چیز ها که باید یاد بگرید برای تایپ اسکریپت تگ فایل هست که به صورت main.ts هست در صورتی که قبلا برای جاوا اسکریپت از main.js استفاده میکردیم.

نصب تایپ اسکریپت

برای نصب تایپ اسکریپت نیاز داریم که nodejs نصب شده باشه برای نصب نود جی اس باید وارد سایت نود جی اس بشید

آموزش نصب نود جی اس

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

Screenshot 2025 04 29 124711

روی دکمه دانلود کلیک کنید منتظر بمونید تا دانلود بشه بعد از اینکه دانلود انجام شد. روی فایل دانلود شده کلیک کنید. تا فرایند نصب اغاز شود سپس با این صفحه برای شما بالا میاید

Screenshot 2025 04 29 125128

حالا باید روی دکمه next کلیک کنید و در پنجره بعدی از شما میخواد قوانین رو بپذیرید و در نهایت چندتا کلیک و در نهایت منتظر بمونید تا نود جی اس نصب بشه و در نهایت روی فینیش کلیک میکنید حالا برای اینکه مطمعا بشیم که نصب به درستی انجام شده یک cmd جدید باز میکنیم میتونیم روی دکمه ویندوز کلیک کنیم و بنویسم cmd یا میتونیم ویندوز R رو بزنید و در پنجره باز شده بنویسید cmd و اینتر بزنید تا باز بشه بعد از باز شدن cmd میتونیم با چند دستور چک کنیم ببینم نصب شده یا نه میتونید از دستور  node –version استفاده کنید اگر نصب درست انجام شده باشه با پیامی شبیه به v22.15.0 مواجه میشید اگر این پیام رو دریافت کردید یعنی به درستی تونستیم نود جی اس رو نصب کنیم . خوب حالا بریم برای کار با تایپ اسکریپت

آموزش نصبه تایپ اسکریپت

برای نصب تایپ اسکریپت  از npm استفاده میکنیم تا از طریق ترمینال و خیلی سریع انجام بشه  باید از دستور را در ترمینال وارد کنید npm install typescript –save-dev
منتظر میمونیم تا نصب کامل بشه بعد از اینکه نصب کامل شد حالا دقیقا وقت شروع کد زنی هستش الان که همچیز نصب شده وقت نوشتن اولین کد های تایپ اسکریپتمون هست خوب حالا به یه ویرایشگر حرفه ای نیاز داریم من از vs code استفاده میکنم شما هم از هر ویرایشگر دیگه ای میتونید استفاده کنید.

آموزش ساخت اولین پروژه با تایپ اسکریپت

خوب حالا یه پوشه جدید در دسکتاپ اضافه کنید برای مثال میتونید اسمش رو بزارید test-node  ویراشگر خودتون رو هم داخل همون فولدر باز کنید اگر vs code استفاده میکنید میتونید با ترمینال به اون پوشه برید و دستور . code  رو وارد کنید مطمعا باشد که . رو میزارید

خوب حالا میتونیم اولین پروژه خودمون با تایپ اسکریپت بالا بیاریم اولین کاری که باید انجام بدیم اینکه این دستور رو داخله فولدر خودمون وارد کنیم

npx create-typescript-app test-node

به اینشکل که ترمینال خودمون رو باز میکنیم با دستور cd به پوشه مورد نظر میریم و دستور بالا رو مینویسم بعد از نوشتن این دستور یه پروژه کامل برای شما داخل پوشه شما ساخته میشه میتونید با دستور dir تمام فایل هایی که داخل فولدر دارید رو ببنید. خوب برای شروع باید وارد پوشه src شوید در اونجا چندین فایل با فرمت تایپ اسکریپت میبینید ما با فایل index.ts در بین اون فایل ها کار داریم و قراره اولین کد های خودمون رو اونجا بنویسیم

Screenshot 2025 04 29 144119

شما باید فایل index.ts رو در پوشه src بایه وایرایشگر باز کنید چون قراره کد زدن رو اونجا شروع کنیم

نوشتن اولین کد های تایپ اسکریپت به صورت عملی

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

“let userName: string = “Mahdi
let age: number = 25
let isActive: boolean = true

در این جا با استفاده از string ,number و boolean  حالت های متفاوت رو ایجاد کردیم دقیقا چیزی که تو جی اس نمیشه انجام داد حالا بریم برای یه توضیح کامل تر  در این روش نام‌گذاری از camelCase استفاده می‌کنیم که استاندارد JavaScript و TypeScript هست. برای مثال userName ترکیبی از user و name هست که کلمه دوم با حرف بزرگ شروع میشه. این استاندارد باعث میشه کد ما خواناتر و حرفه‌ای‌تر باشه.

شما میتونید این کد هارو داخل فایل index.ts بنویسید و اگر پیشنهاد من رو میخواید خودتون تغیراتی ایجاد کنید داخلش

ساخت تابع در تایپ اسکریپت

خوب بریم برای ساخت اولین تابع در تایپ اسکریپت یچیز جذابه این تابع واقعا در تایپ اسکریپت به شکل زیر هست

}function welcomeMessage (name: string): string
{;`return `Hello ${name}, Welcome to our program
نام تابع هم به صورت camelCase نوشته شده و دقیقاً مشخص می‌کنه که این تابع چه کاری انجام میده. welcomeMessage یعنی “پیام خوش‌آمدگویی” که کاملاً گویاست. خوب حالا قراره نیم رو از کجا بگیریم دقیقا جایی که نیم رو وارد کردیم
خوب حالا میخوایم با استفاده از کنسول لاگ اولین خروجی خودمون رو از تایپ اسکریپت بگیریم و  همچنین میفهمیم چجوری باید از یک تابع استفاده کنیم
;console.log(welcomeMessage(userName))
با این دستور میتونید خروجی تابع رو در کنسول خودتون ببنید پیشنهاد من اینه تابع سن رو هم خودتون اضافه کنید.
کد های شما باید در همچین حالتی باشه حالا
Screenshot 2025 04 29 164755
حالا باید با دستور npm run dev داخل ترمینال ران کنیم کد هایی که نوشتیم و درنهایت خروجی کنسول لاگ داخل cmd پرینت میشه.

جمع بندی

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

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

نیک وب 360
آموزش های حرفه ای نیک وب 360، راهی به سوی آینده روشن

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

از اینکه برایمان نظر خودتان را درج کردید ممنونیم. لطفا توجه کنید نظراتی که مخالف قوانین هستند، حذف خواهد شد.