اهمیت استفاده از typescript در فریم ورک های جاوا اسکریپت

در این مقاله قصد دارم درباره اهمیت استفاده زبان typescript در فریم ورک هایی مثل انگولار ، react و vuejs بپردازم. یادم هستش که چند سال پیش وقتی برای اولین بار از انگولار 2 استفاده کردم با یه پدیده جالبی به نام typescript آشنا شدم، از جاوا اسکریپت توی کد نویسی خودش استفاده کرده بود اما مرتب تر ، راحت تر و به طور کلی بخوام بگم کمک کرد کدهای تمیز تری بنویسم. بچه هایی که با زبان های backend مثل C# کار کرده باشن بسیاری از مفاهیمی که در typescript ازش صحبت شده به راحتی درک می کنند به سرعت باهاش ارتباط برقرار می کنن ، می بینن که بسیاری از مفاهیم مثل interface ، enum و یا حتی تعریف مقدار دهی اولیه برای متغیر خودشون چقدر از حجم کد نویسی اونها کم کرده و در نهایت بهشون کمک کرده یک برنامه بسیار منسجم و خوانایی طراحی و برنامه نویسی کنن.

توی این مقاله اصلا قصد ندارم درباره typescript آموزشی مطرح کنم بلکه قصد دارم از مزایای اون و استفادش در فریم ورکی مثل vuejs یا کتابخونه react حرف بزنم.

خیلی عزیزانی که با react و یا vuejs کار می کنن یا حتی شروع به یادگیری این ها می پردازن صرفا به سراغ جاوا اسکریپت میرن و فضای جاوا اسکریپت برای کد نویسی اصلی خودشون در نظر میگیرن، در این صورت میان کامپوننت های خودشون با پسوندهای jsx برای react یا vue برای vuejs می سازن، خب در این صورت شما در جاوا اسکریپت از مفاهیمی مثل interface ، ساخت مدل برای متغیر های خودتون یا ارائه به سرویس، تعریف enum برای بازم متغیر های خودتون، معرفی generic type برای متغیرهایی خودتون و خیلی استفاده مفیدی که می تونید از typescript ببرید اما خودتون بی نصیب میذارید!!!

اجازه بدید قضیه با چند تا مثل قدری روشن تر کنم:

فرض کنید یه متغیر دارید که قرار این متغیر به شکل یه object با key هایی به نام های titile ، body ، isActive و id باشه قرار هستش که این متغیر به شکل props توی کامپوننت های شما در جریان باشه بنابراین شما هربار باید بیاین یه متغیر به این شکل تعریف کنید:

این یعنی نوشتن یه کد تکراری ، حالا اگه یه جایی یکی از این property املاش اشتباه بنویسی چی میشه؟ میبینی این یعنی اضافه کاری ، در صورتی که ما باید در برنامه نویسی دنبال این باشیم که تا اونجایی که ممکن کدهامون بدون خطا و مرتب شده بنویسیم.

حالا این وسط برای این مثال راه حل typescript چیه؟ به شما میگه که یه interface بنویسی و بیای نوع پراپرتی های خودت درونش تعریف کنی و در نهایت متغیر خودت از نوع همین interface معرفی کنی

interface myData{
        id:string;
        title:string;
        body:string;
        isActive:boolean;
}
let data: myData;

کافیه شما همین interface از نوع export تعریف کنید تا متغیرهایی که از نوع همین object قرار تعریف بشن مقدار دهی کنید.

یا یه مثال دیگه =>

فرض کنید یه متغیر دارید که قرار چند تا مقدار ثابت string به این شکل بگیره

let status = "paid"; // "unpaid" یا "pending" یا "error"

این متغیر اگه بخواین جای دیگه تعریف کنید ممکن املاش اشتباه کنید و مجبور شید component به component به دنبال لغات برید تا این متغیر و مقادیرش پیدا کنید. اما پیشنهاد typescript

enum statusEnums {
       Paid = &quotpaid&quot,
       Unpaid = &quotunpaid&quot,
       Pending = &quotpending&quot,
       Error = &quoterror&quot,
}

let data: string = statusEnums.Paid;

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

مثال هایی از این دست بسیار زیاد هستن که میشه ساعت ها دربارش بحث کرد اما من به همین جا بسنده می کنم و شما در عین حال دعوت به یادگیری از typescript برای فریم ورک های خودتون می کنم.

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

ممنون از توجهتون :)