آموزش استفاده از prop-types

یکی از محبوب‌ترین پکیج‌ها برای چک کردن تایپ prop ها، پکیج prop-types هستش. توی این مقاله میخوایم یاد بگیریم که چطور باید از prop-types استفاده کنیم و در مورد یک سری نکات مهم هم صحبت کنیم.

نحوه استفاده از prop-types

در مرحله اول باید پکیج prop-types رو نصب کنیم. بهتره توی حالت devDependencies نصب کنید چون قراره فقط توی حالت توسعه استفاده بشه.

# using npm
npm install prop-types --save-dev

# using yarn
yarn add prop-types --dev

نحوه استفاده از پکیج prop-types به این شکله که اول از هم باید اون رو توی کامپوننت مد نظر ایمپورت کنیم. بعد از اون مقدار propTypes کامپوننت رو تعریف میکنیم و در نهایت تایپ همه prop ها رو ست میکنیم.

import PropTypes from 'prop-types'

function MyComponent(props) {}

MyComponent.propTypes = {
  optionalFunc: PropTypes.func,
  optionalString: PropTypes.string,
  requiredFunc: PropTypes.func.isRequired,
  requiredString: PropTypes.string.isRequired,
}

انواع دیتا تایپ‌ها

پکیج prop-types از تمامی تایپ‌های اصلی جاوااسکریپت پشتیبانی میکنه.

MyComponent.propTypes = {
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
}

زمانی که دارید یک المنت ری اکت به عنوان پراپ دریافت میکنید باید از این نوع استفاده کنید.

MyComponent.propTypes = {
  // A React element (ie. <MyComponent />)
  optionalElement: PropTypes.element,
}

اگر مقدار پراپ یکی از این دیتا تایپ ها باشه میتونید از node استفاده کنید.

MyComponent.propTypes = {
  // Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types
  optionalNode: PropTypes.node,
}

یکی از بهترین قابلیت‌های prop-types، استفاده از enum ها هستش. یعنی زمان مقدار دهی فقط میتونید این مقادیر تعریف شده رو بدید.

MyComponent.propTypes = {
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
}

بعضی مواقع پیش میاد که یک پراپ از چند دیتا تایپ باشه. مثلا یا string باشه یا number.

MyComponent.propTypes = {
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
}

زمانی که نیازه یک پراپ حتما مقدار دهی بشی باید از isRequired استفاده کنیم. یعنی حتما باید این پراپ رو وارد کنه.

MyComponent.propTypes = {
  requiredFunc: PropTypes.func.isRequired,
}

نکات مهم در مورد prop ها

اسم های کوتاه و با معنی انتخاب کنید.

// Bad
longAssPropNameThatEveryoneMustTypeForever

// Good
propName

از اسم هایی استفاده کنید که توی dom هم داره استفاده میشه.

// Bad
classes
// Good
className

// Bad
whenClicked
// Good

از استاندارد camelCase استفاده کنید.

1. بولین ها: isOpen - hasValue - canExecute
2. توابع: - onCustomEventName - handleCustomEventName
3. آرایه ها: از جمع استفاده کنید

// Bad
loading
// Good
isLoading

// Bad
addProduct
// Good
handleAddProduct

// Bad
list
// Good
items

حتما کامنت بنویسید. چرا؟ به دو دلیل:

1. ممکنه یک برنامه نویسی قراره کد شما رو توسعه بده. وقتی بدونه که این پراپ چه تایپی یا تایپ هایی رو میتونه قبول کنه خیلی سریع تر میتونه فرایند توسعه رو انجام بده.
2. بعدا هم میتونید خیلی راحت برای کدتون با استفاده از نوشتن کامنت، داکیومنت درست کنید. با استفاده از ابزارهایی مانند react-docgen

یک مثال تمیز

بیایم یک مثال تمیز از کامپوننتی که با prop-types توسعه داده شده رو ببینیم.

import PropTypes from 'prop-types'

export default function MyComponent(props) {
  const handleOnClick = event => {
    props. && props.(event)
  }

  return (
    <div ={handleOnClick}>
      Wow nice component dude!
      {/* Do other stuff */}
    </div>
  )
}

MyComponent.propTypes = {
  /** @type {object} This is the profile data containing user data */
  profileData: PropTypes.object,

  /** @type {boolean} If true, the component should be in a loading state */
  isLoading: PropTypes.bool,

  /** @type {array} Items being passed in as an array */
  items: PropTypes.array,

  /** @type {function} Function triggered when component is clicked */
  : PropTypes.func,
}