در چند سال گذشته، تایپ اسکریپت به یکی از محبوب ترین زبان های برنامه نویسی برای توسعه دهندگان وب تبدیل شده است.
افزایش محبوبیت آن را می توان به مزایای زیادی که نسبت به جاوا اسکریپت سنتی ارائه می دهد نسبت داد.
در این سری مقالات، مفاهیم اساسی TypeScript از جمله نحو، انواع داده ها، توابع، کلاس ها و ماژول ها را پوشش خواهم داد.
در بخش بعدی این مقاله، چگونگی پیاده سازی آن را در برنامه های کاربردی در مقیاس متوسط تا بزرگ یا در سطح سازمانی بررسی خواهم کرد.
Typescript چیست:
TypeScript یک زبان برنامه نویسی منبع باز محبوب است که قابلیت های جاوا اسکریپت را گسترش می دهد. این یک ابر مجموعه تایپ شده از جاوا اسکریپت است، به این معنی که شامل تمام ویژگی های جاوا اسکریپت است و ویژگی های اضافی برای تایپ استاتیک، کلاس ها، رابط ها و ماژول ها ارائه می دهد.
بیایید نگاهی بیندازیم که چرا توسعه دهندگان انواع را در کد برنامه خود می خواهند.
به عنوان مثال به این نمونه کد جاوا اسکریپت نگاه کنید.
در این کد نمونه، ما واقعاً نمی‌توانیم مشخص کنیم که آرگومان ارسالی به تابع اعداد است یا رشته یا هر دو.
اگر کسی که a و b را به عنوان اعداد تفسیر کرده است، این “تغییر سازگار با عقب” را ایجاد کند، چه می‌شود؟ مثل این
اگر بخواهیم رشته های a و b را پاس کنیم، به مشکل برمی خوریم
بیایید نگاهی به نسخه تایپ اسکریپت این کد بیندازیم:
در اینجا، یادداشت‌های نوع را به پارامترهای تابع a و b و همچنین نوع برگشتی تابع اضافه کرده‌ایم.
با تعیین اینکه a و b از نوع شماره هستند، TypeScript تضمین می کند که فقط مقادیر عددی را می توان به عنوان آرگومان به تابع ارسال کرد و در صورت استفاده از هر نوع دیگری، خطای کامپایل ایجاد می کند.
شروع کار با TypeScript
برای شروع استفاده از TypeScript، ابتدا باید آن را روی دستگاه خود نصب کنید. TypeScript را می توان با استفاده از Node Package Manager (npm) با اجرای دستور زیر در ترمینال خود نصب کرد:
npm install -g typescript
راه اندازی یک پروژه Typescript ساده:
برای یک “سلام، تایپ اسکریپت!” برنامه TypeScript، می توانید مراحل زیر را دنبال کنید:
1- یک دایرکتوری جدید برای پروژه خود ایجاد کنید و در آن حرکت کنید:
`mkdir hello-typescript
سی دی hello-typescript`
2- یک فایل package.json جدید برای پروژه خود راه اندازی کنید:
npm init -y
3- TypeScript را به عنوان وابستگی توسعه نصب کنید:
npm install typescript
4 – یک فایل جدید به نام index.ts در ریشه دایرکتوری پروژه خود ایجاد کنید و کد TypeScript زیر را به آن اضافه کنید:
این کد متغیری به نام message of type string را اعلام می کند و مقدار “Hello, World!” را به آن اختصاص می دهد. سپس مقدار پیام را در کنسول ثبت می کند.
کد TypeScript را با استفاده از دستور tsc به جاوا اسکریپت کامپایل کنید:
npx tsc index.ts
یک index.js جدید پس از کامپایل ایجاد می شود
متغیرها و مقادیر:
در TypeScript، از متغیرها برای ذخیره مقادیری استفاده می شود که می توانند بعداً در برنامه استفاده شوند. مانند جاوا اسکریپت، تایپ اسکریپت دارای چندین نوع متغیر از جمله var، let و const است که هر کدام خواص و کاربردهای خاص خود را دارند.
بیایید نگاهی به نحوه تعریف و اختصاص مقادیر به متغیرها در TypeScript بیندازیم:
در مثال های کد بالا، the var کلمه کلیدی برای تعریف و مقداردهی اولیه متغیر سن استفاده می شود که به آن مقدار عددی 1 اختصاص داده شده است.
این let کلمه کلیدی برای تعریف متغیر نام استفاده می شود که بعداً به آن مقدار رشته “جیمز باند” اختصاص می یابد.
در نهایت، const کلمه کلیدی برای تعریف و مقداردهی اولیه متغیر ثابت pi استفاده می شود که به آن مقدار عددی 3.142 اختصاص داده شده است.
اگر بخواهیم به سن مقداری ناسازگار با عدد بدهیم، با خطا مواجه می‌شویم:
let age: number = 18
age = "not a number"
هر گونه حاشیه نویسی ضمنی و تایپ کنید:
متغیرها و پارامترهای تابع می‌توانند یک حاشیه‌نویسی از نوع صریح یا یک نوع ضمنی از هر کدام داشته باشند.
حاشیه نویسی نوع صریح زمانی است که نوع متغیر یا پارامتر تابع را به صراحت در کد مشخص می کنید. مثلا:
در این مثال، myString دارای حاشیه نویسی نوع صریح رشته، و addNumbers تابع دارای حاشیه نویسی نوع صریح برای پارامترهای x و y و همچنین نوع برگشتی آن است.
از سوی دیگر، یک نوع ضمنی از any زمانی استفاده می شود که نوع متغیر یا پارامتر تابع به صراحت مشخص نشده باشد. مثلا:
در این مثال، myVariable یک نوع ضمنی از any دارد زیرا نوع آن به صراحت مشخص نشده است. به طور مشابه، addValues تابع دارای انواع ضمنی هر برای پارامترهای a و b است.
آرگومان های تابع و مقادیر بازگشتی
برای توضیح این موضوع، اجازه دهید این کد جاوا اسکریپت را مشاهده کنیم
در اینجا، حتی از اجرای تابع نیز مشخص نیست که add باید اعداد یا رشته ها را بپذیرد.
اگر از این تابع استفاده می‌کردید، راهنمای ابزار درون ویرایشگر شما چگونه به نظر می‌رسید:
بدون حاشیه‌نویسی نوع، برای آرگومان‌هایی که به add منتقل می‌شوند، «همه چیز می‌رود».
بیایید چند نوع حاشیه نویسی به آرگومان های تابع خود اضافه کنیم:
در تایپ اسکریپت، می‌توانیم حاشیه‌نویسی‌های نوع را به آرگومان‌های تابع اضافه کنیم و مقادیر را برگردانیم تا کد ما از لحاظ نوع ایمن‌تر باشد و در زمان کامپایل خطاها را بگیرد. به عنوان مثال:
در این مثال، addNumbers تابع دو آرگومان x و y می گیرد که هر دو دارای یک نوع عدد هستند. تابع همچنین دارای یک نوع برگشتی از شماره است.
اگر نوع مناسب را ارائه نکنیم، با خطای زیر مواجه می شویم
اگر بخواهیم به طور خاص نوع بازگشتی را بیان کنیم، می‌توانیم این کار را با استفاده از نحو : در یک مکان دیگر انجام دهیم
این یک راه عالی برای نویسندگان کد برای بیان مقاصد خود از قبل است.
TypeScript مطمئن می شود که ما به این هدف عمل می کنیم و خطاها در محل اعلان تابع به جای جایی که از مقدار برگردانده شده توسط تابع استفاده می کنیم ظاهر می شود.
اشیا، آرایه ها و تاپل ها:
اکنون که می‌دانیم چگونه متغیرها و توابع ساده را تایپ کنیم، بیایید با مجموعه‌ها چیزها را کمی جالب‌تر کنیم. در جاوا اسکریپت، این به معنای اشیاء و آرایه ها است.
در TypeScript، Objects، Arrays و Tuples سه ساختار داده رایج هستند که برای ذخیره و دستکاری داده ها استفاده می شوند.
اشیاء:
اشیاء در TypeScript شبیه به اشیاء در جاوا اسکریپت هستند. آنها برای ذخیره جفت های کلید-مقدار استفاده می شوند، جایی که کلیدها رشته ها هستند و مقادیر می توانند هر نوع داده ای باشند.
اجسام با استفاده از بریس های مجعد تعریف می شوند {} و جفت های کلید-مقدار با دو نقطه از هم جدا می شوند:.
در اینجا مثالی از نحوه تعریف یک شی در TypeScript آورده شده است:
در کد مثال بالا، یک شی به نام person را با سه ویژگی name، age و isStudent تعریف می کنیم. ما می توانیم با استفاده از علامت نقطه مانند این به خصوصیات شی شخص دسترسی پیدا کنیم.
console.log(person.name); // Output: James
آرایه ها:
آرایه ها در TypeScript برای ذخیره مجموعه ای از مقادیر از همان نوع داده استفاده می شوند. آنها با استفاده از براکت مربع تعریف می شوند [] و مقادیر با کاما از هم جدا می شوند.
در اینجا یک کد مثال است:
// Define an array
let numbers: number[] = [1, 2, 3, 4, 5];
در مثال بالا، یک آرایه به نام اعداد را با پنج عنصر نوع شماره تعریف می کنیم.
ما می توانیم به عناصر آرایه اعداد با استفاده از علامت کروشه مربعی مانند این دسترسی داشته باشیم.
console.log(numbers[1]); // Output: 2
تاپل ها:
تاپل ها در TypeScript برای ذخیره تعداد ثابتی از مقادیر انواع داده های مختلف استفاده می شوند.
آنها با استفاده از براکت مربع تعریف می شوند [] و انواع داده های مقادیر به ترتیب مشخص شده و با کاما از هم جدا شده اند.
در اینجا یک مثال است:
// Define a tuple
let employee: [string, number] = ['James', 27];
در کد مثال بالا، یک تاپل به نام کارمند را با دو عنصر تعریف می کنیم: یک رشته برای نام کارمند و یک عدد برای سن کارمند.
ما می‌توانیم با استفاده از علامت‌گذاری براکت مربع به عناصر تاپل کارمند مانند این دسترسی داشته باشیم.
console.log(employee[0]); // Output: James
این مقاله در قسمت 2 ادامه دارد…..اینجا
