شروع کار با تایپ اسکریپت گتسبی

اولین قدم برای اجرای Typescript بر روی یک کد موجود، نصب چند وابستگی است. از آنجایی که ما با گتسبی کار می کنیم، در اینجا بسیار خوش شانس هستیم: پلاگین های گتسبی وجود دارند که از Typescript و tslint پشتیبانی می کنند: gatsby-plugin-typescript، gatsby-plugin-tslint. علاوه بر این، به برخی وابستگی های اضافی مانند:

• انواع: @types/react، @types/react-dom برای پشتیبانی از انواع React و ReactDom خاص، یا هر نوع بسته از بسته‌های خاصی که ممکن است استفاده کنید. من برای مثال از react-helmet استفاده می کنم و خوشبختانه یک بسته @types/react-helmet برای آن موجود بود.

• tslint: این جایگزین اسلینت خواهد شد.

• قوانین tslint: استفاده خواهیم کرد tslint:جدیدترین، tslint-config-prettier و tslint-react در اینجا، اما می‌توانید قوانینی را از هر بسته موجود، مانند tslint-config-airbnb اضافه کنید. بسته کلیدی برای نصب در اینجا tslint-config-prettier است، تضمین می کند که هیچ قانون tslint با پیکربندی Prettier ما در تضاد نیست.

• tslint-plugin-prettier: این افزونه باید در پیکربندی tslint شما همراه با tslint-config-prettier وجود داشته باشد. این اطمینان حاصل می کند که Prettier به عنوان یک قانون tslint اجرا می شود.

• تایپ و تیغه–لودر: آنها برای کارکردن gatsby-plugin-typescript مورد نیاز هستند.

در اینجا یک دستور ساده وجود دارد که می توانید از آن برای نصب تمام وابستگی های ذکر شده در بالا استفاده کنید، می توانید هر نوع بسته یا قوانین tslint اضافی را که ممکن است نیاز داشته باشید اضافه کنید:

1
yarn add gatsby-plugin-typescript gatsby-plugin-tslint && yarn add --dev typescript tslint tslint-loader @types/react @types/react-dom tslint-react tslint-config-prettier tslint-plugin-prettier

اکنون که همه چیز را نصب کرده ایم، می توانیم تایپ اسکریپت را راه اندازی کنیم. در ابتدا ممکن است کمی طاقت‌فرسا باشد، بنابراین من مراحل را بررسی می‌کنم و در زیر کمی بیشتر توضیح می‌دهم:

• پیکربندی تایپ اسکریپت: این پیکربندی در فایلی در ریشه پروژه گتسبی ما قرار می گیرد و نامگذاری می شود tsconfig.json. در اینجا ما گزینه های کامپایلر خود و اینکه کدام پوشه را در پروژه خود در هنگام کامپایل کردن فایل های Typescript قرار دهیم یا حذف کنیم، تنظیم می کنیم. شما می توانید یک پیکربندی نمونه را با استفاده از ./node_modules/typescript/bin/tsc --init فرمان
  این پیکربندی است که من در نهایت از آن استفاده کردم، اما با خیال راحت آن را مطابق با نیازهای پروژه خود تغییر دهید:

2
  "compileOnSave": false,
7
    "lib": ["dom", "es2015", "es2017"], 
15
    "noImplicitAny": true ,
18
    "noUnusedLocals": true ,
19
    "noUnusedParameters": true ,
21
    "noFallthroughCasesInSwitch": true ,
24
    "allowSyntheticDefaultImports": true 
27
  "include": ["./src/**/*"]

• پیکربندی Tslint: این پیکربندی شامل قوانین پرده‌بندی ما برای پایگاه کد اسکریپت‌شده ما خواهد بود. در هسته پروژه ما می توانیم یک را ایجاد کنیم tslint.json فایل و موارد زیر را به آن اضافه کنید (یا می توانید پیکربندی را نیز مقداردهی اولیه کنید ./node_modules/.bin/tslint —-init):

2
  "rulesDirectory": ["tslint-plugin-prettier"],
3
  "extends": ["tslint:latest", "tslint-react", "tslint-config-prettier"],
6
    "jsx-no-multiline-js": false,
7
    "jsx-no-lambda": false,
9
    "no-boolean-literal-compare": false,

توجه: داشتن بسیار مهم است tslint-config-prettier به عنوان آخرین مجموعه از tslint قوانین در extends آرایه ای برای اطمینان از اینکه قوانین دیگر توسط قوانین این بسته لغو می شوند.
زیر قوانین، شما می توانید هر قانون tslint را که می خواهید فعال یا غیرفعال کنید. مستندات قوانین پایه tslint در اینجا موجود است.

• gatsby-plugin-typescript و gatsby-plugin-tslint: در اینجا ما فقط باید gatsby-plugin-typescript و gatsby-plugin-tslint را به gatsby-config پروژه خود اضافه کنیم. گزینه های دیگری را می توان اضافه کرد، اما آنها برای بقیه پست ضروری نیستند.

• اسکریپت های زیر را اضافه کنید package.json:

1
"type-check": "tsc --noEmit",
2
"lint": "tslint --project ."

اولی تضمین می کند که در انواع خود هیچ درگیری نداشته باشید. دومی tslint را اجرا می کند تا مطمئن شود که تمام قوانینی که در آن مشخص کرده ایم tslint.json فایل قابل احترام است
اگر از VSCode، Sublime یا تقریباً از هر ویرایشگر کد مدرن استفاده می‌کنید، احتمالاً افزونه‌ای در دسترس است که به شما امکان می‌دهد هر بار که فایلی را ذخیره می‌کنید، tslint، tsc و Prettier را اجرا کنید.

اکنون که تنظیمات کامل شده است، آماده شروع نوشتن متن هستیم. در حال اجرا yarn develop در قلب پروژه گتسبی شما باید کار کند و به شما اجازه دهد تا وب سایت خود را مانند قبل مشاهده کنید.
با تشکر از gatsby-plugin-tslint، اکنون باید بتوانیم همه اخطارها و خطاهای tslint را در ترمینال ببینیم. با این حال، ما هنوز هم می توانیم پروژه گتسبی خود را در مرورگر خود ببینیم. این عالی است زیرا به ما اجازه می دهد تا پایگاه کد موجود خود را قطعه قطعه یا در صورت نیاز به تایپ اسکریپت منتقل کنیم.

اکنون می توانیم انتقال کد خود را از جاوا اسکریپت به تایپ اسکریپت آغاز کنیم. برای تبدیل فایل به Typescript کافیست پسوند را تغییر دهید .jsx به .tsx یا .js به .ts (و فراموش نکنید که مرجع همه افراد را به روز کنید .js یا .jsx فایل ها به .ts یا .tsx در مال شما gatsby-node.js و gatsby-config.js). سپس می توانیم انواع و اینترفیس ها را بنویسیم و مشکلات نوع را یکی یکی برطرف کنیم. پس از تبدیل کل پایگاه کد ما، ممکن است یک مشکل باقی مانده باشد: برخی از بسته‌های npm که استفاده می‌کنیم ممکن است دارای تعریف نوع نباشند. برای آنها، ما باید این انواع را خودمان در پروژه خود اعلام کنیم.

اولین قدم برای این قسمت ایجاد یک است @types پوشه در src. این پوشه حاوی هر نوع تعریف سفارشی است که برای پروژه خود نیاز داریم.
به عنوان مثال در مراحل زیر استفاده خواهم کرد gatsby-plugin-google-analytics بسته چون من شخصا مجبور شدم در پروژه خودم یک نوع سفارشی برای آن بنویسم. این بسته صادرات الف OutboundLink جزء که تایپ نشده است و ویرایشگر من این را به عنوان یک هشدار برجسته می کند. کاری که برای رفع این مشکل انجام دادم اینه:
1. ایجاد کنید gatsby-plugin-google-analytics.d.ts در پوشه **@types
**2. موارد زیر را به این نوع فایل اضافه کنید:

1
declare module 'gatsby-plugin-google-analytics' {
2
  let OutboundLink: (props: any) => JSX.Element;
3
  export { OutboundLink };

در اینجا ما ماژول را به همان روشی که بسته در پروژه ما نامگذاری شده است نامگذاری می کنیم. بعد باید نوع را بنویسیم OutboundLink جزء و آن را به همان روشی که در بسته صادر شده صادر کنید.

سپس هر عبارت import برای OutboundLink دیگر نباید هیچ هشدار Typescript ایجاد کند.

ما اکنون یک راه اندازی Typescript کاملاً کارآمد برای پروژه گتسبی خود با tslint و Prettier داریم! شما اکنون تمام ابزارها را در دست دارید تا با تبدیل پروژه خود به صورت قطعه به قطعه در حین یادگیری، شروع کنید و تایپ را یاد بگیرید. کمی وقت بگذارید تا به Typescript عادت کنید و از همه ابزارهای شگفت انگیزی که جامعه برای نوشتن کدهای بهتر در اختیار ما قرار داده است قدردانی کنید.
من از مراحل بالا برای راه‌اندازی تایپ اسکریپت در وب‌سایت گتسبی خودم استفاده کردم و باعث می‌شود در آینده نزدیک از آن در پروژه‌های بزرگ‌تر استفاده کنم.

مارینو گوریری (marinoguerieri.com) را به خاطر نظر دادن در مورد پست با قسمت هایی که از دست دادم فریاد بزنید.

بعدش چی بخونم؟
اگر می‌خواهید درباره React یا توسعه frontend اطلاعات بیشتری کسب کنید، می‌توانید مقالات زیر را بررسی کنید: