React结合TypeScript使用时Interface定义组件props的正确方式疑问

结论 #

你的修改方式完全符合 React + TypeScript 开发的常规规范，还有更易维护的优化写法可以参考。

原因说明 #

React.FC 的泛型参数本质是定义整个组件 Props 对象的结构，你最初定义的 PersonInterface 只有name、age两个顶层属性，自然匹配不到结构里不存在的person属性，TS 报错是正常的类型校验逻辑。

更推荐的写法 #

为了避免类型冗余、提升复用性，建议把基础业务类型和组件专属 Props 拆分定义：

// 基础Person类型，可在接口请求、工具函数、其他组件中通用
export interface Person {
    name: string,
    age: number,
}

// 组件专属Props，和当前组件的入参逻辑绑定
interface PersonCmpntProps {
    person: Person
}

const PersonCmpnt: React.FC<PersonCmpntProps> = ({person}) => {
    return (<Text>{person.name + " is " + person.age}</Text>)
}

这种写法的优势是后续如果需要修改Person的属性定义，只需要修改一处即可全局生效，不会出现多处定义属性不一致的问题。

规范补充 #

React + TypeScript 开发的通用共识是：组件 Props 推荐单独定义专属的类型，不要直接复用业务实体类型直接作为泛型参数传入，避免业务实体的非相关字段改动意外影响组件的入参校验。

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