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