No support for typescript syntax

[vincaslt]

Specifying proptypes with typescript syntax breaks highlighting:

const StyledHeader = styled<Props>(Header)`
  position: fixed
  width: 100%
  background-color: ${({ theme }: Props) => theme.colors.secondary}
  height: 50px
`

All of the rules are highlighted with string highlighting.

[CBainx]

As far as I know, you can't specify the props that way. (Reference: microsoft/TypeScript#11947)
If Header is a regular component, you could remove <Props> and you'd still get type checking. If it's a stateless component you have to do something like whats in the docs: https://github.com/styled-components/styled-components/blob/master/docs/typescript-support.md

You can however remove <Props> and just replace the following line:
background-color: ${(props: Props) => props.theme.colors.secondary}

[julienp]

Can this issue be closed or can someone confirm that we do need to support something like styled<Type>?

[clayne11]

We definitely need to support this. It's 100% allowed. I use it with stateless components as so:

interface RootProps {
  label: React.ReactNode,
}

const Root = styled<RootProps>('div')`
  height: ${(props) => props.label ? 72 : 48}px;
`

Without specifying the props that way it TypeScript will complain about props.label.

[misantronic]

+1

This could be pretty easily solved by changing the regex-statement in line 7:
https://github.com/styled-components/vscode-styled-components/blob/master/syntaxes/styled-components.json

I will try to make it work and add a pull-request