TypeScript چیست و چرا باید از آن استفاده کرد؟

مقدمه

زبان برنامه نویسی TypeScript مزایای زیادی نسبت به جاوا اسکریپت برای توسعه دهندگان دارد. قابلیت های اضافی TypeScript فراهم می کند تا بتوانید برنامه ها و وب سایت های تعاملی پیچیده تری با باگ های کمتر بسازید.

TypeScript همچنین دارای یک اکوسیستم بزرگ از ابزارهای توسعه دهنده است که اسناد درون خطی و بررسی کد زنده را ارائه می دهد که تشخیص اشتباهات کدنویسی را در حین کار آسان تر می کند.

این مقاله توضیح می‌دهد که TypeScript چیست و ارتباط آن با جاوا اسکریپت چیست و منابعی را برای کمک به شما در شروع ساخت برنامه‌های frontend و backend فراهم می‌کند.

TypeScript چیست؟

TypeScript یک زبان برنامه نویسی است که قابلیت های اضافی را به جاوا اسکریپت اضافه می کند.

جاوا اسکریپت هرگز در نظر گرفته نشده بود که برنامه های پیچیده front-end و backend را هدایت کند. در ابتدا برای افزودن تعامل ساده به وب سایت ها طراحی شد. به عنوان مثال، برای ایجاد دکمه های کلیکی و متحرک کردن منوهای کشویی.

با وجود این، جاوا اسکریپت در میان توسعه‌دهندگانی که راه‌هایی برای استفاده از آن فراتر از این مورد استفاده می‌کردند، محبوب شد، که منجر به مشکلاتی شد: زبان بسیار بخشنده بود. اشتباهات برنامه نویسی یا استفاده نادرست از ویژگی هایی که بعداً یک برنامه کاربردی را خراب می کرد بسیار آسان می کرد و جاوا اسکریپت فاقد بسیاری از ویژگی های زبان های دیگر بود. TypeScript برای رسیدگی به این مسائل و در عین حال سازگار با محیط های جاوا اسکریپت موجود توسعه داده شد.

TypeScript یک زبان تایپ ایستا و یک ابرمجموعه از جاوا اسکریپت است که بر روی نحو و عملکرد موجود جاوا اسکریپت ایجاد می شود. این بدان معنی است که شما می توانید از جاوا اسکریپت در کد تایپ اسکریپت خود استفاده کنید، اما نمی توانید از تایپ اسکریپت در کد جاوا اسکریپت خود استفاده کنید زیرا کد نوشته شده در تایپ اسکریپت از ویژگی ها و نحوی استفاده می کند که در جاوا اسکریپت وجود ندارد.

TypeScript باید برای اجرا در مرورگرهای وب و محیط هایی مانند Node.js (transpired اصطلاح دیگری است زیرا به زبان سطح پایین تبدیل نمی شود) به جاوا اسکریپت کامپایل شود. هنگامی که کد TypeScript در جاوا اسکریپت کامپایل می شود، قرار نیست کد جاوا اسکریپت به دست آمده مستقیماً ویرایش شود.

گردش کار برای ساخت برنامه های TypeScript این است که آنها را در TypeScript بنویسید، آنها را در جاوا اسکریپت کامپایل کنید و سپس آنها را گسترش دهید. در حالی که این مرحله اضافی ممکن است پیچیدگی اضافی غیرضروری به نظر برسد، به یک دلیل بسیار خوب وجود دارد: اگر تایپ اسکریپت یک زبان کاملاً جدید بود، نمی توانست مورد توجه قرار گیرد، اما از آنجا که جاوا اسکریپت را کامپایل می کند تا بتواند روی سیستم های موجود اجرا شود، این کار انجام شده است. به طور گسترده پذیرفته شده است.

پسوند فایل برای TypeScript .ts است. در زیر یک فایل نمونه به نام index.ts با چند کد اصلی TypeScript وجود دارد:

let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();

توجه داشته باشید که در حالی که نحو بسیار شبیه به جاوا اسکریپت است، چیزی متفاوت در این مثال قابل مشاهده است: متغیر پیام با یک دونقطه (:) دنبال می شود و نوع آن – در این مورد TypeScript – به ما اجازه می دهد مشخص کنیم که پیام باید یک رشته باشد. ، و نمی تواند مقداری از نوع متفاوت بگیرد.

ویژگی ها و مزایای برتر TypeScript برای توسعه دهندگان

TypeScript به این دلیل نامگذاری شده است که ویژگی اصلی آن معرفی ایمنی نوع به جاوا اسکریپت است. در مثال بالا، یک نوع رشته برای متغیر پیام اعمال می شود، بنابراین نمی توان از مقدار عددی یا نوع دیگری در آنجا استفاده کرد. این ممکن است محدود کننده به نظر برسد، اما در واقع یک مزیت برای توسعه دهندگان است.

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

این سناریو را در نظر بگیرید: شما مقادیر را از دو ورودی متنی HTML می گیرید و می خواهید آنها را اضافه کنید. جاوا اسکریپت این مقادیر را به صورت رشته می خواند (این یک جعبه متن است!). چیزی که شما با آن نتیجه می گیرید این است:

let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"

این کد بدون هیچ اخطار یا خطایی اجرا می‌شود و مقادیر جعبه‌های متن به‌عنوان رشته در نظر گرفته می‌شوند، به این معنی که به‌جای اضافه شدن با استفاده از عملیات‌های حسابی، به‌هم پیوسته می‌شوند و به‌جای عدد 7، نتیجه ناخواسته «25» می‌شود. اگر در حال ساختن یک ابزار تجاری هستید و می‌خواهید مقداری ارزش پولی را با هم اضافه کنید، می‌تواند واقعاً بد باشد – به مشتری خود بیش از حد هزینه اضافه می‌کنید!

این نشان می دهد که چرا ایمنی نوع مهم است. در زیر، نوع متغیرهای اضافه شده با افزودن یک نوع به آنها اعمال می شود:

let a: number = "2";
let b: number = "2";
console.log(a + b);

اگر سعی کنید این کد را کامپایل و اجرا کنید، انجام نمی شود – در عوض با یک خطا مواجه خواهید شد:

Type 'string' is not assignable to type 'number'.

این به شما می گوید که شما به اشتباه سعی کرده اید یک مقدار رشته را به یک متغیر عددی اختصاص دهید تا بتوانید آن را برطرف کنید – برای مثال، با تبدیل صریح رشته به یک عدد. تایپ اسکریپت با جلوگیری از حتی کامپایل کردن و اجرای کد خود در صورت وجود خطاهای تایپی، اشکال زدایی برنامه شما را آسان تر و برای کاربران شما قابل اطمینان تر می کند.

هنگام کار در TypeScript نیازی نیست نوع متغیر را مشخص کنید (اگرچه معمولاً باید): type inference به شما امکان می دهد متغیرها را بدون نوع مشخصی اعلام و استفاده کنید و TypeScript نوع را بر اساس مقدار و میزان استفاده استنباط می کند. این هنگام وارد کردن کد جاوا اسکریپت تایپ نشده برای استفاده در پروژه های TypeScript مفید است.

اگر می‌خواهید با این کار برای خودتان بازی کنید، TypeScript Playground به شما امکان می‌دهد بدون نیاز به کامپایل، کد TypeScript را مستقیماً در مرورگر خود بنویسید و آزمایش کنید.

انواع، کلاس‌ها و رابط‌های سفارشی داده‌های شما را ثابت نگه می‌دارند

TypeScript پشتیبانی جاوا اسکریپت را برای برنامه نویسی شی گرا با پشتیبانی از انواع سفارشی شما و همچنین بهبودهایی در کلاس ها، رابط ها و وراثت گسترش می دهد.

ساخت انواع شی و رابط های خود به شما امکان می دهد داده های خود را در TypeScript مدل کنید تا اطمینان حاصل کنید که داده های شما به درستی پردازش و ذخیره می شوند.

کلاس‌ها و وراثت کدهای پاک و اصول DRY را فعال می‌کنند و پایگاه کد شما را بسیار سازمان‌دهی‌تر از جاوا اسکریپت سنتی نگه می‌دارند.

Enums و انواع تحت اللفظی درک کد شما را آسان تر می کند

Enum ها با نام گذاری مقادیری که ممکن است مبهم باشند، کد شما را خواناتر و راحت تر می کند.

به عنوان مثال، فرض کنید وضعیت یک سفارش را در پایگاه داده خود به عنوان یک مقدار عددی ذخیره می کنید تا در فضا صرفه جویی کنید و جستجو را سریعتر کنید. به جای «در انتظار»، «پرداخت شده»، و «ارسال شده»، ممکن است این مقادیر را به ترتیب به عنوان اعداد 0، 1 و 2 ذخیره کنید.

عارضه جانبی این است که کد شما گیج کننده می شود زیرا اعداد به خودی خود چیز زیادی را توصیف نمی کنند. ممکن است فراموش کنید کدام عدد با کدام وضعیت مطابقت دارد و از عدد اشتباه استفاده کنید. Enums یک راه حل راحت ارائه می دهد:

enum OrderStatus {
pending,
paid,
shipped,
}

در فهرست فوق، “در انتظار” مقدار 0 دارد (enums، مانند سایر شاخص ها در برنامه نویسی، شروع به شمارش موقعیت آیتم ها از صفر می کند)، “پرداخت” مقدار 1، و “ارسال شده” مقدار 2 است. هنگام استفاده از enum، شما به مقادیر آن با نام اشاره می کنید و مقدار شاخص برگردانده می شود:

console.log(OrderStatus.paid); // Will output 1

انواع تحت اللفظی و اتحادیه ها مقادیر خاصی را برای متغیرها اعمال می کنند. به عنوان مثال، ممکن است تابعی داشته باشید که فقط انتظار دارد مقدار “cat” یا “dog” را دریافت کند:

function myFunction(pet: "cat" | "dog") {
console.log(pet);
}

اگر کد شما مقادیری غیر از “cat” یا “dog” را به این تابع ارسال کند، یک خطا ایجاد می شود. این کمک می‌کند تا مطمئن شوید مشکلات بیشتری در طول توسعه یافت می‌شوند: می‌توانید توابعی بنویسید که انتظار ورودی خاصی را دارند، با دانستن اینکه اگر اشکالی معرفی شود که مقدار غیرمنتظره‌ای به آنها ارسال کند، برنامه شما کامپایل نخواهد شد.

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

کد TypeScript باید در جاوا اسکریپت کامپایل شود تا بتوان آن را در مرورگرهای وب و Node.js اجرا کرد و برای آن باید کامپایلر TypeScript را نصب کنید.

با استفاده از دستور npm زیر می توانید TypeScript را به صورت سراسری نصب کنید.

npm install -g typescript

پس از نصب، می توانید دستور کامپایل tsc TypeScript را از هر نقطه از ترمینال خود با استفاده از npx اجرا کنید:

tsc index.ts

دستور بالا فایل TypeScript index.ts را کامپایل می کند و یک فایل جاوا اسکریپت کامپایل شده به نام index.js را خروجی می دهد.

نحوه نوشتن برنامه در TypeScript

تایپ اسکریپت هنگام ساخت برنامه های پیچیده، چند صفحه ای و وب سایت ها می درخشد. اکثر توسعه دهندگان از آن برای موارد اساسی مانند افزودن تعامل به صفحات وب منفرد استفاده نمی کنند، اما از آن برای ساخت برنامه های بزرگ با React یا Angular استفاده می کنند.

بسیاری از توسعه دهندگان از ویرایشگرهای کدی استفاده می کنند که از یکپارچه سازی TypeScript پشتیبانی می کنند تا بتوانند از مزایای تکمیل کد، اسناد درون خطی و برجسته سازی خطا برای ساده سازی فرآیندهای توسعه و اشکال زدایی خود استفاده کنند.

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

بله! TypeScript با جاوا اسکریپت سازگار است. می توانید کد جاوا اسکریپت قدیمی خود را وارد کنید و به استفاده از آن در پروژه های تایپ اسکریپت خود ادامه دهید و به مرور زمان آن را تغییر دهید تا از عملکرد جدید تایپ اسکریپت استفاده کنید.

پایان ساخت با TypeScript برای مرورگر

React کتابخانه ای است که به شما در ایجاد رابط کاربری برای قسمت های جلویی خود کمک می کند. این پایه‌ها را برای شما فراهم می‌کند تا اجزای قابل استفاده مجدد بسازید، توسعه برنامه‌تان را ماژولار و ساده کنید. همچنین به شما امکان می دهد صفحات پویا ایجاد کنید که کاربر بتواند با نمایش، پنهان کردن، جابجایی و تغییر ظاهر محتوای روی صفحه با آنها تعامل داشته باشد. برنامه های React را می توان در TypeScript نوشت: این ترکیب یک زنجیره ابزار محبوب و قدرتمند برای توسعه دهندگان فرانت اند است.

Angular یک چارچوب کامل است که از TypeScript برای ساخت اجزای خود استفاده می کند. همه چیز را فراتر از React می برد: علاوه بر ارائه ابزارهایی برای ساخت رابط های کاربری، چارچوبی را برای یک برنامه کامل فراهم می کند. رویکرد عقیده‌ای Angular به توسعه‌دهندگان اجازه می‌دهد تا سریع‌تر بسازند، مشروط بر اینکه مفهوم برنامه آنها با معماری Angular مطابقت داشته باشد.

هر دو React و Angular می توانند برای ساخت برنامه های TypeScript برای Ionic و Electron استفاده شوند. Ionic به شما امکان می دهد با استفاده از TypeScript برنامه های تلفن همراه برای iOS و Android بسازید و Electron به شما امکان می دهد برنامه های وب خود را در برنامه های دسکتاپ برای Windows، Linux و MacOS جاسازی کنید.

استقرار Backendهای TypeScript در سرور

TypeScript به ساخت برنامه های کاربردی جلویی محدود نمی شود. همچنین می‌تواند با Node.js برای توسعه خدمات باطن و برنامه‌های خط فرمان استفاده شود.

همچنین می‌توانید از TypeScript با چارچوب وب Fastify استفاده کنید یا از یک چارچوب خاص TypeScript مانند Nest برای ایجاد APIهای ایمن برای نوع استفاده کنید.

TypeScript و GraphQL

GraphQL یک زبان پرس و جو برای جستجو و بازیابی داده ها از API است. مانند TypeScript، تایپ شده است، بنابراین داده های ساختار یافته و سازگار را ارائه می دهد. با استفاده از سرویس‌هایی که از GraphQL پشتیبانی می‌کنند تا آن را در قسمت‌های پشتی خود پیاده‌سازی کنید، و انواع آن را با کدهای TypeScript خود مطابقت دهید، می‌توانید کیفیت برنامه‌های خود را با اطمینان از اینکه تمام داده‌هایی که بر روی سرویس‌های پشتیبان شما مدل‌سازی شده‌اند به درستی منعکس می‌شوند، تا حد زیادی بهبود بخشید. رابط‌های ظاهری شما، و اینکه تمام داده‌های جمع‌آوری‌شده در فرانت‌اندها به درستی در هنگام آپلود ذخیره می‌شوند.

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