پرش به مطلب اصلی

معرفی

مقدمه​

اینجا فقط Syntax و مفاهیمِ TypeScript رو توضیح میدم. اگه دوست دارید در مورد راه‌اندازی TypeScript و Configهایی که داره اطلاعات به‌دست بیارید، میتونید از این آموزش استفاده کنه:

راه‌اندازی​

من یه Repo دارم که تو ویدئوی بالا کامل توضیح دادم چطور باید راه‌اندازیش کنید. اینجا صرفاً میخوایم ازش استفاده کنیم برای اینکه یه محیطی داشته باشیم که بتونیم توش کد TypeScript بنویسیم.

  1. ریپو رو از اینجا بگیرید و Clone کنید
  2. این دستور رو بزنید تا پکیج‌های مورد نظر نصب بشن: 
    npm i
  3. داخل فایلِ src/main.ts میتونید کد بنویسید
  4. با این دستور پروژه رو در حالت Watch شروع کنید که هر بار فایلی رو تغییر دادید، به طور خودکار از اول اجرا بشه:
npm run dev

مشکل چی بود؟​

به طوری کلی JavaScript سه مشکل اساسی داشت که به همین خاطر زبانی مثل TypeScript به وجود اومد:

عدم وجود Type Safety​

تو JavaScript شما میتونید یه همچین تابعی داشته باشید:

function minus(a, b) {
  return a - b;
}

واضحه که انتظار داریم a و b دو تا عدد باشن و میخوایم اینا رو با هم جمع کنیم.

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

minus("bijan", 23); // NaN

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

به‌عنوان مثال این تابع رو برای احراز هویت در نظر بگیرید:

async function auth(user) {
  const userInDatabase = await db.find({ user: { phone: user.phone } });

  if (!userInDatabase) {
    return { status: 404, message: "User not found." };
  }

  if (user.password !== userInDatabase.password) {
    return { status: 401, message: "Unauthorized." };
  }

  return { status: 200, message: "Welcome!" };
}

با توجه به کد بالا، تابع انتظار داره user حاوی phone و password باشه. اما کسی که قراره از تابع استفاده کنه لزوماً از این مورد با خبر نیست و ممکنه فکر کنه تابع با email کار میکنه؛ بنابراین این کد رو مینویسه و به مشکل میخوره:

auth({ email, password }).then(console.log); // { status: 404, message: "User not found." }

اما تو TypeScript، تایپ user مشخصه و اگه اشتباهی email پاس بدید، همون موقع بهتون خطا میده و جلوی اشتباه رو می‌گیره.

عدم پیشنهاد بر اساس تایپ​

همون مثال ساده رو در نظر بگیرید:

function minus(a, b) {
  return a - b;
}

کسی که بخواد از این تابع استفاده کنه، هیچ Suggestionی از سمت IDE نمیتونه دریافت کنه که متوجه بشه الان از چه تایپی و از چه متغیرهایی برای آرگومان‌های این تابع میتونه استفاده کنه.

اما تو TypeScript بر اساس تایپ پارامتر، بهتون میگه چه آرگومانی رو می‌تونید به تابع پاس بدید.

عدم خطایابی قبل از اجرای کد​

تو JavaScript تا زمانی که کد رو اجرا نکنید، نمی‌تونید متوجه بشید خطا دارید یا نه.

اما تو TypeScript همون موقع که مشغول نوشتن کد هستید، خطا رو بهتون نشون میده.

TypeScript​

تایپ‌اسکریپت یه زبان برنامه‌نویسیه که بر مبنای JavaScript نوشته شده. اصطلاحاً میگن Supersetشه. یعنی تمام فیچرهای JavaScript رو داره و علاوه بر اون‌ها یه سری فیچر دیگه هم داره.

مهم‌ترین فیچری که TypeScript نسبت به JavaScript داره، بحث Type System هست. به خاطر همین هم این اسم رو روش گذاشتن.

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