纯React项目如何实现类似TypeScript的可选props参数定义？

在不使用TypeScript的纯React JS项目中，你可以通过以下两种方式实现和TS interface可选参数等效的效果：

方案1：PropTypes + defaultProps（官方标准方案，带类型校验） #

React官方提供了prop-types包用于运行时的props类型校验，通过是否添加isRequired标记区分必填/可选参数，再配合defaultProps为可选参数设置默认值，完全对齐TS的可选props逻辑：

1. 若未安装依赖先执行安装：npm install prop-types
2. 组件示例代码：

import React from 'react';
import PropTypes from 'prop-types';

// 按钮组件
const Button = (props) => {
  return <button style={{ color: props.color }}>{props.title}</button>;
};

// 定义props规则
Button.propTypes = {
  title: PropTypes.string.isRequired, // 必填参数，对应TS的title: string
  color: PropTypes.string // 可选参数，对应TS的color?: string
};

// 为可选参数设置默认值
Button.defaultProps = {
  color: '#333'
};

export default Button;

开发环境下如果未传入必填的title参数，浏览器控制台会抛出明确的校验警告，和TS的编译提示逻辑对应，仅在开发环境生效不影响生产环境性能。

方案2：参数解构默认值（轻量方案，无类型校验） #

如果不需要类型校验，仅需要实现可选参数的默认值效果，可以直接在组件参数解构时给可选参数赋值默认值，写法更简洁：

import React from 'react';

// title无默认值视为必填，color设默认值视为可选
const Button = ({ title, color = '#333' }) => {
  return <button style={{ color }}>{title}</button>;
};

export default Button;

该方案没有运行时类型校验，传入错误类型的参数不会触发警告，适合小型项目、内部自用组件的快速开发场景。

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