ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جامع تایپ اسکریپت
توصیه می‌کند:
مفاهیم dynamic type و static type
27 اسفند 1398
درس 3 از سری آموزش جامع تایپ اسکریپت
مفاهیم dynamic type و static type
زبان تایپ اسکریپت انواع و اقسام type ها را در اختیار ما قرار می دهد. البته خود زبان جاوا اسکریپت چند data type دارد اما تایپ اسکریپت تعداد بسیار بیشتری را به آن اضافه می کند، تا حدی که به شما اجازه می دهد type های خودتان را تعریف کرده و از آن ها استفاده کنید. در این جلسه می خواهیم با برخی از type های اصلی آشنا شویم که توسط جاوا اسکریپت نیز شناخته می شود (به آن ها core type می گوییم) و سپس فرق «دانستن Type» از جاوا اسکریپت و «استفاده از Type» از تایپ اسکریپت را بررسی می کنیم.
اولین type اصلی ما number یا اعداد است. در هر دو زبان جاوا اسکریپت و تایپ اسکریپت تنها یک نوع عدد وجود دارد، یعنی برخلاف برخی از زبان های دیگر (مثلا جاوا) type های مختلفی برای اعداد صحیح (integer) یا اعداد اعشاری (float و double و...) و غیره وجود ندارد. بنابراین 10 و 5.6 و 6- همگی از نوع number بوده و تفاوتی بین آن ها نیست.
Type بعدی ما string یا رشته است که معمولا به سه روش مختلف تعریف می شود:
- استفاده از علامت single quote (یعنی
') مانند 'Hi' - استفاده از علامت double quote (یعنی
") مانند "Hi" - استفاده از template literal (یعنی علامت backtic یا
`) مانند `Hi`
مورد سوم روش جدیدتری در جاوا اسکریپت بوده و با استفاده از آن می توانیم به جای چسباندن متغیرها و رشته ها به هم با اپراتور + از آن ها درون خود رشته استفاده کنیم.
Type سوم Boolean ها هستند که فقط شامل مقادیر true و false می شوند. همچنین همانطور که می دانید مقادیر معمولا به true تبدیل می شوند به غیر از گروهی خاص مثل عدد صفر که همیشه false است. مقادیر Boolean به جز این دو مقدار هیچ چیز دیگری نمی گیرند و حتی اگر از عدد یا رشته ای به عنوان Boolean استفاده کنید در نهایت تبدیل به true یا false خواهد شد.
فعلا با همین سه تایپ شروع می کنیم و هر چه جلوتر می رویم type های بیشتری را معرفی خواهیم کرد. من در این جلسه می خواهم روی تفاوت «درک type» و «استفاده از type» تمرکز کرده و مفهوم dynamic types و static types را برایتان توضیح بدهم. برای شروع تست این type ها یک فایل 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="app.js" defer></script> </head> <body> </body> </html>
حالا فایلی به نام app.ts ایجاد کنید تا کدهای تایپ اسکریپت را درون آن بنویسیم. من کد ساده ی زیر را برایتان نوشته ام که در واقع جاوا اسکریپت خالص است و هنوز کد تایپ اسکریپت ندارد. این کد را درون فایل app.ts قرار دهید:
function add(n1, n2) {
return n1 + n2;
}
const number1 = 5;
const number2 = 2.8;
const result = add(number1, number2);
console.log(result);
همانطور که می بینید یک تابع ساده داریم که دو عدد را با هم جمع می زند. اگر با دستور tsc app.ts فایل جاوا اسکریپت خود را دریافت کنیم و مرورگر را باز کنیم عدد 7.8 را در مرورگر دریافت خواهیم کرد بنابراین تا این قسمت مشکلی نیست. حالا اگر بخواهیم مثل قسمت قبلی برنامه را دچار مشکل کنیم می توانیم عدد 5 را به صورت رشته تعریف کنیم:
const number1 = '5'; const number2 = 2.8;
با انجام این کار و اجرای مجدد دستور tsc app.ts در مرورگر عدد 52.8 را دریافت می کنیم. دقیقا همان مشکلی که با input1.value داشتیم. در واقع جاوا اسکریپت با خودش می گوید مقدار اول من یک رشته است و قرار است به مقدار دوم اضافه شود. این مقدار دوم نیز باید رشته باشد چرا که جمع کردن ریاضی و محاسباتی بین یک رشته و یک عدد معنی ندارد بنابراین مقدار دوم را تبدیل به رشته می کنم.
برای حل این مشکل باید type را مشخص کنیم. برای انجام این کار از علامت دو نقطه به علاوه ی نام آن تایپ خاص استفاده می کنیم. مثلا در همین تابع می گوییم:
function add(n1: number, n2: number) {
return n1 + n2;
}
البته اینکه type چه چیزی باشد به خود شما و برنامه ی شما بستگی دارد. مثلا اگر قصد شما این است که این تابع فقط پارامتر های رشته ای را دریافت کند می توان گفت:
function add(n1: string, n2: string) {
return n1 + n2;
}
حالا مثل جلسات قبل خطایی در مورد رشته بودن عدد 5 به ما می دهد که باید آن را از حالت رشته خارج کنیم.
ما می دانیم که نوع number در جاوا اسکریپت نیز موجود بوده و مختص تایپ اسکریپت نیست. در خود جاوا اسکریپت برای نمایش type از اپراتور typeof استفاده می کنیم. به طور مثال:
function add(n1: number, n2: number) {
console.log(typeof number1);
return n1 + n2;
}
حالا دستور tsc app.ts را اجرا می کنیم تا فایل جاوا اسکریپت (app.js) به روز رسانی شود، سپس به مرورگر می رویم. در قسمت console مرورگر عبارت number را مشاهده می کنیم. اگر نخواهیم از تایپ اسکریپت استفاده کنیم و مشکل بالا را فقط با جاوا اسکریپت حل کنیم باید از همین اپراتور typeof استفاده نماییم:
function add(n1: number, n2: number) {
if (typeof n1 !== 'number' || typeof n2 !== 'number') {
throw new Error('Incorrect input!');
}
return n1 + n2;
}
در این کد می گویم اگر type پارامتر n1 یا n2 برابر با number نباشد یک خطا به کاربر نمایش بده. پرتاب کردن (throw) خطاها از مسائلی است که مربوط به جاوا اسکریپت بوده و از پیش نیازهای این دوره محسوب می شود بنابراین وارد آن مسئله نمی شوم اما اگر نمی دانید throw new Error چه کار می کند، باید بگویم کارش ارسال خطا به مرورگر کاربر است.
چرا باید در جاوا اسکریپت چنین کدی را بنویسیم؟ به دلیل اینکه جاوا اسکریپت توانایی درک و تشخیص type ها را دارد اما نمی تواند فعالانه و مانند تایپ اسکریپت از آن ها استفاده کند. کد بالا در زمان run-time به ما خطا می دهد در حالی که با استفاده از تایپ اسکریپت می توانیم در هنگام توسعه و کد نویسی متوجه خطای خودمان بشویم. در واقع جاوا اسکریپت از dynamic types استفاده می کند یعنی type ها در آن می توانند به صورت لحظه ای تغییر کنند. مثلا یک متغیر عددی را تبدیل به یک متغیر رشته ای کنیم، دقیقا مثل حالت بالا که پارامتر دوم تابع به خاطر پارامتر اول از عدد به رشته تبدیل شد در حالی که تایپ اسکریپت از static types استفاده می کند یعنی شما اجازه ی تغییر type ها را ندارید و در طول توسعه همیشه ثابت خواهد بود.
ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جامع تایپ اسکریپت
توصیه می‌کند:
مقالات مرتبط
20 تیر 1400
30 خرداد 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.