Feature Request: Add support for styled-components-ts

There is an issue with styled-components and typescript where typing props inside intropolations is hard because of an issue where you can’t pass generic information to tagged template functions:

https://github.com/Microsoft/TypeScript/issues/11947

https://github.com/styled-components/styled-components/issues/1428

Which is a huge annoyance compared to styled-components otherwise excellent ts support The current worked around is to use another library called styled-components-ts which does this:

// Import react, styledComponents and styledComponentsTS
import * as React from 'react';
import styledComponents from 'styled-components';
import styledComponentsTS from 'styled-components-ts';

// Create an interface for the component
export interface MyImageProps {
  size: number;
  borderColor?: string;
  borderSize?: number;
}

// Create a styled component with our props interface
const MyImage = styledComponentsTS<MyImageProps>(styledComponents.img) `
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border: ${props => props.borderSize || '4px'} solid ${props => props.borderColor || 'black'}
`;

export default MyImage;

Properly typing the props options in the interpolations without any other config. As TS issue 11947 doen’t seem to be getting fixed anytime soon (At least until the problem affects other library other then styled-components) we are stuck with it for some time.

Of course right now, using 'styledComponentsTs()` breaks syntax highlighting and intellisence inside the template literal, believing it to be a normal template literal. I was wondering if this could be fixed, as I think styled-components-ts is almost essencal to using styled-components and typescript together and vscode is obviously very popular among typescript devs.

Otherwise thanks for the good work.

[beshanoe]

No need for supporting styled-component-ts anymore, passing generics to tagged templates has landed in typescipt@next and headed to 2.9: https://github.com/Microsoft/TypeScript/issues/11947#issuecomment-383252975 now this extension should definitely support such code:

export const RedBox = styled.div<{foo: string}>`
  background: red;
  ${props => props.foo}
`;

[Cu3PO42]

Thanks for the heads up @beshanoe. I have opened #81 to track support for that syntax. In light of this, I believe support for styled-components-ts will not be worked in since in will be made obsolete anyway.