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

یکی از محبوب‌ترین پکیج‌ها برای چک کردن تایپ prop ها، پکیج prop-types هستش. توی این مقاله میخوایم یاد بگیریم که چطور باید از 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 استفاده کنید. بولین ها: isOpen - hasValue - canExecuteتوابع: - onCustomEventName - handleCustomEventNameآرایه ها: از جمع استفاده کنید// Bad loading // Good isLoading // Bad addProduct // Good handleAddProduct // Bad list // Good itemsحتما کامنت بنویسید. چرا؟ به دو دلیل:ممکنه یک برنامه نویسی قراره کد شما رو توسعه بده. وقتی بدونه که این پراپ چه تایپی یا تایپ هایی رو میتونه قبول کنه خیلی سریع تر میتونه فرایند توسعه رو انجام بده.بعدا هم میتونید خیلی راحت برای کدتون با استفاده از نوشتن کامنت، داکیومنت درست کنید. با استفاده از ابزارهایی مانند 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, }