TypeScript (TS) اساساً جاوا اسکریپت است، با شکر در بالا … یک سوپرمجموعه جاوا اسکریپت (JS). به همین دلیل، هر کدی که در یک فایل JS بنویسید، در فایل TS قانونی خواهد بود.
جاوا اسکریپت تنها در 10 روز توسط برندان ایچ، کارمند نت اسکیپ در آن زمان ایجاد شد. آره 10 روز
زمانی که جاوا اسکریپت ساخته شد، هدف آن ایجاد تکه های کوچک کد بود که می توانند در یک صفحه وب جاسازی شوند، که البته هنوز هم اتفاق می افتد. امروزه، علاوه بر جاسازی‌های JS، توسعه‌دهندگان و مهندسان نرم‌افزار، برنامه‌های وب تمام پشته‌ای را ایجاد می‌کنند که می‌توانند تقریباً به طور کامل در جاوا اسکریپت نوشته شوند.
این زبان به طور تصاعدی از دامنه اولیه خود فراتر رفت، و بیش از چند مورد عجیب و غریب و رخدادهای باگی وجود دارد که ممکن است حتی یک توسعه دهنده با تجربه را شگفت زده کند. مثلا:
عملگر برابری جاوا اسکریپت (==)
console.log(“” == 0); // logs >> true // that can’t be right?
دسترسی به ویژگی جاوا اسکریپت
const square = {width: 5, height: 5};
const sqArea = square.widht * square.height;
console.log(sqArea) // logs >> NaN // Ok, I'm not the best speller. NaN, really? Shouldn't this log an error?
TypeScript برای حل این نوع مشکلات در جاوا اسکریپت ایجاد شده است.
بررسی نوع استاتیک در TS
مزیت اصلی TypeScript بررسی نوع استاتیک است، به این معنی که بدون نیاز به اجرای کد، خطا در مقادیر نوع شما را بررسی می کند. TS JS را مجبور می کند تا مانند یک زبان برنامه نویسی با تایپ استاتیک عمل کند.
مثال C++: زبان های برنامه نویسی Statically-Typed:
یک زبان برنامه نویسی با تایپ ایستا مانند C++، C# یا جاوا به انواع مختلفی از متغیرها نیاز دارد که به صراحت هر نوع مقدار را تعریف و ذخیره می کنند. متغیری که یک عدد صحیح را در زبان برنامه نویسی ++C ذخیره می کند ممکن است به شکل زیر باشد:
int num = 10; // declaring a C++ variable as an integer
number = “x” // NOPE can’t reassign an integer to a string in C++
در این مثال، متغیر num نمی توان به یک رشته یا هر مقدار دیگری که یک عدد کامل نیست اختصاص داد، در واقع این عدد حتی نمی تواند شامل اعشار باشد زیرا یک نوع متغیر متفاوت برای اعداد ممیز شناور وجود دارد که به آن می گویند. double.
مثال جاوا اسکریپت: یک زبان برنامه نویسی با تایپ پویا:
در جاوا اسکریپت، متغیرها پویا هستند و در زمان اجرا / زمانی که کد اجرا می شوند، اعلام می شوند. متغیرها همچنین می توانند تغییر یا تخصیص مجدد پیدا کنند. همانطور که می دانید، به عنوان مثال:
let num = 10; // declaring a JS variable
num = “x”; // OK reassigning a JS variable from a number to a string // JS is 100% ok with this
حالا بیایید فرار کنیم Math.round() بر روی … ما num.
console.log(Math.round(num) // logs >> NaN // This result is frustrating when you have dozens or hundreds of lines of code in your codebase. You’re now chasing down the value for: num.
دوباره، TS در تلاش است تا اشکالات احتمالی را از کد بالا حل کند.
تعریف انواع در TS
بیایید از بررسی نوع استاتیک TS استفاده کنیم. برای انجام این کار، ما باید انواع خود را به طور صریح پس از اعلان تعریف کنیم، همانطور که در یک زبان برنامه نویسی با تایپ استاتیک تعریف می کنیم. شاید یک نسخه ی نمایشی… در زیر مقایسه ای کنار هم از توابع است. یکی که در نحو جاوا اسکریپت نوشته شده است و همان تابع در TypeScript، جایی که ما به صراحت آرگومان های نوع تابع را تعریف می کنیم.
جاوا اسکریپت:
function calcArea(radius) {
return 3.14 * radius * radius; // from grade school // π r²
}
console.log(calcArea(5)); // logs >> 78.5 // that’s what I expected
console.log(calcArea(‘answer’); // log >> NaN // again with this
TypeScript:
function calcArea(radius: number): number {
return 3.14 * radius * radius; // from grade school // π r²
}
console.log(calcArea(5)); // logs >> 78.5 // again, expected
console.log(calcArea(‘answer’); // logs >> Error message // now that’s more like it
در تایپ اسکریپت، می‌توانید انواع متغیرهایی را که می‌توانید در جاوا اسکریپت اعلام کنید، اعلام کنید، و پاداش، چند نوع متغیر اضافی وجود دارد.
انواع در جاوا اسکریپت:
عدد، رشته، بولی، تهی، تعریف نشده، شی
Typescript شامل موارد فوق است و اضافه می کند:
هر، ناشناخته، هرگز، enum، تاپل
TS با متغیرهای نوع
let numeric: number = 123_456_789; // type of number
let words: string = 'Typescript'; // type of string
let blog_published: boolean = true; // type of boolean
let stringsArray: string[] = []; // type of array with strings
let person: [number, string] = [1, 'bernie'] // type of tuple // array with 2 values / flaw with push method
let anything; // type any // can be any type // should rarely be used
function calcTax(income: number){ // function with type of number arguments
return income + 100;
}
در VSCode، می‌توانید به سادگی روی یک متغیر TS یا فراخوانی تابع TS شناور کنید و قبل از اجرای تابع ببینید چه نوع مقداری مورد انتظار است. کامپایلر Typescript این خطاهای نوع را قبل از زمان اجرا می گیرد.
در نتیجه
ساختار ساخته شده برای تیم ها
در ظاهر، ممکن است به نظر برسد که نوشتن کد شما در TS در مقابل JS زمان بیشتری نیاز دارد. بیایید سناریوی احتمالی را تصور کنیم که در آن شما با تیمی از توسعه دهندگان روی یک پروژه کار می کنید. کار بر روی یک پروژه جاوا اسکریپت با یک تیم گاهی اوقات می تواند مانند میزبانی یک مهمانی باشد که هر مهمان به زبان متفاوتی صحبت می کند.
و اگر در یک پایگاه کد کار می کنید که با آن آشنا نیستید و/یا یک پایگاه کد بزرگ، علاوه بر کار با یک تیم، چه می کنید… این موقعیتی است که برای سوءتفاهم و سوء تفاهم آماده است، یعنی استفاده کمتر موثر از زمان و بیشتر به صورت جمعی. اشکال زدایی زمان
با تعاریف نوع TS و رابط های واضح، TypeScript به مهمانی می آید و همه چیز را خوب و مرتب نگه می دارد و نقش مترجم جهانی را بر عهده می گیرد. TypeScript به ساختار پایه کد شما با مقادیر شناخته شده کمک می کند و در نتیجه نگهداری آن را آسان تر می کند.
منابع:
- اسناد TypeScript: بهترین منبع معمولاً در اسناد اصلی قرار دارد. اسناد TypeScript به گونه ای سازماندهی شده اند که هم مبتدیان و هم توسعه دهندگان با تجربه بتوانند آنچه را که به دنبال آن هستند بیابند. در اینجا پیوندی به اسناد TypeScript وجود دارد.
- راه اندازی TS در کمتر از 10 دقیقه | من به شدت توصیه می کنم ویدیوی YouTube Alex Ziskind به نام TypeScript Set-up را در VSCode تماشا کنید. او واقعاً کار خوبی انجام می دهد و همه چیز را گام به گام در کمتر از 10 دقیقه پیش می برد.
- *TS Deep Dive در حدود 1 ساعت *| کانال برنامه نویسی با موش از مهندس نرم افزار مش همدانی به ندرت از دست می دهد و Mosh در این آموزش 1 ساعته تایپ اسکریپت را از مهره تا پیچ و مهره توضیح می دهد: TypeScript در 1 ساعت.
امیدوارم این مفید بوده باشد. کد نویسی مبارک!
