TypeScript React中PropTypes是否必要？isRequired与默认props疑问

Hey there! Making the jump from JavaScript React to TypeScript React can feel a bit overwhelming at first, but your questions are spot-on—let’s walk through each one step by step:

1. Do I still need the prop-types package? #

Short answer: No, you don’t need it in a pure TypeScript React project.

TypeScript’s type system (like your Props interface) handles compile-time checking, which catches missing or incorrectly typed props before your code even runs. prop-types only validates props at runtime, which becomes redundant when you’re already leveraging TS’s strict type checks.

That said, if you’re working in a mixed codebase with both JS and TS components, or if your component will be used by JavaScript consumers who won’t benefit from TS’s compile-time safety, you could keep prop-types around for extra runtime guardrails. But for most pure TS projects, you can safely uninstall prop-types and remove those imports/declarations entirely.

2. How to get the isRequired behavior for props? #

In TypeScript, all properties in an interface are required by default—that’s exactly the isRequired behavior you’re used to from prop-types!

If you want a prop to be optional, just add a ? after its name. For example, if you wanted active to be optional, your interface would look like this:

interface Props {
  text: string; // Required (matches PropTypes.string.isRequired)
  active?: boolean; // Optional (matches PropTypes.bool without isRequired)
}

If someone tries to use your NavBarMenu component without passing the required text prop, TypeScript will throw a compile-time error—no need to wait for runtime to catch the mistake.

(Quick side note: Use lowercase string/boolean in TS interfaces, not uppercase String/Boolean—those refer to wrapper objects and are almost never what you want in React components.)

3. How to set default values for props? #

There are two clean, idiomatic ways to do this in TS React function components:

Option 1: Destructure props with inline default values #

This is the most common and recommended approach for modern function components:

const NavBarMenu = ({ text, active = false }: Props) => {
  // ... your component logic
};

Here, if active isn’t passed to the component, it will automatically default to false. Just make sure the prop is marked as optional (with ?) in your interface if you want to allow omitting it.

Option 2: Use defaultProps (less common now) #

You can still use the classic defaultProps syntax, but it’s not as inline with modern React practices:

NavBarMenu.defaultProps = {
  active: false,
};

Stick with the destructuring approach for cleaner, more readable code.

Full Modified Component Code #

Here’s how your NavBarMenu looks with all these changes applied:

import * as React from "react";

interface Props {
  text: string; // Required prop
  active?: boolean; // Optional prop with default value
}

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

export default NavBarMenu;

内容的提问来源于stack exchange，提问作者DennyHiu