React组件：使用prop-types还是Props接口做类型校验？

核心区别先搞懂 #

你用的React.FC<DateProps>是编译时的类型检查——TypeScript在代码编译阶段就会帮你揪出props类型错误，编译后的JS代码里不会留下任何类型相关的代码。

而prop-types是运行时的校验——它会在浏览器实际运行时检查props的类型，不符合规则就会在控制台抛错，哪怕代码已经编译成JS了。

prop-types的独有优势 #

如果留着这个规则，它能解决一些TypeScript覆盖不到的场景：

• 生产环境兜底：TypeScript类型会被编译擦除，如果有绕过编译流程的情况（比如第三方纯JS组件调用你的TS组件、动态生成的props），prop-types能在运行时帮你发现问题。
• 兼容纯JS代码：如果项目里还有未迁移的JS组件，或者需要和纯JS的第三方库配合，TypeScript类型对JS代码完全无效，prop-types是通用的校验方案。
• 复杂校验逻辑：prop-types支持自定义校验函数，比如检查某个props是否是合法邮箱、或者根据其他props的值动态校验（比如当type="date"时，要求value是ISO格式字符串），这种复杂逻辑用TypeScript类型实现起来会很繁琐，甚至做不到。
• 老工具适配：一些旧的组件文档生成工具，对prop-types的支持比TypeScript接口更好，能直接生成可读性高的props文档。

为什么大多数TS项目会关掉这个规则 #

• 重复劳动：用TypeScript已经定义了props接口，再写一遍prop-types完全是重复工作，后续修改props时要改两处，很容易遗漏出错。
• 编译时校验足够用：只要项目严格遵循TS规范，开发阶段就能把绝大多数类型错误揪出来，生产环境出现类型问题的概率极低。
• 额外性能开销：prop-types的运行时校验会增加一点代码体积和运行时计算量，虽然影响不大，但对于追求极致性能的项目来说没必要。

要不要留？看你的项目情况 #

• 如果是纯TypeScript栈，没有兼容JS组件、动态props的需求，直接关掉react/prop-types规则就行，沿用你熟悉的React.FC+TS接口的方式，省心又高效。
• 如果项目是JS/TS混合栈，或者需要给纯JS代码提供组件，或者有复杂的运行时校验需求，可以保留规则——但也可以只给JS组件写prop-types，TS组件单独关闭规则，避免重复劳动。

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