Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

#Reactjs - PropTypes type checking

It is good to use proptype type checking in development to reduce type errors and bugs.

React PropTypes
React PropTypes

Loosely typed JavaScript

JavaScript is a loosely-typed language as you don't have to define the type of the variable or constant when you declare them whereas a strongly-typed language requires you to do so such as Java.


Java - strongly typed
int count = 0;

JavaScript - loosely typed
var count = 0;
let count = 0; 

To introduce type to JavaScript, you can use PropType, Flow or TypeScript together with Reactjs.

How to install


npm install --save prop-types

OR

yarn add prop-types

Type checking using PropType

For example, the NavHeader shrink prop was supposed to be a function but a boolean type was supplied by the parent element. That creates an error in the console. It is not on the terminal. 


import PropTypes from 'prop-types';

class NavHeader extends Component {
  render() {
    return (
      <NavContainer>
        <HamBurger shrink={this.props.shrink}/>
      </NavContainer>
    );
  }
}

NavHeader.propTypes = {
  shrink: PropTypes.func,
}

Console will show erros
Proptype error
Reactjs Proptype error

Alternatively, it is recommended to use static type checking via Flow or TypeScript for larger projects.

Check out Reactjs static type checking documentation on how to include Flow or TypeScript.

Thank you for reading!

Jun