PropTypes are used in React components to specify type information etc. If (as I am) you’re using TypeScript then for the most part such type extra information is not really required as we get a similar functionality via TypeScript interfaces. However, you’ll see these used a lot in JSX files where. not only can you define the expected types, but also the expected values.<\/p>\n
To install<\/p>\n
\r\nyarn add prop-types\r\n<\/pre>\nPropTypes are only available in development mode<\/em> which makes sense for the most part, so you would still need runtime checking on values supplied by the end user or the likes.<\/p>\n
The usual way to write our propTypes in a JSX file is like this<\/p>\n
\r\nimport React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nclass Company extends React.Component {\r\n render() {\r\n return <div> \r\n <h1>{this.props.name}<\/h1>\r\n {this.props.country ? <p>Country: {this.props.country}<\/p> : null}\r\n {this.props.size ? <p>Size: {this.props.size}<\/p> : null}\r\n <\/div>; \r\n }\r\n}\r\n\r\nCompany.propTypes = {\r\n name: PropTypes.string,\r\n country: PropTypes.string,\r\n size: PropTypes.oneOf(['small', 'medium', 'large']),\r\n};\r\n\r\nexport default Company;\r\n<\/pre>\nIf we now change App.tsx to just have this<\/p>\n
\r\nconst App: React.FC = () => {\r\n return (\r\n <Company name="My Company" size="mega" \/>\r\n );\r\n}\r\n<\/pre>\nYou’ll find this runs but an error log in your preferred browser debug tools will show that “maga” is not a valid option, because obviously it wasn’t oneOf the supplied options.<\/p>\n
Let’s now change the Company.jsx file to a .tsx extension.<\/p>\n
This will fail to transpile with an error such as “Type ‘{ name: string; size: string; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes
& Readonly<{}> & Readonly<{ children?: ReactNode; }>‘.”<\/p>\n Instead, we can use interfaces within TypeScript to handle the type checking at transpile time, hence this code gives us a similar set of function to the JSX version<\/p>\n
\r\ntype Size = 'small' | 'medium' | 'large';\r\n\r\ninterface CompanyProps {\r\n name?: string,\r\n country?: string,\r\n size?: Size\r\n}\r\n\r\nclass Company extends React.Component<CompanyProps> {\r\n\r\n render() {\r\n return <div> \r\n <h1>{this.props.name}<\/h1>\r\n {this.props.country ? <p>Country: {this.props.country}<\/p> : null}\r\n {this.props.size ? <p>Size: {this.props.size}<\/p> : null}\r\n <\/div>; \r\n }\r\n}\r\n<\/pre>\nReferences<\/strong><\/p>\n
prop-types<\/a>
\nts-proptypes-transformer<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"PropTypes are used in React components to specify type information etc. If (as I am) you’re using TypeScript then for the most part such type extra information is not really required as we get a similar functionality via TypeScript interfaces. However, you’ll see these used a lot in JSX files where. not only can you […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243],"tags":[],"class_list":["post-7297","post","type-post","status-publish","format-standard","hentry","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7297"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7297\/revisions"}],"predecessor-version":[{"id":7358,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7297\/revisions\/7358"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}