React Native TypeScript中如何定义作为Props传递的样式类型？

我正在将React Native项目逐步迁移到TypeScript，遇到了组件Props中样式类型声明的问题。当前组件Props定义如下：

interface Props {
  children: ReactNode;
  style?: ViewStyle;
}

传递单个样式对象（比如 <Component style={{ marginTop: 1 }}>...children...</Component> 或 <Component style={styleObj}>....children...</Component>）时一切正常，但传递样式数组 <Component style={[styleObj, { marginTop: someVar }]}>...children...</Component> 时，出现了TypeScript错误：

TS2559: Type '({ flex: number; } | { marginTop: number; })[]' has no properties in common with type 'ViewStyle'.  Component.tsx(12, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & Props'

正确的样式类型声明方式 #

React Native中的style属性支持单个样式对象或样式对象数组两种形式，直接用ViewStyle只能匹配单个对象，无法兼容数组场景。你需要使用React Native提供的StyleProp<T>类型来包裹样式类型，它是一个联合类型，包含了T和T[]两种情况。

修改后的Props定义如下：

import { StyleProp, ViewStyle, ReactNode } from 'react-native';

interface Props {
  children: ReactNode;
  style?: StyleProp<ViewStyle>;
}

这样不管传递单个样式对象还是样式数组，TypeScript都能正确识别类型，不会再抛出错误。

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