Generics support for typescript

When creating dynamic components we often use generics syntax to define types for props.

We’re doing it like so:

const MyComponent = styled<SomeProps>`
  color: ${(p) => p.isActive ? 'red' : 'blue'};
`

const MyOtherComponent = MyComponent.extend<OtherProps>`
  color: ${(p) => p.isFocused ? 'red' : 'blue'};
`

Yes, vscode-styled-components supports some of the generics, but with current support it’s impossible to extend extend other components, only built-in elements because this following will not pass TS type validation:

const MyComponent = styled<MyProps>(NotAStyledComponent)`
  color: ${(p) => p.isActive ? 'red' : 'blue'};
`

// these two also will cause validation error
const MyComponent = styled<MyProps, NotAStyledComponent>(NotAStyledComponent)`
  color: ${(p) => p.isActive ? 'red' : 'blue'};
`

// even if styled component passed
const ComponentOne = styled.div`
  background-color: #fff;
`

// both will fail
const MyComponent1 = styled<MyProps, ComponentOne>(ComponentOne)`
  color: ${(p) => p.isActive ? 'red' : 'blue'};
`

const MyComponent1 = styled<MyProps>(ComponentOne)`
  color: ${(p) => p.isActive ? 'red' : 'blue'};
`

We sure can do something like this:

const MyComponent1 = styled<MyProps, any>(ComponentOne)`
  color: ${(p) => p.isActive ? 'red' : 'blue'};
`

But it will eventually force us to use any in all underlying code or will break its validation otherwise.

It would be great if you’ll introduce generics support 😃

[DevanB]

This seems to be an issue still.

Intellisense suggestions stop working and code themeing changes too. Attached is a video of what I’m seeing.

[jperelli]

after a couple of hours trying to make this work… I realized of a too-simple-to-be-true workaround, just add as typeof YourGenericComponent at the end

// antd -> Table is a generic component
import styled from 'styled-components'
import { Table as AntdTable } from 'antd'

export const Table = styled(AntdTable)`
...
` as typeof AntdTable

posting it here just in case it helps someone, or myself in the future 😃