راهنمای جامع تایپ اسکریپت [TypeScript] آپدیت 2023

رسانیکامنبع: https://rasanika.com

تایپ اسکریپت یا TypeScript یه زبان برنامه نویسی با بررسی-نوع-قوی(strongly typed)ـه که توسط مایکروسافت خلق شده. این زبان در واقع همون جاوا اسکریپته و همه ویژگی های جاوا اسکریپت رو همراه با یه لایه اضافه تر به اسم سیستم-بررسی-نوع (type checking system) داره.

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

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

شروع سریع: نگاهی خلاصه به TypeScript

نگاهی خلاصه به TypeScript

همونطور گفتم که تایپ اسکریپت یه سیستم بررسی نوع به جاوا اسکریپت اضافه میکنه. یعنی مثلا جاوااسکریپت متغیر های نوع string و number رو داره ولی دیگه کنترل نمیکنه که آیا نوع یا تایپ متغیر رو تا آخر یکسان نگه می داریم یا خیر. تایپ اسکریپت این کنترل رو میتونه انجام بده.

let name = 'reza';
name = 45;

let name = 'reza';
name = 45; // ⚠ خطا باید رشته باشه

یه نکته دیگه اینکه تایپ اسکریپت در نهایت برای اجرا شدن در مروگر ها و نود و … به کد جاوا اسکریپت تبدیل میشه چون این محیط ها مستقیما از زبان تایپ اسکریپت پشتیبانی نمیکنن. در ادامه نحوه انجام این کار رو هم توضیح خواهم داد.

تشخیص و استنتاج نوع

تایپ اسکریپت خودش تو خیلی از موارد می تونه نوع های درست رو تشخیص بده. مثلا وقتی یه متغیر تعریف کنیم و مقدار رشته (string) بهش بدیم نوع متغیر رو string تشخیص میده:

let name = "Reza"; // name: string

تایپ اسکریپت میاد کد جاوا اسکریپت رو تحلیل می کنه و نوع درست رو استنتاج میکنه، اینطوری دیگه نیازی نیست همه جا برای تعریف همه‌ی نوع ها کد اضافه کنیم.

احتمالا از ادیتور VS Code برای نوشتن کد جاوا اسکریپت استفاده کردین و متوجه شدین که تکمیل خودکار یا همون auto-complete برای جاوا اسکریپت انجام میده. این ادیتور تو پشت پرده در واقع از تایپ اسکریپت برای تشخیص نوع ها استفاده می کنه.

تعریف کردن نوع ها

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

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

interface User {
  name: string;
  id: number;
}

حالا می تونیم نوع یه آبجکت رو برابر این اینترفیس قرار بدیم:

const user: User = {
  name: "Reza",
  id: 1,
};

و اگه مقدار درستی ندیم تایپ اسکریپت میفهمه و خطا میده:

const user: User = {
  username: "Reza", // ⚠ <-- خطا میده چون username نداریم
  id: 1,
};

const user: User = {
  name: "Reza",
  id: "1", // ⚠ <-- خطا میده چون عدد نیست
};

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

function getAdminUser(): User {
  //...
}

function deleteUser(user: User) {
  // ...
}

ترکیب کردن نوع ها

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

نوع Union

با استفاده از یونین (union) می شه یه نوع از مجموع چند نوع ساخت. فقط کافیه نوع های لازم رو با کاراکتر | کنار هم بنویسیم. مثلا این متغیر می تونه هم رشته باشه و هم عدد:

let userId: string | number = "abc";

userId = 123 // <-- اوکیه

راستی برای تعریف نوع از کلیدواژه type هم میشه استفاده کرد:

type Role = "admin" | "author";

const role: Role = "owner"; // ⚠ <-- خطا چون این مقدار توی نوع Role نیست

نوع Generic

جنریک (generic) ها می تونن متغیر به نوع اضافه کنن. مثال سادش آرایه هست. اگه فقط بگیم نوع آرایه، اون موقع آیتم های آرایه می تونن شامل هر چیزی باشن. ولی آرایه با استفاده از جنریک می تونه نوع آیتم های داخلش رو هم مشخص کنه. مثلا آرایه ای از رشته ها رو اینطوری میشه تعریف کرد: Array<string> یا مثال های بیشتر:

type BoolArray = Array<boolean>;
type NumberArray = Array<number>;
type UserArray = Array<{ name: string }>;

می تونیم توی تعریف نوع های خودمون هم از جنریک ها استفاده کنیم. مثلا این یه لیسته که میشه بهش آیتم اضافه کرد یا یه آیتم با شماره مشخص ازش گرفت که نوع این آیتم موقع استفاده از این نوع تعریف میشه:

interface List<Item> {
  add: (item: Item) => number;
  get: (index: number) => Item;
}

type User = { name: string };

const userList: List<User> = { ... }; // پیاده سازیش خارج از این بحثه

userList.add("Reza"); // ⚠ خطا
userList.add({ name: "Reza" }); // ✔

const user = userList.get(123); // user: User

تو مثال بالا List نوع جنریکمون هست که یبار تعریفش کردیم و بعدا می تونیم از طریقش نوع های بیشتری مثل List<string> و List<number> و … بسازیم.

سیستم نوع ساختاری

یکی از اصول اصلی بررسی نوع ها توی تایپ اسکریپت تمرکز روی شکل (ساختار) مقادیره. که معمولا به این روش سیستم-نوع-ساختاری یا structural typing گفته میشه. توی این سیستم اگه دوتا مقدار شکل و ساختارشون برابر باشه یعنی نوعشون باهم برابره.

interface Car {
  speed: number;
}

function logSpeed(c: Car) {
  console.log(`speed is ${c.speed}`);
}

const car = { speed: 200 };

logSpeed(car); // اوکیه

تو مثال بالا با وجود اینکه نوع متغیر car رو هیچ وقت Car تعریف نکردیم ولی تایپ اسکریپت چون میبینه دقیقا اینا یه شکل هستن میگه اوکیه و خطا نمیده.

interface Car {
  speed: number;
}

function logSpeed(c: Car) {
  console.log(`speed is ${c.speed}`);
}

interface Airplane {
  speed: number;
  name: string;
}

interface Ship {
  name: string;
}

const car: Car = { ... };
const airplane: Airplane = { ... };
const ship: Ship = { ... };

logSpeed(car); // اوکی
logSpeed(airplane); // اوکی
logSpeed(ship); // ⚠ خطا چون ویژگی speed نداره

توی این مثالم airplane چون همه ویژگی های ضروری نوع Car رو داره (حتی با اینکه یه ویژگی بیشتر هم نسبت بهش داره) می تونه به عنوان ورود تابع logSpeed استفاده بشه.

قدم بعدی

برای آشنایی کامل تر می تونید فهرست مقالات بالا (شروع از مفاهیم اولیه تایپ اسکریپت) رو هم مطالعه کنید و برای یادگیری بهتر آموزش های تایپ اسکریپتی رسانیکا و سایر سایت ها رو ببینید. البته صرفا با مطالعه یا دیدن دوره های آموزشی نمیشه مهارت لازم رو کسب کرد و سعی کنید همراه با این مطالعات پروژه های کاملی هم بسازید. همچنین برای امتحان سریع تایپ اسکریپت از این playground و ویرایشگر آنلاین میشه استفاده کرد:

ویرایشگر آنلاین TypeScript برای تست و یادگیری

خود سایت رسمی تایپ اسکریپت یه زمین بازی یا playground برای تایپ اسکریپت ساخته که توی مرورگر تایپ اسکریپت رو کامپایل و اجرا میکنه. این میتونه خیلی به یادگیری شما کمک کنه. آدرس ادیتور: https://www.typescriptlang.org/play

نحوه استفاده از TypeScript در NodeJS

برای اضافه کردن تایپ اسکریپت به پروژه نود، باید پکیج کامپایلر تایپ اسکریپت رو یا به صورت local (داخل پروژه) و یا به صورت global (کل سیستم) نصب کنید. اگه روی کل سیستم نصب کنید توی همه پروژه ها می شه ازش استفاده کرد. برای نصب به صورت گلوبال در کل سیستم:

npm install -g typescript

برای نصب لوکال فقط داخل همین پروژه کافیه آپشن -g رو بردارید.

بعد از نصب باید فایل تنظیمات تایپ اسکریپت یا tsconfig.json رو به پروژه اضافه کنید که برای اینکار باید دستور tsc --init رو داخل پروژه اجرا کنید.

حالا اگه یه فایل با پسوند .ts اضافه کنید (که داخلش کد تایپ اسکریپته) و دستور tsc رو اجرا کنید یه فایل .js با کد جاوا اسکریپت به پروژه اضافه میشه.

در واقع دستور tsc فایل تایپ اسکریپت شما رو با توجه به تنظیمات tsconfig پروژه کامپایل و فایل جاوا اسکریپت معادلش رو به پروژه اضافه کرد که در نود قابل اجراست.