TypeScript组件传参问题：函数未定义且不符合Props类型要求

问题根源 #

你在MapTab组件中传递onDirectionsPress时用了错误的语法：

<MapComponent results={results} {...onDirectionsPress} />

{...X}是对象展开语法，仅能展开对象的可枚举键值对。但onDirectionsPress是一个普通函数，没有可枚举的属性，所以这段代码相当于没传递onDirectionsPress这个props。这直接导致两个问题：

1. TypeScript检测到MapComponent的必填props缺失，抛出Function is missing in type but required in type 'Props'错误
2. MapComponent内部的onDirectionsPress自然会是undefined

正确写法 #

写法一：显式传递（推荐） #

直接通过键值对的形式传递函数：

const MapTab = ({
  results,
  fuelType,
  searchDistance,
  addressName,
  onDirectionsPress,
}: Props) => (
  <View style={styles.container}>
    ...
    <MapComponent results={results} onDirectionsPress={onDirectionsPress} />
  </View>
);

写法二：对象包裹后展开 #

如果一定要用展开语法，需要把函数放到一个对象里再展开：

<MapComponent results={results} {...{ onDirectionsPress }} />

这里{ onDirectionsPress }是ES6对象字面量简写，等价于{ onDirectionsPress: onDirectionsPress }，展开后就能正确传递这个props。

验证修改 #

修改完成后，MapComponent内部的console.log会正确打印出onDirectionsPress函数，TypeScript的错误也会同步消失。

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