jsdoc替代propTypes

Question

为什么将propTypes注释掉之后会报错：

我在上述已经书写了jsdoc：

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在React组件Any中移除了PropTypes验证，但是JSDoc并没有提供足够的信息来替代这些验证。PropTypes是React库中的一个工具，用于在运行时检查组件接收到的prop是否符合预期的类型。而JSDoc主要用于文档生成和静态分析工具，它并不会在运行时执行任何类型的检查。

为了尽可能地接近PropTypes的功能，你可以使用TypeScript来编写这个组件。TypeScript是一种静态类型检查语言，可以在编译阶段捕获类型错误，确保传入的prop符合预期的类型。如果你的项目不支持TypeScript，那么只能通过其他方式（如手动检查）来确保prop的正确性，但这通常不是最佳实践，因为这不会在编译阶段提供错误提示。

这里是一个使用TypeScript重新实现的版本：

import React from 'react';

interface Props {
  matched?: {
    disabled?: boolean;
    accept?: string;
    ratio?: number;
  };
  type: string;
  val: any;
  modify: (value: any) => void;
  exception?: () => void;
  keypath?: string[];
  options?: object;
  valwidth?: number;
  keywidth?: number;
  key: string;
  order?: number;
}

const Any: React.FC<Props> = ({
  matched,
  type,
  val,
  modify,
  exception,
  keypath = [],
  options = {},
  valwidth = 300,
  keywidth = 120,
  key,
  order = 0,
}) => {
  // Your component logic here
};

export default Any;

在这个例子中，我们创建了一个名为Props的接口来定义组件接收的prop类型。然后，我们将Any组件声明为一个接受此类 prop 的函数组件React.FC<Props>。这样，TypeScript会在编译阶段检查传入的prop是否满足这些类型要求。

如果你不能使用TypeScript，那么最好的做法是在组件内部添加一些手动的类型检查逻辑，但这种方式并不像TypeScript那样强大且严格。例如：

import React from 'react';

const Any = ({ 
  matched,
  type,
  val,
  modify,
  exception,
  keypath = [],
  options = {},
  valwidth = 300,
  keywidth = 120,
  key,
  order = 0,
}: {
  matched?: {
    disabled?: boolean;
    accept?: string;
    ratio?: number;
  };
  type: string;
  val: any;
  modify: (value: any) => void;
  exception?: () => void;
  keypath?: string[];
  options?: object;
  valwidth?: number;
  keywidth?: number;
  key: string;
  order?: number;
}) => {
  if (!type || typeof type !== 'string') {
    throw new Error('Invalid "type" prop');
  }
  if (typeof modify !== 'function') {
    throw new Error('Invalid "modify" prop');
  }
  if (!key || typeof key !== 'string') {
    throw new Error('Invalid "key" prop');
  }

  // Add more checks for other props as needed

  // Your component logic here
};

export default Any;

这段代码会对每个prop进行简单的类型检查，并在发现不符合预期的情况下抛出错误。然而，这种方法仍不如TypeScript那样全面和可靠。