发布React包时是否需要同时使用PropTypes和Typescript？

非TS用户是否能收到TS定义的props校验提示？ #

不能。
TS的类型校验属于编译期能力，仅对满足以下两个条件的用户生效：

• 项目使用TS开发
• 正确引入了你发布的包附带的.d.ts类型定义文件

纯JavaScript开发的项目不会执行TS类型检查，且TS的类型逻辑不会被编译到运行时代码中，所以这类用户完全感知不到你写的TS类型定义，也不会收到对应的props错误提示。

是否需要额外接入PropTypes适配非TS用户？ #

根据你的目标用户群体决定：

• 如果你的公共包需要覆盖所有类型的React开发者（包括纯JS用户），建议接入PropTypes。PropTypes是React官方提供的运行时校验方案，开发环境下如果props传入不符合规则，会直接在浏览器控制台输出明确的警告，对JS用户的友好度很高。
• 你不需要担心额外接入PropTypes带来的生产环境包体积问题：主流打包工具（webpack、Rollup、Vite）都支持在构建生产版本时自动剔除PropTypes相关代码，不会增加用户的生产包体积。
• 如果你的公共包是面向TS技术栈的专属工具，目标用户几乎都是TS开发者，可以选择不接入PropTypes，仅提供完善的类型定义文件即可，这种场景下PropTypes的收益很低。

同时兼容TS类型和PropTypes的写法示例 #

import PropTypes from 'prop-types';
import type { FC } from 'react';

// TS编译期类型定义，供TS用户使用
interface MyButtonProps {
  content: string;
  size?: 'small' | 'middle' | 'large';
  disabled: boolean;
  onClick: () => void;
}

const MyButton: FC<MyButtonProps> = (props) => {
  // 组件业务逻辑
  return <button disabled={props.disabled} onClick={props.onClick}>{props.content}</button>
}

// 运行时PropTypes定义，供所有用户开发环境下校验使用
MyButton.propTypes = {
  content: PropTypes.string.isRequired,
  size: PropTypes.oneOf(['small', 'middle', 'large']),
  disabled: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired
}

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