能否使用prop-types对常规Object、Function参数及返回值进行类型检查？

Absolutely! While PropTypes was originally built for validating React component props, its core validation logic can be repurposed to check plain JavaScript objects, function arguments, and return values. Let's break down how to do each:

1. Validating plain Object instances #

You can define a shape for your object using PropTypes' built-in validators, then use PropTypes.checkPropTypes to validate any object against that shape. This works exactly like validating React props, but you'll pass a custom context name for clearer error messages.

Example:

import PropTypes from 'prop-types';

// Define the expected shape of our user object
const UserShape = PropTypes.shape({
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  email: PropTypes.string // Optional field
});

// The object we want to check
const testUser = { id: 1, name: 'Alice' };

// Run the validation
PropTypes.checkPropTypes(
  { user: UserShape }, // The prop type definitions (wrapped in an object)
  { user: testUser }, // The values to validate
  'prop', // The type of value being validated (we can use 'prop' here)
  'PlainObjectValidation' // Context name for error messages
);

In development mode, this will log a warning to the console if testUser doesn't match the shape. In production, checkPropTypes is stripped away to avoid performance overhead.

2. Validating function parameters #

There's no built-in PropTypes method for function args directly, but you can create a helper function that wraps your arguments in an object and uses checkPropTypes to validate them.

Example:

import PropTypes from 'prop-types';

// Helper to validate greetUser's arguments
function validateGreetArgs(args) {
  const argTypes = {
    firstName: PropTypes.string.isRequired,
    age: PropTypes.number // Optional
  };
  // Convert args array to an object for PropTypes
  const argsObj = { firstName: args[0], age: args[1] };
  
  PropTypes.checkPropTypes(
    argTypes,
    argsObj,
    'argument', // Label for error messages (clears up what we're validating)
    'GreetUserFunction'
  );
}

// Our target function with parameter validation
function greetUser(firstName, age) {
  // Validate arguments first
  validateGreetArgs([firstName, age]);
  
  // Rest of the function logic
  return `Hello ${firstName}, you're ${age || 'unknown'} years old!`;
}

// Test with invalid args (logs a warning in dev mode)
greetUser(25, 'thirty'); 
// Warning: Failed argument type: Invalid argument `firstName` of type `number` supplied to `GreetUserFunction`, expected `string`.

3. Validating function return values #

To check a function's return value, you can use the individual PropTypes validator functions directly (instead of checkPropTypes). Each validator is a function that returns an error message if the value is invalid.

Example:

import PropTypes from 'prop-types';

// Helper to validate greetUser's return value
function validateGreetReturn(value) {
  const returnType = PropTypes.string.isRequired;
  
  // Call the validator function directly (the last argument is a required internal flag)
  const error = returnType(
    { returnValue: value },
    'returnValue',
    'GreetUserFunction',
    'prop',
    null,
    'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'
  );
  
  if (error) {
    console.error(error);
  }
}

// Updated greetUser with return value validation
function greetUser(firstName, age) {
  validateGreetArgs([firstName, age]);
  const result = `Hello ${firstName}, you're ${age || 'unknown'} years old!`;
  
  validateGreetReturn(result);
  return result;
}

// Test with invalid return value (logs an error in dev mode)
function badGreetUser(firstName) {
  const result = 123; // Oops, returned a number instead of string
  validateGreetReturn(result);
  return result;
}

badGreetUser('Bob');
// Error: Invalid returnValue of type `number` supplied to `GreetUserFunction`, expected `string`.

Important Notes #

• Development-only tool: PropTypes is meant for catching issues during development. In production, all PropTypes code is removed, so it won't act as a runtime safety net. For runtime validation, consider libraries like io-ts or Zod.
• Not a replacement for static typing: If you're working on a large project, TypeScript is a better choice—it provides static type checking at compile time, covers more cases, and integrates with your IDE for real-time feedback.
• API quirks: When calling validators directly (for return values), you need to pass that long, weird final string argument—it's an internal flag PropTypes uses to prevent misuse.

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