یک راهنمای کاربردی برای بررسی type (نوع) کامپوننت‌های Vue که در JavaScript نوشته شده‌اند.
چرا به typeها (نوع‌ها) نیاز داریم؟
در دهه اخیر، مرورگرها بسیار قدرتمند شده‌اند، که این مسئله توسعه دهندگان را قادر می‌سازد تا برنامه‌های تعاملی غنی‌‌ای بسازند. این تعاملی و غنی بودن با یک افزایش در پیچیدگی و اندازه سورس کد در frontend همراه است. سورس کدهای بزرگ و پیچیده، نیازمند توجه و رسیدگی بیشتری هستند و از این رو تیم‌های frontend هم بزرگ‌تر شده‌اند.
وقتی که بیش از یک توسعه دهنده در کار شرکت دارند، نیاز به رابط‌های واضح و APIها هم وجود دارد. JavaScript بسیار منعطف است، اما شما در آن نمی‌توانید type آرگومان‌هایی که یک تابع می‌پذیرد را نتیجه گیری کنید.
برای مثال، فکر می‌کنید که type آرگومان تابع print که در زیر آمده است، چیست؟
function print(value) {
console.log(value)
}
حتی پس از نگاه کردن به سورس کد تابع print، می‌بینیم که type یا نوع value مبهم است. با توجه به این که در سورس کدهای بزرگ نمی‌توانید برای نتیجه گیری type یک آرگومان مربوط به یک تابع، به منبع آن تابع مراجعه کنید، این مسئله نمایانگر یک مشکل می‌باشد. یک راه برای رفع این مشکل، این است که API تابع را سندنگاری کنید، اما اسناد همیشه گرایش شدیدی به قدیمی شدن دارند.
اگر راهی برای دانستن type آرگومان یک تابع، فقط با نگاه کردن به نام تابع وجود داشت چه؟
بله، یک راه وجود دارد: typeها یا TypeScript.
function print(value: string) {
console.log(value)
}
به محض این که به تابع print نگاه کنیم، می‌دانیم که value باید یک رشته (string) باشد. همین اطلاعات کم سریعا همکاری و باروری شما را بیشتر میکند.
Typeها به نوعی APIها را خودمختار می‌کنند. جدا از این، ویرایشگرهای کد / IDEها هم منفعت زیادی از typeها می‌برند. IDEها می‌توانند پیشنهادهای (suggestion) هوشمندانه‌ای فراهم کنند، و عدم تطابق typeها را به صورت خطی نمایش دهند.
توسعه دهنده نرم‌افزار آمریکایی، یعنی Jeff Atwood من گفته‌ام:
«هر برنامه‌ای که بتواند در جاواسکریپت TypeScript نوشته شود، در نهایت در جاواسکریپت TypeScript نوشته خواهد شد.»
پس TypeScript گزینه نهایی است؟
TypeScript رابط‌ها را صریح میکند و ما را قادر به همکاری می‌سازد، اما پیچیدگی و نکات منفی خود را هم به همراه دارد:
- مقداری زمان اضافی صرف اضافه کردن typeها خواهد شد.
- انعطاف JavaScript از دست می‌رود و ما باید همه چیز را خودمان تایپ کنیم، و گاهی اوقات اضافه کردن typeها پیچیده می‌شود.
- دارای یک انحنای یادگیری با یک شیب تند است و نیاز به بازآموزی خدمه توسعه دهنده خواهد بود.
Vue و TypeScript
Vue یک API بر پایه آبجکت و روان را برای نوشتن کامپوننت‌های قابل ساخت (composable) فراهم میکند.
export default {
data() {
return {
items: []
}
},
methods: {
add(text) {
this.items.push({ text, done: false })
},
complete(index) {
this.items[index].done = true
}
}
}
کامپوننت بالا، در TypeScript می‌تواند به این صورت نوشته شود:
import { Component, Vue } from 'vue-property-decorator';
interface TodoItem {
text: string
done: boolean
}
@Component
export default class Todo extends Vue {
private items!: TodoItem[]
private add(text: string) {
this.items.push({ text, done: false })
}
private complete(index: number) {
this.items[index].done = true
}
}
با استفاده از TypeScript، شما intellisenseهایی (نوعی کمک کننده در اتمام کد که شامل امکاناتی مانند اطلاعات پارامتر، اطلاعات خلاصه و کلمه کامل می‌باشد.) بر پایه type دریافت خواهید کرد که باروری توسعه دهنده را افزایش می‌‌دهند.
نکته خوب درباره پشتیبانی TypeScript در Vue این است که این مسئله در Vue 3، که در اواسط سال بعد منتشر خواهد شد، تغییر خواهد کرد.
اضافه کردن typeها به Vuex حتی پیچیده‌تر و ناخوش‌آیندتر است. همچنین intellisense حاضر بر روی state / getter / action مورد نظر که به کامپوننت‌ها map شده است، به نوعی تقریبا وجود ندارد.
Chris Fritz، سازنده اسناد Vue گفته است:
«اکثر باگ‌های رایج در برنامه‌های Vue، به خاطر خطاهای type هستند.»
بله، این موضوع حقیقت دارد، و ابزاری مانند ESLint در یافتن این باگ‌ها بسیار کاربردی‌تر هستند.
پس آیا اصلا به TypeScript نیاز داریم؟
شاید نیازی نباشد که امروز به سراغ آن بروید. TypeScript امنیت از نظر type را تضمین میکند، رابط‌های API را سندنگاری میکند و قابلیت intellisense را در IDEها فعال میکند. من حس می‌کنم که intellisense تا به اینجا در پروژه‌های Vue، بسیار حیاتی‌تر از امنیت از نظر type می‌باشد.
بهترین نکته درباره TypeScript این است که در واقع می‌توانید بدون این که از آن استفاده کنید، از آن بهره ببرید.
بله، با VS Code و TypeScript ما میتوانیم قابلیت intellisense را در فایل‌های JavaScript خود داشته باشیم. همچنین اگر امنیت از نظر type را بخواهیم، آن را هم میتوانیم به کار بگیریم. VS Code نشانه‌گذاری‌های JSDoc را حدث می‌زند، تا تعریفات TypeScript را در حین حرکت تولید کند. بیایید یک پروژه JavaScript را به همراه typeها و قابلیت intellisense راه‌اندازی کنیم.
Intellisense در JavaScript
در فایل‌های جاوااسکریپت، VS Code نوع‌ها یا typeها را برای مقادیر استاتیک حدث می‌زند تا intellisense مربوطه که شامل نام ویژگی‌های آبجکت، type مقدار برگشتی تابع و typeهای ویژگی می‌باشد را فراهم کند.
VS Code فراگیری type خودکار را به همراه دارد که از typeهای پکیج‌های npm و typeهای تعریف شده توسط افراد استفاده میکند تا intellisense مربوطه، شامل اثر متد و اطلاعات پارامتر را فراهم کند. همچنین VS Code با استفاده از اطلاعات type در Vue و پلاگین Vetur، می‌تواند تکمیل کردن‌های غنی و اطلاعات type را در فایل‌های .vue هم فراهم کند.
گرچه، نتیجه‌گیری type استاتیک برای آرایه و مقادیر دینامیک ممکن نیست، و VS Code در موارد این چنینی می‌تواند از نشانه‌گذاری JSDoc برای جمع‌‌آوری اطلاعات type استفاده کند. در قطعه کد زیر، type یا نوع مربوط به this.items به عنوان یک آرایه با type یا نوع any تشخیص داده شده است؛ زیرا به طور استاتیک مشخص است که this.items یک آرایه می‌باشد، اما هیچ اطلاعاتی درباره مقادیر موجود در این آرایه وجود ندارد. ما میتوانیم از نشانه‌گذاری @type برای اضافه کردن اطلاعات type درباره مقادیر موجود در آرایه استفاده کنیم.
حدث زدن type در VS Code از طریق کامنت‌های JSDoc، درست به اندازه TypeScript منطقی است. قطعه کد زیر که در JavaScript و TypeScript نوشته شده است را ببینید.
استفاده از JSDoc برای اضافه کردن اطلاعات type به کامپوننت‌های Vue
کامپوننت‌های Vue گزینه‌های data (داده)، props (propها)، computed (محاسبه شده) و methods (متدها) را به همراه دارند که وقتی به همراه اطلاعات type فراهم شوند، می‌توانند به طرز قابل توجهی تجربه توسعه دهنده را ارتقا دهند.
۱. data (داده)
ما باید برای ویژگی‌هایی که حدث زدنشان به صورت استاتیک غیر ممکن است، نشانه‌گذاری‌های @type را فراهم کنیم. برای مثال:
در قطعه کد بالا، items و currentItem اطلاعات ناکاملی درباره type دارند، پس ما فقط برای آن دو ویژگی به نشانه‌گذاری‌های @type نیاز داریم.
تعریفات type برای items و currentItem بسیار مشابه به هم هستند. اگر ما در حال نوشتن TypeScript باشیم، یک رابط برای type آیتم مورد نظر خواهیم ساخت. با استفاده از JSDoc، ما میتوانیم typeهای سفارشی رابط‌ها را با استفاده از نشانه‌گذاری @typeof بسازیم.
پیشنهادهای تکمیل خودکار و اطلاعات type، برای data بر روی زمینه this در هوک‌های lifecycle، متدها، محاسبه شده و watch handlerها در دسترس هستند.
۲. props
VS Code برای propهای اولیه، می‌تواند به طور خودکار اطلاعات type را حدث بزند.
گرچه، اگر Object یا Array را به عنوان type مورد نظر داشته باشید، اطلاعاتی که به طور خودکار حدث زده شده‌اند، بی استفاده خواهند بود. در اینگونه موارد، ما باید اطلاعاتی را با استفاده از نشانه‌گذاری @type فراهم کنیم.
این مورد حتی با سینتکس گزینه‌های اعتبارسنج برای propها هم کار میکند.
وقتی که در حال تعریف نام‌های prop در یک آرایه هستید، روند فراهم کردن اطلاعات type کمی پیچیده است. استفاده از نام‌های آرایه برای تعریفات propها پیشنهاد نمی‌شود.
۳. computed (محاسبه شده)
برای ویژگی‌های محاسبه شده، حدث type برگشتی خودکار، به طوری که انتظار می‌رفت کار نمی‌کند، اما در عوض نام‌های ویژگی محاسبه شده را در پیشنهادها (suggestionها) فراهم می‌نماید.
پس ما با استفاده از نشانه‌گذاری @returns، میتوانیم اطلاعات type را برای مقادیر برگشتی هم فراهم کنیم.
۴. methods (متدها)
نام‌های متد در پیشنهادهای VS Code بر روی زمینه this در دسترس هستند، اما در زمینه اطلاعات type کمبود دارند.
در اینجا می‌بینیم که متد add یک پارامتر به نام text را می‌پذیرد و یک number را بر می‌گرداند، اطلاعات حدث زده شده به صورت خودکار سودمند هستند، و اگر بتوانیم اطلاعات type را برای پارامتر text فراهم کنیم، تجربه کامل یک زبان تایپ شده را به دست خواهیم آورد. به علاوه، ما میتوانیم با استفاده از نشانه‌گذاری @param به پارامترها type اضافه کنیم.
اگر متد مورد نظر با توجه به نامش واضح نباشد، ما حتی میتوانیم یک توصیف کوچک درباره آن فراهم کنیم.
VS Code حتی نشانه‌گذاری‌های JSDoc بیشتری را هم فراهم میکند؛ شما می‌توانید لیست کامل نشانه‌گذاری‌های پشتیبانی شده را در صفحه ویکی VS Code بیابید.
آیا ما میتوانیم بررسی‌های تایپ سخت‌گیرانه را در JavaScript انجام دهیم؟
بله، این کار ممکن است. عبارت // @ts-check را در مکان شروع اسکریپت در فایل .vue مورد نظر اضافه کنید.
اگر می‌خواهید بررسی‌های تایپ سخت‌گیرانه را در کل پروژه اضافه کنید، باید یک فایل به نام jsconfig.json به ریشه پروژه خود اضافه نمایید.
{
"compilerOptions": {
"checkJs": true
}
}
این آموزش حول سه محور اصلی JavaScript، TypeScript و Visual Studio Code می‌چرخید، که راکت برای هر سه آن‌ها دوره‌های آموزشی مناسبی را فراهم کرده است. نگاهی به آن‌ها داشته باشید:
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید