1

我正在使用basic-setup- typescript示例设置 react-sketchapp。由于与样式相关的类型错误，示例应用程序未编译。看起来fontweight样式定义中带有 css 规则的 Text 和 View 组件会导致打字稿错误：No overload matches this definition error

考虑来自my-command.tsx 的这段代码片段 

const Swatch = ({ name, hex }: SwatchProps) => (
  <View
    name={`Swatch ${name}`}
    style={{
      height: 96,
      width: 96,
      margin: 4,
      backgroundColor: hex,
      padding: 8,
    }}
  >
    <Text name="Swatch Name" style={{ color: textColor(hex), fontWeight: 'bold' }}>
      {name}
    </Text>
    <Text name="Swatch Hex" style={{ color: textColor(hex) }}>
      {hex}
    </Text>
  </View>
);

可以看到View组件的样式定义有多个规则，而Text组件只有两个。此示例导致上述错误error TS2769: No overload matches this call.

fontWeight从组件中移除Text允许代码编译和呈现示例。

<Text name="Swatch Name" style={{ color: textColor(hex) }}>
  {name}
</Text>

移动fontWeight到View组件会再次导致打字稿错误。

  <View
    name={`Swatch ${name}`}
    style={{
      height: 96,
      width: 96,
      margin: 4,
      backgroundColor: hex,
      padding: 8,
      fontWeight: 'bold' <--- added
    }}
  >

看起来类型定义有问题，但我很难追踪它。我确实找到了一个类型文件 ( src/types)，其中TextStyle扩展了ViewStyle类型定义，并且确实包含 fontWeight 作为可选：

export type TextStyle = ViewStyle & {
  ...
  fontWeight?: string;
  ...

这里有几个问题：

  1. 我看到的错误是否表明类型定义存在问题或其他问题？
  2. 我有什么办法来解决这个问题？
4

0 回答 0