Is PropTypes become obsolete in Typescript React? [duplicate]

Question

I'm recently migrate to Typescript-react from javascript-based react. So this is new for me.

I notice that Typescript has its own props validation method using interface. My questions are:

1. Does PropTypes (from prop-types package) still necessary to be used ?
2. How to make "isRequired" for a prop? I want to make it error if a prop doesn't defined.
3. How to make a default value for a prop? I want to use that default value if a prop wasn't defined.

Here is my simple code. This code below works:

import * as React from "react";

// [Question 1] Create an object PropTypes, is this still necessary ?
import * as PropTypes from "prop-types";

// [Question 2] how to use isRequired for this prop ?
interface Props {
  text: String;
  active: Boolean;
}

const NavBarMenu = (props: Props) => {
  // [Question 3] How to make a default value for prop?
  return (
    <li className="nav-item">
      <a className={props.active ? "nav-link active" : "nav-link"} data-toggle="tab" href="#" role="tab">
        {props.text}
      </a>
    </li>
  );
};

NavBarMenu.propTypes = {
  text: PropTypes.string.isRequired,
  active: PropTypes.bool
};

export default NavBarMenu;

Answer 1

1. Does PropTypes (from prop-types package) still necessary to be used ?

Mostly no. If the props passed are not of the correct type, TypeScript will throw a compilation error. (which is better because PropTypes throws a runtime error, when statically typed like in TS you can't even run the code since it isn't compiled. So basically you can't push to production, hence no bugs. That's the whole point of using a statically-typed language)

2. How to make "isRequired" for a prop? I want to make it error if a prop doesn't defined.

Properties are by default required when written in interfaces (make sure you have strict: true in tsconfig). You want active to be optional right? So the interface would look like following:

interface Props {
  text: string;
  active?: boolean;
}

(use string instead String same for all other primitive types, string and String are not same)

3. How to make a default value for a prop? I want to use that default value if a prop wasn't defined.

In case of a functional component, it won't be different than how you define default values for parameters in any other normal function. Example:

const NavBarMenu = ({ text, active = false }: Props) => { ... }

Also TypeScript is not a full replacement for PropTypes, in most cases TS will be sufficient (and better).

Answer 2

Typescript

• Typescript validates the types at the time of compilation.
• Typescript types can be more complex due to generic types provided by Typescript
• Useful when you are sure that type of the data you are supplying to the component's props will not be changed
• To set default value you can use static defaultProps = {...props} on the component class

PropTypes

• React check the ProTypes at the runtime
• Does not support generic type checking
• Useful when your component needs strict type checking at the runtime, such as data from ajax request where you can't be sure about the type of the data.

Answer 3

If you are using TypeScript in your project you don't need PropTypes package, you achieve the same with only using interfaces.

You can define required/not required prop with the interface, for example:

interface MyProp {
 text: String; // This value is required
 active?: Boolean; // By adding ? the value becomes optional
}

In order to make a prop having a default value, you can do that with spreading the prop value on the component, something like:

const NavBarMenu = ({text, active = false}: Props) => {
  // the value of active will default for false
  return (
    <li className="nav-item">
      <a className={active ? "nav-link active" : "nav-link"} data-toggle="tab" href="#" role="tab">
        {text}
      </a>
    </li>
  );
};