Type Checking In React Props: PropTypes and TypeScript

Type Checking In Props

Type checking in React props is a practice that involves specifying the expected data types for the props that a component receives.

This helps ensure that the data passed to a component is of the correct type, which can prevent runtime errors and improve code reliability.

There are two common ways to perform type checking for React props. PropTypes and TypeScript

1. PropTypes

PropTypes is a package that provides a way to define the expected types for props in your components. It's typically used in JavaScript-based React projects.

First, you need to install the PropTypes package if it's not already installed and the use it in your components.

npm install prop-types

Here's a table summarizing various PropTypes validators in React, along with their descriptions:

S.No	PropType	Description
1	PropTypes.string	A string value.
2	PropTypes.number	A number value.
3	PropTypes.bool	A boolean value.
4	PropTypes.array	An array value.
5	PropTypes.object	An object value.
6	PropTypes.func	A function value.
7	PropTypes.node	Any renderable content: numbers, strings, elements, or an array/fragment containing these types.
8	PropTypes.element	A React element.
9	PropTypes.instanceOf	An instance of a specific class.
10	PropTypes.oneOf	A value that is one of a specific set of values.
11	PropTypes.oneOfType	A value that is one of a specific set of types.
12	PropTypes.arrayOf	An array of values of a specific type.
13	PropTypes.objectOf	An object with property values of a specific type.
14	PropTypes.shape	An object with a specific shape.

Here's an example demonstrating a parent and child functional component, with the child component accepting various prop types

import PropTypes from "prop-types";

const ChildComponent = (props) => {
  return (
    <div>
      {props.header}
      <p>{props.text}</p>
      <p>Number: {props.number}</p>
      <p>Status: {props.isActive ? "Active" : "Inactive"}</p>
      <ul>
        {props.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <p>User: {props.user.name}</p>
      <button onClick={props.onClick}>Click Me</button>
      <div>{props.content}</div>
      <p>Date: {props.date.toString()}</p>
      <p>Status: {props.status}</p>
      <p>ID or Name: {props.idOrName}</p>
      <ul>
        {props.numberArray.map((num, index) => (
          <li key={index}>{num}</li>
        ))}
      </ul>
      <ul>
        {Object.entries(props.stringObject).map(([key, value]) => (
          <li key={key}>
            {key}: {value}
          </li>
        ))}
      </ul>
      <p>
        Config - Host: {props.config.host}, Port: {props.config.port}
      </p>
    </div>
  );
};

ChildComponent.propTypes = {
  text: PropTypes.string.isRequired, // text="Hello, World!"
  number: PropTypes.number.isRequired, // number={42}
  isActive: PropTypes.bool.isRequired, // isActive={true}
  items: PropTypes.array.isRequired, // items={["Item 1", "Item 2", "Item 3"]}
  user: PropTypes.object.isRequired, //  user={{ name: "John Doe" }}
  onClick: PropTypes.func.isRequired, // onClick={handleClick}
  content: PropTypes.node.isRequired, // content={<span>This is a React node.</span>}
  header: PropTypes.element.isRequired, // header={<MyCustomElement />}
  date: PropTypes.instanceOf(Date).isRequired, // date={new Date()}
  status: PropTypes.oneOf(["pending", "completed", "failed"]).isRequired, // status="pending"
  idOrName: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, // idOrName={123}
  numberArray: PropTypes.arrayOf(PropTypes.number).isRequired, // numberArray={[1, 2, 3]}
  stringObject: PropTypes.objectOf(PropTypes.string).isRequired, // stringObject={{ key1: "value1", key2: "value2" }}
  config: PropTypes.shape({
    // config={{ host: "localhost", port: 8080 }}
    host: PropTypes.string.isRequired,
    port: PropTypes.number.isRequired,
  }).isRequired,
};

2. TypeScript

TypeScript is a statically typed programming language developed by Microsoft. It's designed to help developers catch errors early and improve code maintainability, thus making it a great fit for large and complex applications.

With TypeScript, your IDE can provide more accurate code completion suggestions, making development faster and more efficient.

How to Use TypeScript with React

Install the Required Packages: You'll need to install typescript, @types/react, and @types/react-dom using npm or yarn.
Create a tsconfig.json File: This file contains the configuration settings for the TypeScript compiler.
Rename Your JavaScript Files to .tsx: This tells TypeScript to compile these files.
Use TypeScript Type Annotations: Add type annotations to your React components, functions, and variables to take advantage of TypeScript's type checking.

Example of React Component in TypeScript:

import React from "react";

type User = {
  name: string, // name="John Doe"
  age: number, // age={30}
};

type ButtonProps = {
  label: string, // label="Click Me"
  onClick: () => void, // onClick={() => console.log('Button clicked')}
};

type MyComponentProps = {
  title: string, // title="Hello"
  count: number, // count={10}
  isActive: boolean, // isActive={true}
  items: string[], // items={['Item 1', 'Item 2']}
  user: User, // user={{ name: 'John Doe', age: 30 }}
  onButtonClick: ButtonProps["onClick"], // onButtonClick={() => console.log('Button clicked')}
  children: React.ReactNode, // children={<p>Some content</p>}
  icon: React.ReactElement, // icon={<SomeIcon />}
  date: Date, // date={new Date()}
  status: "pending" | "completed" | "failed", // status="pending"
  idOrName: string | number, // idOrName={123} or idOrName="abc"
  numberArray: number[], // numberArray={[1, 2, 3]}
  stringObject: { [key: string]: string }, // stringObject={{ key1: 'value1', key2: 'value2' }}
  config: {
    host: string, // host="localhost"
    port: number, // port={8080}
  }, // config={{ host: 'localhost', port: 8080 }}
};

const MyComponent: React.FC<MyComponentProps> = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>Count: {props.count}</p>
      <p>Status: {props.isActive ? "Active" : "Inactive"}</p>
      <ul>
        {props.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <p>
        User: {props.user.name}, Age: {props.user.age}
      </p>
      <button onClick={props.onButtonClick}>Click Me</button>
      <div>{props.children}</div>
      {props.icon}
      <p>Date: {props.date.toString()}</p>
      <p>Status: {props.status}</p>
      <p>ID or Name: {props.idOrName}</p>
      <ul>
        {props.numberArray.map((num, index) => (
          <li key={index}>{num}</li>
        ))}
      </ul>
      <ul>
        {Object.entries(props.stringObject).map(([key, value]) => (
          <li key={key}>
            {key}: {value}
          </li>
        ))}
      </ul>
      <p>
        Config - Host: {props.config.host}, Port: {props.config.port}
      </p>
    </div>
  );
};

Type Checking In Props​

1. PropTypes​

2. TypeScript​

How to Use TypeScript with React​

Example of React Component in TypeScript:​

Type Checking In Props

1. PropTypes

2. TypeScript

How to Use TypeScript with React

Example of React Component in TypeScript: