چک کردن نوع استاتیک در React – بخش ۲

در این مقاله به ادامه مبحث چک کردن نوع استاتیک در React خواهیم پرداخت. مشاهده بخش ۱

TypeScript

TypeScript یک زبان برنامه نویسی توسعه داده شده توسط مایکروسافت و سوپرست تایپ شدۀ جاوا اسکریپت است و کامپایلر خودش را دارد. چون یک زبان تایپ شده است، می‌تواند ارورها و اشکالات را در زمان ساخت و قبل از راه اندازی برنامه پیدا کند. اینجا می‌توانید در مورد استفادۀ TypeScript به همراه React اطلاعات بیشتری بدست آورید.

جهت استفاده از TypeScript شما باید:

  • TypeScript را به عنوان یک وابسته، به پروژۀ خود اضافه کنید.
  • کامپایلر TypeScript را تنظیم کنید.
  • از افزونه‌های مناسب فایل استفاده کنید.
  • برای کتابخانه‌هایی که استفاده می‌کنید تعاریفی اضافه کنید

بیایید با جزئیات بیشتری به بررسی این موارد بپردازیم.

اضافه کردن TypeScript به یک پروژه

همۀ آن با یک دستور در ترمینال اجرا می‌شود.

اگر از Yarn استفاده می‌کنید، این را اجرا کنید:

yarn add --dev typescript

اگر از npm استفاده می‌کنید، این را اجرا کنید:

npm install --save-dev typescript

تبریک می‌گوییم. اکنون شما آخرین نسخه از TypeScript را در پروژۀ خود نصب کردید. نصب TypeScript دسترسی به دستور tsc را برایمان فراهم می‌کند. قبل از تنظیمات، بیایید tsc را به بخش scripts از package.json اضافه کنیم:

{
  // ...
  "scripts": {
    "build": "tsc",
    // ...
  },
  // ...
}

تنظیم کامپایلر TypeScript

کامپایلر تا زمانی که به آن نگوییم چه کاری انجام دهد، هیچ فایده‌ای برایمان نخواهد داشت. در TypeScript این قواعد در یک فایل مخصوصی به نام tsconfig.json تعریف می‌شوند. برای ساخت این فایل دستور زیر را اجرا کنید:

tsc --init

با نگاهی به tsconfig.json ساخته شده، می‌توانید ببینید که گزینه‌های زیادی برای تنظیم کامپایلر در اختیار دارید. جهت مشاهدۀ توضیح تمام گزینه‌ها این قسمت را ببینید.

از بین آن گزینه‌ها، ما rootDir و outDir را توضیح خواهیم داد. در حالت واقعی، کامپایلر فایل‌های TypeScript را می‌گیرد و فایل‌های جاوا اسکریپت را تولید می‌کند. هرچند ما نمی‌خواهیم بین فایل‌های مرجع و فایل‌های تولید شدۀ خروجی گیج شویم.

این گزینه را در دو گام توضیح می‌دهیم:

  • در ابتدا، بیایید ساختار پروژه را به این صورت دربیاوریم. ما تمام کدهای مرجع خود را در مسیر src قرار می‌دهیم.
├── package.json
├── src
│   └── index.ts
└── tsconfig.json
  • سپس به کامپایلر می‌گوییم که کد مرجع ما کجاست و خروجی‌ها باید به کجا بروند.
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",
    "outDir": "build"
    // ...
  },
}

بسیار عالی. اکنون وقتی اسکریپت ساخته شدۀ خود را اجرا کنیم، کامپایلر، جاوا اسکریپت تولید شده را به فولدر build می‌فرستد. TypeScript React Starter برای شما tsconfig.json را به همراه مجموعه‌ای از قواعد آماده کرده است تا شما را به راه بیاندازد.

به طور کلی شما نمی‌خواهید جاوا اسکریپت تولید شده را در کنترل مرجع خود نگه دارید، لذا مطمئن شوید که فولدر ساخته شده را به .gitignore اضافه کنید.

افزونۀ فایل‌ها

در React به احتمال زیاد شما کامپوننت‌ها را در یک فایل .js می‌نویسید. در TypeScript ما دو افزونۀ فایل داریم:

افزونۀ فایل پیش‌فرض .ts بوده و .tsx یک افزونۀ خاص برای فایل‌هایی که شامل JSX می‌باشند است.

اجرای TypeScript

اگر گام‌های بالا را طی کرده‌اید، خواهید توانست برای اولین بار TypeScript را اجرا کنید.

yarn build

اگر از npm استفاده می‌کنید، این را اجرا کنید:

npm run build

اگر هیچ خروجی نمی‌بینید، یعنی به درستی مراحل را طی کرده‌اید.

تایپ تعاریف

کامپایلر برای اینکه بتواند ارورها و تذکرات را از پکیج‌های دیگر نشان دهد، بر فایل‌های تعریف کننده اتکا می‌کند. یک فایل تعریف کننده، تمام اطلاعات مربوط به نوع کتابخانه را فراهم می‌کند. این کار به ما اجازه می‌دهد از کتابخانه‌های جاوا اسکریپت مانند آنهایی که در npm هستند در پروژه خودمان استفاده کنیم.

دو راه اصلی برای دستیابی به تعاریف یک کتابخانه وجود دارد:

راه Bundled: کتابخانه فایل تعریف خود را بسته بندی (bundle) می‌کند. این برای ما عالی است زیرا تمام چیزی که نیاز داریم نصب کتابخانه است و سپس می‌توانیم به درستی از آن استفاده کنیم. برای بررسی اینکه آیا یک کتابخانه بسته بندی‌ها را دارد، دنبال یک فایل index.d.ts در پروژه باشید. برخی کتابخانه‌ها آن را به طور مشخص در package.json خود در قسمت typings یا types دارند.

راه DefinitelyTyped: DefinitelyTyped انباری از تعاریف برای کتابخانه‌هایی است که یک فایل بسته بندی شدۀ تعریف ندارند. این تعاریف توسط مایکروسافت جمع‌آوری و مدیریت می‌شوند و open source هستند. برای مثال React فایل تعریف خود را بسته بندی نمی‌کند. در عوض می‌توانیم آن را از DefinitelyTyped بدست آوریم. برای انجام این کار، دستور زیر را در ترمینال وارد کنید.

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

راه تعاریف محلی: گاهی اوقات پکیجی که می‌خواهید از آن استفاده کنید، نه خودش تعریفش را بسته بندی کرده و نه در DefinitelyTyped موجود است. در این حالت می‌توانیم یک فایل تعریف محلی (local declaration file) داشته باشیم. برای انجام این کار، یک فایل declarations.d.ts در ریشۀ مسیر مرجع خود بسازید. یک تعریف ساده می‌تواند به صورت زیر باشد:

declare module 'querystring' {
  export function stringify(val: object): string
  export function parse(val: string): object
}

استفاده از TypeScript با Create React App

Create React App به طور حاضر و آماده از TypeScript پشتیبانی می‌کند. می‌توانید به صورت زیر از آن استفاده کنید:

create-react-app my-app --typescript

اگر یک پروژۀ موجو دارید، می‌توانید مستندات مربوط به اضافه کردن TypeScript را مطالعه کنید.

همچنین می‌توانید typescript-react-starter را امتحان کنید.

اکنون شما آمادۀ کدنویسی هستید. . توصیه می‌کنیم منابع زیر را جهت کسب اطلاعات بیشتر در مورد TypeScript بررسی کنید:

Reason

Reason یک زبان جدید نیست؛ یک سینتکس و زنجیره‌ابزار جدید است که توسط زبان OCaml طراحی شده است. Reason به OCaml یک سینتکس آشنا می‌دهد که متمایل به برنامه نویسان جاوا اسکریپت است و NPM/Yarn آذوقه می‌رساند.

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

Kotlin

Kotlin یک زبان از نوع استاتیک توسعه شده توسط JetBrains است. پلتفرم هدف آن شامل JVM، اندروید، LLVM و جاوا اسکریپت می‌شود.

JetBrains چندین ابزار را به طور اختصاصی برای اجتماعات React توسعه داده و نگهداری می‌کند: React binding و Create React Kotlin App. مورد آخر به شما در شروع ساخت برنامه‌های React با Kotlin بدون نیاز به هیچ تنظیمی هنگام ساخت کمک می‌کند.

زبان‌های دیگر

دقت کنید که زبان‌های از نوع استاتیک دیگری هم وجود دارند که با جاوا اسکریپت کامپایل بوده و در نتیجه سازگار با React می‌باشند. برای مثال , F#/Fable با elmish-react. جهت کسب اطلاعات بیشتر می‌توانید به سایت آنها مراجعه کنید.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4٫50 out of 5)
Loading...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

counter customizable free hit