آشنایی با Vue 3 + تایپ اسکریپت

با پشتیبانی پیشرفته Vue 3 از تایپ اسکریپت، استفاده از آن آسان تر شده است. شما می آموزید که چگونه اپلیکیشن های Vue خود را با این فناوری محبوب تقویت کنید.

مقدمه

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

هزینه تایپ اسکریپت

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

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

مانند هر ابزار یا تکنیک، سازش‌ ها و مبادلاتی وجود دارد که اغلب به تجربه و اغلب دروس آموخته‌ شده نیاز دارند تا به مکان شادی برای تیم برسید. با شنیدن همه این ها، سوال اینجا است که آیا ارزشش را دارد؟

تایپ اسکریپت آنقدرها هم که فکر می کنید ترسناک نیست.

اولین نگرانی بسیاری افراد از تایپ اسکریپت این است که احساس متفاوت و عجیبی دارد. با توجه به اینکه بسیاری از ما از تایپ پویای جاوا اسکریپت استفاده می کنیم، یادگیری سینتکس و پارادایم جدید برای نحوه تعریف و نوشتن کد به طور قابل درک، عجیب به نظر می رسد. با این حال، برای کسانی که کمی از Vue استفاده کرده‌ اند، حقیقت این است که احتمال اینکه در تمام این مدت با تایپ ها کار کرده باشید بسیار زیاد است. باور نمی کنید؟ بیایید به یک کامپوننت بپردازیم.

در اینجا ما کامپوننت دکمه proverbial را داریم که قرار است متن و رنگ پس زمینه را به عنوان props دریافت کند.

در حالی که بسیاری از ما با تعریف props در سینتکس آرایه شروع کردیم، در اینجا می بینیم، بسیاری از ما برای تعریف بهتر props به استفاده از سینتکس آبجکت روی آورده ایم.

و سپس کسانی که در مورد اعتبارسنج های سفارشی می‌ دانند، اغلب یک قدم فراتر رفته اند تا اعتبارسنج های سفارشی را اضافه کنند تا مطمئن شوند که کامپوننت داده‌ صحیح را دریافت کرده است.

پس از نگاهی به این نسخه جدید و بهبود یافته از props در کامپوننت دکمه ما، آنچه ممکن است اکنون متوجه شده باشید این است که یک «تایپ استاتیک» را به props خود اختصاص دهیم.

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

آیا تایپ اسکریپت ارزشش را دارد؟

البته، در حالی که ما استفاده از تایپ های استاتیک را ابهام زدایی کرده ایم، اما هنوز این سوال باقی می ماند که آیا تایپ اسکریپت ارزش افزودن به پایگاه کد ما را دارد یا ندارد.

در حالی که تایپ اسکریپت مطمئناً مزایای زیادی در مورد type checking و مواردی از این قبیل دارد، همانطور که قبلاً ذکر کردیم، نکته کلیدی که باید به خاطر داشته باشید این است که همه ابزارها دارای سازش ها و مبادلات هستند. بنابراین اگر قصد داریم ابزار اضافی را به یک پایگاه کد اضافه کنیم، مطمئن می شویم که مشکل خاصی را که ما یا تیم ما دارد حل می‌ کند.

به نظر ما، وقتی یک تیم تجربه کمی با تایپ اسکریپت داشته باشد، ارزشی که تایپ اسکریپت یک کد پایه ارائه می کند در نهایت به یک چیز کاهش می یابد و آن هم مقیاس پذیری است.

مقیاس پذیری را می توان به دو دسته بندی اصلی تقسیم کرد:

• پایگاه کد شما چقدر بزرگ است؟
• چند کاربر در پایگاه کد شما مشارکت دارند؟

پایگاه های کد بزرگ

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

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

به همین دلیل است که بسیاری از شرکت‌ ها خود را در حال سرمایه‌ گذاری در تایپ اسکریپت می‌ بینند، زیرا به ارائه لایه اضافی از مستندسازی به کد کمک می‌ کند که در غیر این صورت ممکن است اگر مشارکت‌ کننده اصلی شرکت را ترک کند و فراموش کند کامنت هایی را به کدی که نوشته‌ اند اضافه کند، از بین می‌ رود.

تعداد زیادی از مشارکت کنندگان

از سوی دیگر، کسانی هستند که فکر می کنند، »خب اپلیکیشن من کوچک است، پس تایپ اسکریپت چه سودی برای من خواهد داشت؟»

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

از این گذشته، علاوه بر اطمینان از اینکه پایگاه کد همانطور که انتظار می رود کار می کند، این مزیت را نیز به همراه دارد که مدت زمانی را که maintainers برای پاسخ دادن به سؤالات صرف می کنند یا حل کردن PRs که با تایپ های تعریف شده به درستی حل می شدند را کاهش می دهد.

در مورد پشتیبانی تایپ اسکریپت در Vue چطور؟

یکی از بزرگترین موانعی که مردم هنگام استفاده از تایپ اسکریپت در Vue 2 با آن مواجه شدند این بود که اگرچه از نظر فنی امکان پذیر بود، اما هزینه ورودی نسبتاً بالایی داشت و برخی موارد آنطور که می خواستند کار نمی کردند. به عنوان مثال، امکان تشخیص آسان تایپ ها در سراسر Vuex وجود نداشت و افراد مجبور بودند سازش های مختلفی را برای به کار انداختن آن انجام دهند.

با شنیدن این موضوع، جای تعجب نیست که بسیاری از افزودن تایپ اسکریپت به پروژه های Vue خود اجتناب کرده اند. اما برخی نمی دانند که Vue 3 به طور کامل در تایپ اسکریپت بازنویسی شده است. در نتیجه، توسعه دهندگان می توانند انتظار پشتیبانی بهتری از تایپ اسکریپت در آینده داشته باشند. بنابراین، چه ابزار توسعه‌ دهنده‌ مانند Vetur یا کتابخانه‌ هایی مانند Router و Vuex باشد، استفاده از تایپ اسکریپت بسیار آسان‌ تر خواهد شد. و در نتیجه هزینه ورودی کمتر از همیشه است.

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

تصور اشتباهی که بسیاری دارند این است که تایپ اسکریپت همه یا هیچ است. به هر حال، اگر قرار است از تایپ اسکریپت استفاده کنید، آیا نباید کل اپلیکیشن شما در آن بازنویسی شود؟ واقعیت این است که این نمی تواند دور از واقعیت باشد. به عبارت دیگر، درست مانند نحوه مهاجرت تدریجی یک اپلیکیشن قدیمی به Vue با دراپ کردن پکیج CDN است برای افزودن قابلیت Vue است، همین امر را می توان در مورد تایپ اسکریپت نیز گفت.

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

بیایید دوره را مرور کنیم.

در پایان روز، این امکان وجود دارد که تایپ اسکریپت برای پروژه شما مناسب نباشد. اگر اینطور باشد، اصلا اشکالی ندارد. با این حال، اگر به نظر می‌ رسد که تایپ اسکریپت ممکن است در پروژه‌ های آینده شما جایگاهی داشته باشد، پس مطمئن شوید که در حال بررسی اصول کار با تایپ اسکریپت در Vue هستید.