این چیزی است که من مدت زیادی است که قصد انجام آن را داشتم –
ببینید، شما یک پروژه را با استفاده از TypeScript (TS) شروع می کنید یا شاید یک پایه کد موجود را به TS منتقل می کنید، و می خواهید بدانید که پروژه شما چقدر خوب “تایپ” شده است، بنابراین می توانید مطمئن باشید که وقتی برای بازسازی کد خود، TS دارید تا از شما محافظت کند (البته در کنار آزمایش، درست است؟ 😉).
چطوری این کار را انجام میدهی؟
معلوم شد ابزارهایی برای آن وجود دارد و یکی از آنها به نام تایپ اسکریپت-پوشش-گزارش توسط الکس کانسا است و من اکنون آن را امتحان می کنم و در monorepo Pedalboard خود پیاده سازی می کنم.
بیا شروع کنیم!
سلام! برای محتوای بیشتر مانند آنچه می خواهید بخوانید، بررسی کنید @mattibarzeev در توییتر 🍻
من با پیاده سازی آن در یک بسته واحد در مونورپوی خود شروع خواهم کرد و ارزشی را که از آن به دست می‌آورم می‌بینم. بسته ای که من انتخاب می کنم، stylelint-plugin-craftsmanlint است که یک پلاگین stylelint است (همانطور که از نامش پیداست، نمی دانم چرا این را نوشتم… 😅)
با دستورالعمل های صفحه بسته پوشش npm شروع کنید:
yarn add -D typescript-coverage-report
سپس اسکریپت npm را به آن اضافه می کنیم package.json فایل تا بتوانیم پوشش را اجرا کنیم:
"scripts": {
...
"ts-coverage": "typescript-coverage-report"
},
حالا بیایید آن را اجرا کنیم
yarn ts-coverage
سلام، بد نیست – در اینجا صفحه پوشش خلاصه برای بسته من است:
و همچنین یک گزارش HTML ایجاد کرد:
قرار دادن jest.config.ts فایل را برای یک ثانیه کنار بگذارید، می بینم که تست من در آنجا پوشش کمی دارد. بیایید به گزارش (بخشی از آن) در تصویر زیر دقت کنیم:
خوب، خوب است، من می توانم ببینم که کدام نوع ها گم شده اند، اما نشان دادن ماوس روی آنها به من نمی گوید که مشکل دقیقاً چیست (مانند پوشش تست واحد جست و خیز)، اما حدس می زنم می توانید بگویید که مشکل این است که “تو نمی کنی” یک نوع برای این وجود ندارد، درست است؟.
فقط برای اینکه مطمئن شوم همه اینها کار می کند، سعی می کنم یکی از مشکلات را برطرف کنم و دوباره پوشش را اجرا کنم تا مطمئن شوم که دیگر وجود ندارد – چیست؟ require بیانیه برای lint انجام دادن آنجا؟ آیا من این کار را کردم؟ اوه، بیایید آن را به یک واردات ESM تبدیل کنیم و دوباره تست های واحد را اجرا کنیم تا مطمئن شویم که همه هنوز کار می کنند:
// const {lint} = require('stylelint');
import {lint} from 'stylelint';
بله، همه آنها هنوز می گذرند. حالا بیایید ابزار پوشش TS را اجرا کنیم تا ببینیم آیا تأثیری روی آن داشته است یا خیر، و… بله! وای، ما اکنون در پوشش 98.97٪ هستیم:
اما … ما هنوز یک مشکل در آنجا داریم. کجاست؟
هوم… جالب jsonRule نوع آن را ندارد. تثبیت:
const jsonRule: ConfigRules = JSON.parse(`{
…
}`);
و الان 100 درصد پوشش داریم. سرد!
از آن زمان jest.config.ts فایل، فکر می کنم با معرفی a می توانیم آن را نادیده بگیریم typeCoverage ویژگی موجود در فایل package.json ما (اگرچه من علاقه زیادی به اضافه کردن تنظیمات در فایل package.json دارم. من یک فایل .rc را بسیار ترجیح می دهم):
"typeCoverage": {
"ignoreFiles": [
"jest.config.ts"
]
},
اکنون گزارش پوشش کد TS ما خوب است و به شکل زیر است:
خوبه 🙂
All-in-all typescript-coverage-report ابزاری بسیار جالب برای فهمیدن اینکه پروژه شما چقدر خوب “تایپ شده” به نظر می رسد. می‌توان آن را به‌عنوان یک قلاب commit یا حتی برخی از بررسی‌کننده‌های کد به عنوان بخشی از اقدامات GitHub شما ادغام کرد (هوم… این یک ایده زیبا برای پست بعدی من است 😉).
می توانید کل کد را در monorepo Pedalboard بررسی کنید.
سلام! برای محتوای بیشتر مانند آنچه که اخیراً خواندید، بررسی کنید @mattibarzeev در توییتر 🍻
عکس از Fallon Michael در Unsplash
