Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TS] StyledComponentClass does not have any construct or call signatures #1079

Closed
renatorib opened this issue Aug 10, 2017 · 5 comments
Closed

Comments

@renatorib
Copy link

renatorib commented Aug 10, 2017

Hello. I'm trying to up a new project with typescript + styled-components, but I faced with a problem with prop types + jsx.
I get this error: [ts] JSX element type 'Styled' does not have any construct or call signatures when I try to use a Component from styled.

type Props = {
  color: string,
};

const Styled = styled<Props>('div')`
  color: ${p => p.color};
`;

// later
render() {
  return (
    <Styled />  {/* [ts] JSX element type 'Styled' does not have any construct or call signatures */}
  ) ;
}

image

Styled type is StyledComponentClass<Props, any, Props> by inference as specified in styled typings.

image

But if I force the type as any it works 'normally', without error:

const Styled: any = styled<Props>('div')`
  color: ${p => p.color};
`;

image

But this way I'll loss all the typing benefit, I think.

I tried put StatelessComponent<Props> instead of any, but unsuccessfully (I don't know why, I'm new with TS)

image


How can I get around this situation?

@renatorib renatorib changed the title [TS] StyledComponentClass does not have constructor or call signatures [TS] StyledComponentClass does not have any construct or call signatures Aug 10, 2017
@renatorib
Copy link
Author

Updating: it seems that the prop types do not influence the error:

image

@renatorib
Copy link
Author

Sorry, my bad. I forgot to install @types/react;

@MariusAlch
Copy link

Thank for documenting, had same issue. :)

@tur-nr
Copy link

tur-nr commented Aug 10, 2018

Even with @types/react I get this error 😒

image

{
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0",
    "styled-components": "^3.4.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.1",
    "@types/react": "^16.4.9",
    "@types/react-native": "^0.56.6",
    "@types/react-navigation": "^2.0.13",
    "@types/react-test-renderer": "^16.0.2",
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "^5",
    "jest": "23.4.2",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.4.2",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "16.4.1",
    "ts-jest": "^23.1.3",
    "typescript": "^3.0.1"
  }
}

@tur-nr
Copy link

tur-nr commented Aug 10, 2018

After much playing about I noticed that you have to enable Typescript support on VSCode. I had a fresh install of VSCode and after installing/enabling full support the Typingscript it worked.

image

Just click Typescript on the welcome screen and reload your editor. It's funny cause Typescript syntax works out the box for VSCode, but only after I do this does it begin to work 🤔

Thanks again team.

❤️💅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants