راهنمای مقدماتی و شروع سریع کار با TypeScript



visibility  
mode_comment   ۲

راهنمای مقدماتی و شروع سریع کار با TypeScript

در این مقاله قصد داریم شما رو با TypeScript آشنا کنیم تا نحوه کار کردن اون رو یاد بگیرید و معایب و مزیتهای اون رو با هم بررسی کنیم.

تایپ اسکریپت یک superset یا مجموعه‌ای فوق العاده از Javascript یا استاندارد TC39 است. با استفاده از TypeScript میتونیم برای متغیرهای مختلف در کدهامون، Static Type های ساده یا پیچیده‌ای رو قرار بدیم و کدنویسی رو راحتتر از گذشته انجام بدیم.

تایپ‌اسکریپت همون Javascript به اضافه انواع مختلف برای متغیرها هست که میتونین بصورت دلخواه از اونا استفاده کنید. یعنی شما میتونین در محیط TypeScript فقط کدهای Javascript خالص رو قرار بدین و هیچ مشکلی به وجود نمیاد چون استفاده از امکانات TypeScript دلخواه یا Optional است.

شما میتونین در محیط تایپ اسکریپت از Javascript مدرن یعنی ES2015 به بالا نیز استفاده کنید و کامپایلر اون رو بصورت اتوماتیک از .ts به .js تبدیل میکنه و همچنین میتونین با استفاده از قابلیتهایی که در اختیارتون قرار میده، کدها رو به ES5 تبدیل کنید تا در مرورگرهای قدیمی‌تر هم بتونین از کدهایی که نوشتید، استفاده کنید.

info نکته :

به این نکته توجه داشته باشید که اگر در کدهاتون از require یا import و export برای کار کردن با module ها استفاده کرده باشید، هنوز هم به module bundler ها مثل webpack یا rollup یا ... نیاز خواهید داشت و TypeScript این کار رو برای شما انجام نمیده.

نصب کردن TypeScript

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

برای نصب با استفاده از yarn نیز بصورت زیر عمل میکنیم:

اگر نصب با موفقیت به پایان رسیده باشه، در هرجای سیستم که باشید و در command line دستور tsc --version رو اجرا کنید، نسخه اون رو به شما نمایش میده.

کامپایل کردن یک فایل TypeScript

همونطور که اطلاع دارید فایلهای TypeScript پسوند .ts رو دارند. یک دایرکتوری در desktop به نام ts-simple با استفاده از دستور mkdir ts-simple به وجود بیارید و درون اون یک فایل بنام index.ts به وجود بیارید. در این فایل یک تابع به نام sayHello با یک آرگومان name با نوع String رو به وجود میاریم.

حالا از typescript استفاده میکنیم تا این فایل رو کامپایل کنیم و به Javascript تبدیل کنیم. برای اینکار از دستور tsc index.ts استفاده میکنیم.

با اینکار یک فایل بنام index.js ساخته میشه که نوع string از آرگومان اون حذف شده و همچنین کدها به ES5 تبدیل شده‌اند. کدهای خروجی رو به راحتی میتونین در مرورگر یا Node استفاده و اجرا کنید. خروجی کدهای javascript بصورت زیر خواهد بود:

برای اینکه مطمئن بشید که این فایل در node کار میکنه یا نه، به راحتی میتونین دستور زیر رو در command line اجرا کنید:

میبینید که خروجی دستور بالا قرار داده شده است.

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

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 39)

برای مثال فرض کنید در مثال بالا بخوایم متد trim رو بر روی متغیر name که از نوع String هست، اعمال کنیم. اگر این کد رو به محیط Production ببریم و یک نوع دیگر که String نباشه رو به تابع مورد نظر پاس بدیم، یک ارور نمایش داده میشه. این ارور به خاطر اینه که متد trim فقط برای رشته‌ها مورد استفاده قرار میگیره و نمیتونین از اون برای بقیه انواع استفاده کنید.

شما به راحتی با استفاده از TypeScript میتونین جلوی چنین مشکلاتی رو قبل از وارد شدن به محیط Production بگیرید. مثلا فرض کنید که به جای String یک آرایه رو به این تابع پاس بدیم. بصورت زیر:

حالا اگر مجددا دستور tsc index.ts رو در command line اجرا کنیم، یک ارور به ما نمایش داده میشه:

اگر ما در محیط Development از TypeScript استفاده نکرده بودیم، پس شاید این باگ رو پیدا نمیکردیم و اون رو به محیط Production میفرستادیم و کاربرهای سایت با چنین اروری روبرو میشدند:

افزونه‌های دیگر TypeScript

علاوه بر فرمت .ts که در بالا از اون استفاده کردیم میتونین از فرمت .d.ts هم استفاده کنید که از اون برای کتابخانه‌های Javascript ای که از قبل ساخته شده‌اند، مورد استفاده قرار میگیره. همچنین با استفاده از فرمت .tsx میتونین کدهای JSX که برای React مورد استفاده قرار میگیره رو با سینتکس TypeScript به وجود بیارید.

مزیتهای استفاده از TypeScript

  • قبل از اینکه وارد محیط Production بشیم، ارورهایی که مربوط به Type هستند گرفته میشه و کاربرها کمتر با ارور مواجه میشن.
  • TypeScript در اکثر ادیتورهای موجود مثل Atom و Visual studio code و ... پشتیبانی میشه و امکانات فوق‌العاده‌ای رو در اختیارتون قرار میده.
  • خوانایی کدهاتون خیلی بالاتر میره و راحتتر میتونین کدهاتون رو توسعه بدید و دیگران هم بهتر با کدهایی که شما نوشتید، ارتباط برقرار خواهند کرد.
  • میتونین کدهای ES2015 به بالا رو نیز به راحتی در Typescript استفاده کنید و کامپایلر اونا رو به نسخه‌های پایینتر از جمله ES5 تبدیل میکنه.
  • از اونجایی که TypeScript از سال 2012 منتشر شده است، افراد و پروژه‌های زیادی از اون استفاده میکنن و تقریبا هر سوالی که داشته باشید رو میتونین با جستجو به راحتی بهش برسید.
  • میتونین در پیدا کردن شغل جدید به عنوان یک امتیاز از اون استفاده کنید.
  • وقتی از TypeScript برای پروژه‌های React استفاده میشه، دیگه نیازی نیست که از PropTypes مربوط به خود React استفاده کرد.

معایب استفاده از TypeScript

  • برای به وجود آوردن یک ویژگی جدید باید کدهای بیشتری نسبت به حالت معمول نوشته بشه و وقت بیشتری رو از شما میگیره.
  • اگر بخواید بصورت جدی از TypeScript استفاده کنید، باید اون رو به‌روز رسانی کنید و اگر نیاز باشه کدهاتون رو Refactor کنید.
  • مدت زمانی طول میکشه تا کار با TypeScript رو یاد بگیرید.
  • شما هنوز هم به Bundler ها از جمله Webpack یا Rollup و ... احتیاج دارید.

در آینده بیشتر در مورد TypeScript مقاله قرار میدم و شما رو با ویژگی‌های اون آشنا میکنم.

comment دیدگاه کاربران
ثبت برند

عالی

afshinirani

با تشکر

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.