تایپ اسکریپت راه حل مشکلات شما!

27 اسفند 1398
تایپ اسکریپت راه حل مشکلات شما!

تایپ اسکریپت راه حل مشکلات شما!

در قسمت قبل با یک مشکل بسیار ساده ی جاوا اسکریپتی آشنا شدید. آیا به راه حل ساده ی آن رسیدید؟ در واقع راه حل های مختلفی برای حل این مشکل وجود دارد. مثلا می توانیم یک شرط if اضافه کنیم تا مشخص کنیم اگر value عدد نبود حتما آن را به عدد تبدیل کن الی آخر... ولی چرا؟ چرا باید برای مسئله ای به این سادگی دستورات مختلفی را بنویسیم؟ اینجاست که تایپ اسکریپت وارد می شود!

می خواهم به شما نشان دهم که نوشتن همین کد با تایپ اسکریپت چقدر راحت تر است. ابتدا به سایت https://www.typescriptlang.org/ بروید و تایپ اسکریپت را دانلود کرده و در سیستم خود نصب کنید. قسمت دانلود سایت در این لینک قابل دسترسی است: https://www.typescriptlang.org/#download-links

نصب تایپ اسکریپت با استفاده از npm ساده ترین راه است بنابراین من هم همین کار را انجام می دهم. توجه داشته باشید که اگر node.js را نصب ندارید دستورات npm برایتان اجرا نخواهند شد بنابراین حتما آن را نصب کنید. حالا به سادگی ترمینال خود را باز کرده و کد زیر را در آن تایپ و اجرا کنید:

npm install -g typescript

تایپ اسکریپت برای شما نصب شده است. در این مرحله فایل دیگری می سازم به نام using-ts.ts (توجه داشته باشید که پسوند نام ts است نه js). سپس کدهای جاوا اسکریپت خودم را در آن paste می کنم:

قرار گیری کد های جاوا اسکریپت در فایل تایپ اسکریپت
قرار گیری کدهای جاوا اسکریپت در فایل تایپ اسکریپت

همانطور که می بینید سریعا چندین خطا دریافت کرده ام. خطاهایی که از نام ثابت های ما (button و input1 و input2) گرفته است به دلیل باز بودن فایل جاوا اسکریپت من (js-only.js) است. تایپ اسکریپت تشخیص می دهد که دو متغیر با دو نام یکسان در این دو فایل وجود دارد و از شما اشکال می گیرد. برای حل این مشکل به سادگی پنجره ی js-only.js را می بندم و این خطاها از بین می رود:

از بین رفتن خطا ها با بستن دو پنجره همزمان از یک کد
از بین رفتن خطاها با بستن دو پنجره همزمان از یک کد

همانطور که در تصویر بالا می بینید حالا تنها خطاهای باقی مانده مربوط به value ها هستند. تایپ اسکریپت تشخیص می دهد که کد ما مشکلی دارد:

ما عناصر html را گرفته و درون ثابت هایی قرار داده ایم. سپس دستور value را روی این ثابت ها صدا زده ایم. تایپ اسکریپت می گوید شاید مقدار value برای عنصری که دریافت کرده ایم وجود نداشته باشد. در بعضی از عناصر html مقدار value وجود دارد (مثلا input ها) اما تمام عناصر html دارای value نیستند و این کد به طور صریح این موضوع را مشخص نکرده است.

برای حل مشکل باید مشخص کنیم که بله ثابت ما null نمی شود:

const input1 = document.getElementById("num1")!;

با قرار دادن علامت ! در جلوی این کد به تایپ اسکریپت می گوییم این کد هیچ وقت null نمی شود و ما از کارمان مطمئن هستیم. همچنین باید به آن بگوییم که عنصر دریافتی ما در این قسمت یک input است بنابراین حتما دارای value خواهد بود:

const input1 = document.getElementById("num1")! as HTMLInputElement;

نگران نباشید تمام این موارد را در طول دوره بررسی می کنیم، فعلا فقط قصد دارم تا امکانات تایپ اسکریپت را مشاهده کنید. طبیعتا کد بالا در یک فایل جاوا اسکریپت با فرمت js کار نمی کند و حتما باید در فایلی با فرمت ts نوشته شود. من همین کار را برای input دوم نیز انجام می دهم.

در مرحله ی بعد با قابلیت type در تایپ اسکریپت آشنا می شویم. وقتی می گویم type منظورم data type است یعنی نوع داده ها (رشته، عدد، و ...). در تایپ اسکریپت هم می توانید نوع داده ها را صریحا مشخص کنید و هم اینکه type های بسیار بیشتری از جاوا اسکریپت در اختیار دارید که در طول دوره آن ها را مرور خواهیم کرد. به تصویر زیر نگاه کنید:

خطای تایپ اسکریپت نسبت به پارامتر های تابع
خطای تایپ اسکریپت نسبت به پارامتر های تابع

همانطور که می بینید زیر num1 و num2 یک علامت سه نقطه ایجاد شده است که در واقع هشدار تایپ اسکریپت به ما است. اگر موس خود را روی این علامت ببرید تایپ اسکریپت به شما می گوید که type پیش فرض برای num1 و num2 تایپی به نام any است یعنی هر مقداری را می تواند بگیرد، گرچه خود تایپ اسکریپت سعی می کند تا بر اساس کدها حدس بزند که نوع داده ی بهتر در این قسمت چیست. در واقع تایپ اسکریپت می گوید که باید برای این دو ورودی نوع داده را نیز تعیین کنیم.

ما می توانیم این کار را بدین صورت انجام بدهیم:

function add(num1: number, num2: number) {
  return num1 + num2;
}

یعنی اضافه کردن علامت دو نقطه و سپس نوشتن type مورد نظر. حالا با اضافه کردن type مورد نظر خطای دیگری می گیریم:

خطایی جدید برای input1.value
خطایی جدید برای input1.value

همانطور که می بینید input1.value خطا گرفته است. چرا؟ به دلیل اینکه ما گفتیم پارامتر اول باید number باشد اما value دریافتی از مرورگر همیشه رشته است. قبل از اینکه این خطا را رفع کنم می خواهم به شما نحوه ی کامپایل کردن کدهای تایپ اسکریپت به جاوا اسکریپت را نشان بدهم:

tsc filename.ts

برای تبدیل فایل های تایپ اسکریپت به جاوا اسکریپت ابتدا دستور tsc و سپس نام فایل typescript خود را مشخص می کنید. با اجرای این دستور یک فایل جاوا اسکریپت به همین نام در پوشه ی شما ایجاد می شود. شما باید همین فایل جاوا اسکریپت را در مرورگر خود (مثل حالت عادی و همیشگی در تگ های script) استفاده کنید. مثلا برای من می شود:

tsc using-ts.ts

خطای تایپ اسکریپت هنگام کامپایل کد ها به جاوا اسکریپت
خطای تایپ اسکریپت هنگام کامپایل کدها به جاوا اسکریپت

همانطور که می بینید از آنجایی که خطای درون فایل تایپ اسکریپت را حل نکرده بودم با کامپایل کردن کدها درون ترمینال visual studio code خطا می گیرم. البته همانطور که در تصویر بالا (سمت چپ) مشخص است هنوز فایل جاوا اسکریپت (using-ts.js) ایجاد شده و به من داده می شود. البته بعدا می توانیم تنظیمات تایپ اسکریپت را خنثی کنیم تا در صورت وجود خطا فایل جاوا اسکریپت کامپایل نشود.

برای حل این خطا کافی است که یک علامت + را به آرگومان های خود اضافه کنیم:

button.addEventListener("click", function() {
  console.log(add(+input1.value, +input2.value));
});

علامت + مخصوص تایپ اسکریپت نیست و از دستورات جاوا اسکریپت است. این علامت یک مقدار را تبدیل به عدد می کند. به محض اینکه کد را به این شکل تغییر دهیم تمام خطاها از بین می رود. حالا دوباره دستور tsc using-ts.ts را اجرا می کنم و این بار فایل جاوا اسکریپت بدون خطا به من تحویل داده می شود.

بنابراین محتویات فایل تایپ اسکریپت من به شکل زیر بود:

const button = document.querySelector("button");
const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

function add(num1: number, num2: number) {
  return num1 + num2;
}

button.addEventListener("click", function() {
  console.log(add(+input1.value, +input2.value));
});

اما محتویات فایل جاوا اسکریپت کامپایل شده ی من به شکل زیر است:

var button = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
function add(num1, num2) {
    return num1 + num2;
}
button.addEventListener("click", function () {
    console.log(add(+input1.value, +input2.value));
});

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

توجه کنید که اضافه کردن فایل ts به مرورگر باعث خراب شدن کد می شود چرا که مرورگر ها نمی توانند فایل های تایپ اسکریپت را اجرا کنند:

    <script src="using-ts.ts" defer></script>

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

    <script src="using-ts.js" defer></script>

حالا اگر به مرورگر برویم و کدها را تست کنیم به جای عدد 105 همان عدد 15 را می گیریم. این تنها یک مثال از صد ها مثال از قدرت تایپ اسکریپت است.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جامع تایپ اسکریپت توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

20 تیر 1400
ایول خوب توضیح میدید ممنون

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مقالات مرتبط
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو