airbnb/react-sketchapp

basic-setup-typescript compile error: No overload matches this definition error: Style typings suspected

tx-tim opened this issue · 1 comments

I am setting up react-sketchapp using the basic-setup-typescript example.
The example application is not compiling due to an type error related to styling.
It looks like Text and View components with the fontweight css rule in style definition results in a typescript error: No overload matches this definition error

Expected behavior:

Application compiles and swatches are built in sketch.

Observed behavior:

I'm setting up react-sketchapp using the [basic-setup-typescript][1] example.
The example application is not compiling due to an type error related to styling.
It looks like Text and View components with the fontweight css rule in style definition results in a typescript error: No overload matches this definition error

Considering this code snippet from [my-command.tsx][2]

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>
);

You can see that the style definition for the View component has multiple rules while the Text component has only two. This example results in the error above error TS2769: No overload matches this call.

Removing fontWeight from the Text component allows the code to compile and render the example.

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

Moving fontWeight to the View component results in the typescript error again.

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

It looks like there is a problem with the type definitions, but I'm having difficulty tracking it down. I did find a types file (src/types) in which TextStyle extends ViewStyle type definition and does include fontWeight as optional:

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

How to reproduce:

cd to /examples/basic-setup-typescript basic-example-typescript and run the render script with npm run render

Sketch version:
64

Please attach screenshots, a zip file of your project, and/or a link to your github project
https://github.com/airbnb/react-sketchapp/tree/master/examples/basic-setup-typescript

Ah I actually fixed it in #496. Will publish soon