Type Checking

ScandiPWA uses PropTypes to help verify that the expected props are passed, and catch bugs

PropTypes is a library for React that verifies at runtime if props have the correct type, and if required props are passed.

PropTypes are declared as a static field:

component/CategoryPaginationLink/CategoryPaginationLink.component.js (annotated excerpt)
import { ChildrenType } from 'Type/Common';

export class CategoryPaginationLink extends PureComponent {
    static propTypes = {
        // component children are treated as props in React
        // by leaving out .isRequired, we make them optional
        children: ChildrenType,
        // we expect the getPage prop to be a function
        // it is required, so this will emit a warning if
        // getPage is not provided
        getPage: PropTypes.func.isRequired,
        // isCurrent expects a boolean
        isCurrent: PropTypes.bool.isRequired,
        // expects a string
        url_path: PropTypes.string.isRequired,
        // expects a number
        pageNumber: PropTypes.number.isRequired
    };
    
    static defaultProps = {
        // we must provide a default value for every prop that
        // is optionalex
        children: []
    };

Advanced Types

Sometimes you want to specify that a prop expects something more complex than a number or a string. You can check the official documentation to learn how to use:

  • instanceOf to expect an instance of a class

  • oneOf to expect an enum-like value that can have one of the specified values

  • oneOfType to indicate that this prop may have one of the specified types

  • arrayOf or objectOf to specify that this prop is an array or object where each value has the specified type

  • shape or exact to specify that the prop should be an object, as well as what keys and values you expect it to have

For example, you could specify that a prop expecting a payment method should be given an object with two string properties:

PropTypes.shape({
    code: PropTypes.string,
    title: PropTypes.string
});

However, it is likely that this "complex" type would be needed in multiple places in the application. Copy-pasting the same PropType definition would lead to code duplication, and a hard-to-maintain codebase. Instead, we prefer defining these types in the type directory and exporting them for re-use:

type/Checkout.js (excerpt)
import PropTypes from 'prop-types';

export const paymentMethodType = PropTypes.shape({
    code: PropTypes.string,
    title: PropTypes.string
});

Now, we can use this type definition anywhere we want:

component/CheckoutPayment/CheckoutPayment.component.js (excerpt)
import { paymentMethodType } from 'Type/Checkout';

/** @namespace Component/CheckoutPayment/Component */
export class CheckoutPayment extends PureComponent {
    static propTypes = {
        method: paymentMethodType.isRequired,
        onClick: PropTypes.func.isRequired,
        isSelected: PropTypes.bool
    };

Last updated

Was this helpful?