TS + React 项目中组件 Props 接口是否需要设置 export 导出？

你这种为组件 Props 定义导出接口 + 成员加 readonly 修饰符的写法是 TypeScript 前端项目的通用最佳实践，相关问题解答如下：

性能开销相关 #

• 运行阶段：完全无任何开销。TypeScript 的所有类型、接口、修饰符都会在编译为 JavaScript 的阶段被完全擦除，不会生成任何额外的运行时代码，完全不会影响运行性能。
• 编译阶段：开销可以忽略不计。export 关键字和 readonly 修饰符都是 TS 类型系统的基础语法，TS 编译器对这类语法的处理耗时已经被优化到微乎其微的级别，正常规模的项目完全感知不到编译速度差异。

除可读性外的额外收益 #

导出接口的额外收益 #

• 可在组件外部复用类型定义：比如你需要封装给该组件传参的工具函数、或者在父组件批量构造组件入参时，直接引入这个接口就能获得完整类型提示，不需要重复写类型定义，也能避免多处定义不一致的问题。
• 如果你开发的是对外发布的组件库，导出的 Props 接口是给使用者的标准类型参考，使用者可以直接基于这个接口做二次封装、类型扩展，不需要自己根据组件文档反向推导类型。
• 方便自动化测试的类型校验：写组件单元测试时，可以直接用这个接口约束测试用例的入参格式，提前拦截传参错误。

readonly 修饰符的额外收益 #

• 从类型层面符合单向数据流规范：React、Vue 这类框架的组件 Props 都是单向数据流，不允许组件内部修改入参，加了 readonly 之后，如果你在组件内部不小心修改了 Props 属性，TS 会在编译阶段直接报错，把问题拦截在开发阶段。
• 类型定义和运行时防护逻辑可以保持一致：如果你的项目加了运行时的 Props 深冻结校验，readonly 修饰符可以保证类型层面的约束和运行时的实际行为一致，不会出现类型允许修改、运行时实际报错的不一致问题。
• 辅助 TS 做更精准的类型推导：当你把 Props 传给其他工具函数时，TS 可以明确知道这些属性不会被篡改，能给出更准确的类型提示和优化建议。

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