React中传递对象作为Props时，TypeScript为何需要嵌套属性？

报错的核心原因 #

第一个示例里，PersonData接口直接定义了name、age、country三个顶级属性，符合这个类型的对象结构是：

{
  name: string,
  age: number,
  country: string
}

但你在函数PersonName里用了解构语法{data}，这相当于要求传入的参数必须包含data属性。可PersonData类型里根本没有定义data，所以TypeScript会抛出错误，提示你找不到这个属性。

修改后正常运行的逻辑 #

修改后的PersonData接口（注：你写的代码里少了冒号，正确写法应该是data: { ... }）给类型添加了嵌套的data属性，此时PersonData对应的对象结构变成：

{
  data: {
    name: string,
    age: number,
    country: string
  }
}

这时候函数里的{data}解构就完全匹配这个类型了——传入的参数确实有data属性，且data内部包含name字段，所以TypeScript不再报错，代码可以正常运行。

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