What is Type Checking?

Richard Petrov
Sep 22 · 2 min read
Type checking with react native using react prop types.
Type checking with react native using react prop types.

Type checking is the process of verifying data types either at runtime (dynamically) or compile-time (static). It’s to make sure the program will execute successfully.

Static Type checking is when the type of the variable is known at compile-time. This means that some languages require variables to be initialized with a data type.

Static Type Languages:

  • C
  • C++
  • C#
  • Java

It’s much easier to catch errors sooner, because your program won’t be able to compile.

Dynamic Type checking is when the type of the variable is known at runtime.

Dynamic Type Languages:

  • Javascript
  • Python
  • Ruby
  • Lua

Errors are found at runtime, meaning your program will compile but it may not execute properly.

What are React PropTypes?

In React Native you can do type checking by using PropTypes. You use them by assigning a data type to props that are being passed into components.

An example of using PropTypes:

import * as React from ‘react’;
import { Text, View } from ‘react-native’;
import PropTypes from ‘prop-types’;

export default class HelloWorld extends React.Component {
render() {
return (
<View>
<Text>
{this.props.helloWorld}
</Text>
</View>
);
}
}

HelloWorld.propTypes = {
helloWorld: PropTypes.string,
}

The HelloWorld PropType is set to string. If a wrong prop is passed into the component it will give an error or warning stating so.

How can I use them?

First step is to install the prop-types package provided by React.

npm install — save prop-types

OR

yarn add prop-types

Once the package has been added to your project we can import PropTypes into your component .js file. At the top of the file import prop-types like shown below.

import { PropTypes } from ‘prop-types’;

Now it’s time to add PropTypes to your component.

ComponentName.propTypes = { 
propName: PropTypes, // Just a template
name: PropTypes.string, // String PropType
age: PropTypes.number, // Number
isWorking: PropTypes.bool // Boolean
}

That’s pretty much all there is to it. There are a ton more PropTypes you can use that I did not list, but the official React docs have them.

Conclusion

Prop Types can come in handy to prevent a wrong data type being passed in as prop. I can’t count the number of times I’ve passed in an Object when the it should have been an array or vice versa. Add PropTypes will help figure out those mistakes quicker and earlier on.

JavaScript in Plain English

Learn the web's most important programming language.

Richard Petrov

Written by

Mobile Engineer, React Native & iOS

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade